[RTK-Query] Accessing data and statuses from other components the redux way

[shubhamdeodia]

From the documentation, it is not clear how I can access data the which was fetched from the RTK query.

I have a like below

export const apiSlice= createApi({
    reducerPath: 'api',
    baseQuery: fetchBaseQuery({
        baseUrl: 'url'
    }),
    endpoints: (builder) => ({
        fetchData: builder.query({
            query: () => ({
                url: `/api/`,
                method: 'GET',
            })
        })
    })
});

export const { useFetchDataQuery} = apiSlice;

Now this API slice fetch the data and show the different states like isLoading, isFeteching when I use it like this in some component

const { data, isLoading, isFetching } = useFetchDataQuery();

What I really want to ask is, How can I access the same data (which is fetched in the above query) using selectors in any other component, rather than passing the data as props?

Since the data is getting stored in redux only. I was hoping to access it in a simple way like using useSelectors

Also, do we have anything like useIsFetching() like there is in react-query?

[phryneas]

You can just use the same useFetchDataQuery in any number of components - this will not start another request if one has already been made.

Also, theree is api.endpoints.fetchData.useQueryState docs and api.endpoints.fetchData.select docs

Both useQuery and useQueryState have the selectFromResult docs option which you can use to only select a part of the result, so selectFromResult: result => ({ loading: result.isFetching }) would be a valid way of building your own useIsFetching hook.

[akursat]

Your ComponentB subscribes to the same data as ComponentA, as it has the same query parameters.

[shubhamdeodia]

Thank you for the clarification. This is exactly what I was looking for.

[ODB-Gideon]

Hi thank you guys for clearing this up. Is it possible to also share the statuses of a mutation in an easy way?

[phryneas]

It will when #1477 lands.

[ODB-Gideon]

Wow! Thank you for the swift response @phryneas, I truly appreciate it!

[balash24]

How can I access the data from component A to multiple components with useMutation hook I guess api.endpoints.{endpointname}.select() wont work for useMutations as it expect args to be pass

[EskiMojo14]

@balash24 https://redux-toolkit.js.org/rtk-query/usage/mutations#shared-mutation-results

[magrega]

I've edited what I wrote here earlier since I figured out some stuff but now I have a more fundamental question which is:

I have a table where all of the fetched data renders and I have different components that make api calls with different args (filters). How can I use query hooks to get any fetched data to render in that table regardless of parameters sent?

Now I am storing fetched data to a variable in global store and access it the table with useSelector but I think there are some steps that could be avoided since I am double storing fetched data. (One comes with query, second I store manually with dispatch()).

Here's the example:
Here I get data from api and destructure refetch function to trigger fetch if query parameters change. Parameters are stored in Redux store.

const query = useSelector((state) => state.orderList.queryParams);

  const { refetch } = useGetOrderListQuery(query);

  useEffect(() => {
    refetch(query);
  }, [query, refetch]);

This hook is used in table component to show whether loading is happening
const { isFetching } = useGetOrderListQuery(query);

As you can see I don't use data from query hooks. I set data manually inside useGetOrderListQuery.

getOrderList: builder.query({
      query: (arg) => ({
        url: ORDER_LIST,
        params: { ...arg },
      }),
      providesTags: ["Orders"],
      async onQueryStarted(_, { dispatch, queryFulfilled }) {
        try {
    const { data } = await queryFulfilled;
    console.log(data);
    dispatch(setOrderData(data.results));
  } catch (err) {
    console.log(err);
  }
      },
    }),

I believe I can avoid doing this dispatch(setOrderData(data.results)); and access data right from the query but I don't see how.