Refetch after mutation with different parameters

[JoakimGit]

Hello everyone. I'm upgrading an older react codebase from class components to functional with react-query and zustand and I've come across a situation where I'm not sure about the best approach.

I have certain endpoints that are cached on the backend. To use the cache, the query can add '&fromCache=true' to the query string, for instance for fetching posts.

const fetchPosts = async ({ fromCache }: { fromCache: boolean }) => {
  return await ky.get('api/posts&fromCache=${fromCache}').json()
}

const PostList = () => {
  const { data: posts } = useQuery({ 
    queryKey: ['posts'], 
    queryFn: () => fetchPosts({ fromCache: true })
  });
  return (
    // ...component
  )
}

The issue arises after a mutation, where the query is supposed to be called with 'fromCache: false'. If I invalidate the query with queryClient.invalidateQueries(['posts']) it will refetch with the same params right?

One solution would be to include a disabled query in the component where the mutation occurs and call refetch, but is that the best solution?

const CreatePostModal = () => {
  const { refetch } = useQuery({ 
    queryKey: ['posts'], 
    queryFn: () => fetchPosts({ fromCache: false }), 
    enabled: false 
  });

  const handleSubmit () => {
    // submit stuff
   onSuccess: () => refetch()
  }
  return (
    // ...component
  )
}

Another solution could be putting the 'fromCache' value into a zustand store and reading that value in the fetch function which might also work?

Thanks for any help :)

[TkDodo]

yeah, this is a surprisingly tricky one. The API seems a bit weird, but I guess it's out of the question to change it. My thinking is that usually, the client shouldn't care about such things. The mutation itself should probably fill the cache on the server - it's not the client's responsibilities to instruct the server when to use a server-side cache and when not.

I think storing that value somewhere else (zustand sounds fine) and then reading it in the queryFn in a non-reactive-way seems like the best approach. With non-reactive, I mean do not have a const fromCache = useStore(store => store.fromCache) outside the queryFn and then close over it, because you will run into stale closure problems.

What you'd want is to simply call: const { fromCache } = getStore() inside the queryFn to just always read the latest value. Then, you can set that value before invalidation and re-set it afterwards.

[JoakimGit]

Thanks for the reply Dodo.

I was going to go with storing the value elsewhere and reading it in the queryFn, but after a talk with the senior dev, we changed the backend to invalidate the server cache on mutations and removed all mention of fromCache in the frontend. The endpoints that used to take a fromCache: boolean now simply read from the cache if the value is there, otherwise it fetches from the DB and sets it in the cache.

And in the frontend, we just invalidate normally in mutation onSuccess with queryClient.invalidateQueries([queryKey]) in order to trigger a refetch.

[TkDodo]

That sounds like the better solution to me, too 👍

[anpave10]

@JoakimGit I was looking for the way how to execute a refetch after an update and with your comment it worked super well, thank you very much 🙏