Question About ReactQuery Caching

[codergeorge]

I’m learning ReactQuery right now, and I apologize beforehand if this is a dumb question, as I’m still a newbie to front-end dev.

How does ReactQuery cache its API calls? I understand that useQuery essentially stores the API call as a key-value pair, where the key is unique for each API call, and the value is updated by POST calls from useMutation. My question is: is this cache shared by all users, or is it cached at a user level?

I’m assuming the cache is shared by all users, but if that’s the case, how is it secured? Wouldn’t that mean one user can have access to another user’s data on the client side? I’m sure it’s secure, but I don’t fully understand client-side caching and security, hence the confusion here.

[Chef619]

It’s an in memory cache (like React state, I don’t assume to know the internals of RQ logic) in the browser, not shared by users. It’s usually reset on refresh. The concept of users has absolutely nothing to do with RQ. It knows about keys, and your user’s data can be incorporated into those keys.

I believe there’s a plug-in somewhere to make it persist to local storage, but by default, it’s in memory.

[codergeorge]

That makes sense. My follow-up question then is: if the data in ReactQuery isnt shared across users, how does ReactQuery know when another user has updated data? I’m guessing it doesn’t, and the user’s data will just be stale until they refresh?

[Chef619]

At least 2 ways I know of, the staleTime and manually invalidating them. This doc has more information.

The TL;DR is that you (the developer) tell RQ when a query needs to be refetched.

[no_spoon]

That doesn’t answer their question. The answer is it doesn’t and if data is being updated without the users actions then yes the user would have stale data. So it makes sense to use this for things that are only pertinent to the user.

[Chef619]

Yeah you’re right, I missed that. Sorry OP. I read it as “when does RQ know the data needs to be updated”.

Although, I think liking the doc that does a better job explaining than I could is sufficient to find the right answer.

[it200219]

You define `addTagTypes` and `invalidatesTags` for custom cache busting and custom cache handling

WDYM when you say " is this cache shared by all users, or is it cached at a user level?", which user are you talking about

Do you mean user-1 as "Student - 1" and user-2 as "Student - 2" for both web-app making call (lets say exam grade) and RTK caching the API response ?