Accessing RTK Query data & state across multiple components

Question

I'm using RTK Query to fetch some data. I need to access the loading state across various components in my application, but I'm unsure how to do so.

I feel like it may simply be that I'm misunderstanding how to utilize RTK Query properly in a larger application. Most of the examples are a single component, and I don't quite see how you can get access to the various states of a single query from various components.

For example, I need to show a loader in a main section of the app where the data is generated from a query. Then, I need to show a completely different loader in a tiny part of a sidebar, which has some content details which is generated via the same API query.

How does this work with RTK Query?
Do any examples exist which use multiple components that share this query state/status?
Am I completely missing a fundamental understanding of how state is used across the app? (I feel this is the thing here haha)

Musk

Answer 1

If you call the same useQuery hook with the same arguments in another component, those two will share the cache entry and return exactly the same data - it will not trigger another request to the server.

So: just useQuery everywhere you need it :)

Hypsometry

What if in multiple components I need to show a loading state if the query is being re-run/refetched, although it's being refetched elsewhere in another component? Does the status also get shared? I apologize if this is clearly stated in the docs, I was unable to determine this. – Musk

isFetching is. – Hypsometry

Thank you. I wasn't clear on if these status's were simple store values shared globally via the useQuery hooks, or if they were independent to each usage of the hook. I swear I've attempted to test this out and found that the isLoading and isFetching status were not changed across components, but I'm assuming I'm wrong here. – Musk

In your case @Musk I would take a look into: fixedCacheKey: An optional string used to enable shared results across hook instances – Waggoner

@Waggoner that's for mutations. Queries always share the result if you just call them with the same argumen. – Hypsometry

isFetching is not shared across components – Cyrano

@tareknoaman I am the author of RTK Query. If you call useQuery for the same endpoint with the same argument, isFetching will be shared across components. – Hypsometry

What if I want to have the data of another component update as a result of the interaction with another component without actually mutating any data but just calling with different parameters? I have some select buttons I am building that are filled with dadta from our server side and then when they are all filled out I need to refresh the API cache somehow. Any advice? Having similar problems, thanks :) – Metalinguistic

@MarcCasavant then you use props to communicate that, and call the hook with different args in the other component. The job of RTK query is to reflect that state of your server, not to do your in-app-communication. – Hypsometry

What if the query fails the query will be called infinitly – Yorker

Answer 2

You can also define a selector for that "loading" piece, if you don't wan't to use the query inside every component, like so:

const selectIsResourceLoading = (state: RootState) => apiSlice.endpoints.getResource.select()(state).isLoading;

And then, reuse it within the component:

const isResourceLoading = useTypedSelector(selectIsResourceLoading);

Nittygritty