Multiple apis update same cache & retrieval

[jamesfromvenice]

Ok, I'm hoping I can solve my need with react-query.

I have a few APIS that update the same object (cart), but since they are all different API's they have different cache keys.
ie..

// ALL OF THE FOLLOWING RETURN AN UPDATED "cart" Object. How do I reconcile this "cart" amongst the caches?
// Also, what mechanism can I use to "just read from the cache" ?

['addToCart', productId] <-- can happen on various product pages.
['addCoupon'']
['removeFromCart', productId]

These all update the "cart". But lets say I go to page that "displays" this page. There are no reasons to write on this page, just "read" from the cache. How can I read from the cache on the "cart". It seems since they all update "cart", I'd have to know what the last call was... This seems too complicated to always keep parity with the "cart" in cache, and then to just "read" it?

your thoughts?

[TkDodo]

['addToCart', productId] <-- can happen on various product pages.
['addCoupon'']
['removeFromCart', productId]

all of these look like mutations to me - there should probably only be one query that reads the cart.

This seems too complicated to always keep parity with the "cart" in cache, and then to just "read" it?

you never read from the cache directly when displaying something. The source of truth for the data is on the server - react-query is a “server state manager” after all. Please don’t write to the cache without also updating the backend.

So when you display the cart, make a query that displays the carts data.

[jamesfromvenice]

So, I am a little curious here... all those mutations return an "updated cart"... "if" I use a new query get the cart data... why the need for cache at all IF I am just gonna hit another api to say "give me latest cart"?

I'm a little curious about your statement " Please don’t write to the cache without also updating the backend"... the APIS always returned "updated" cart. The "cache" is always reconciled by the BE.. not sure what you mean?

So, there is no way to handle one cache with different API calls even though they all are returned updated cart objects?

So, what you are saying is that I will have to make another query to get the cart even though I already have it in the various mutations I"ve already called?

[TkDodo]

it's hard to say anything without seeing actual code (preferably in a codesandbox). Generally:

• you have one useQuery that gets your cart data, probably scoped per user: useQuery(['cart', userId], () => fetchCart(userId))
• if you update the cart, e.g. by adding a product to the cart, it's a useMutation, which doesn't require a key.
• that mutation can optimistically update the cart (or not, doesn't matter).
• if the mutation returns data that you consider as accurate, you can update the cache with it.
• you can also just do queryClient.invalidateQueries(['cart', userId]) to refetch data from the backend to really get the latest data.

see:

• https://react-query.tanstack.com/guides/optimistic-updates
• https://react-query.tanstack.com/guides/invalidations-from-mutations
• https://react-query.tanstack.com/guides/updates-from-mutation-responses
• https://react-query.tanstack.com/examples/optimistic-updates

why the need for cache at all IF I am just gonna hit another api to say "give me latest cart"?

you don't need to hit the api after a mutation (see updates-from-muation-responses above).
the cache can also be customized with a staleTime so that you don't do background refetches for a certain amount of time. The primary use of the cache is not to avoid calls to the backend (though you can achieve that with staleTime), it's more to provide a better ux, as its better to display stale data and update it in the background, because the user will instantly see a result, rather than show loading spinners every time.

[pavloko]

@TkDodo

I have a similar question, but in my case multiple requests to modify the same query.

Here's a simplified example:

const useObject = useQuery({
  queryKey: 'objects', 
  queryFn: fetchObjects(),
});

const useCreateObject1 = useMutation({
  mutationFn: (payload) => createObject1(payload),
  onMutate: async (payload) => {
    await queryClient.cancelQueries({
      queryKey: 'object',
    });
    const previous = queryClient.getQueryData('objects');
    queryClient.setQueryData('objects', (old) => {
      return produce(old, (draft) => ({
        // manipulate the array
      }));
    });
    return { previous };
  },
});

const useCreateObject2 = useMutation({
  mutationFn: (payload) => createObject2(payload),
  onMutate: async (payload) => {
    await queryClient.cancelQueries({
      queryKey: 'object',
    });
    const previous = queryClient.getQueryData('objects');
    queryClient.setQueryData('objects', (old) => {
      return produce(old, (draft) => ({
        // manipulate the array
      }));
    });
    return { previous };
  },
});

and it's CRUD for each Object, e.g. during one phase multiple CREATE, UPDATE, and DELETE could happen triggering, e.g. 6 different queries that would modify the same queryKey: 'objects'.