Can i update query keys from inside useQuery function

[naveenSuki]

i have a situation where i am polling an api using useQuery; i want to update query keys and axios functions params before the next api call is made based on data that i receive from the api. How can i do it? There is a problem if i use State in react; that sometimes it fetches data with old ids and also when state updates; as sometimes calculating new set of ids take time. Can i do this id modification from inside useQuery.

The ids for fetchData call; i am getting from query keys; so if i can update them; i can do it

Is there a way to modify queryKeys from useQuery hook itself.

@TkDodo can you please give some idea on how accomplish this

For Example:

useQuery(["data", ids], (...args) => fetchData({args:{ids}}), {
    enabled,
    refetchInterval: (data, query) => {
     **i want to update ids before next api call happens; how can i do it**
      return 5000;
    },
    refetchIntervalInBackground,
    select: (response) => response.data.results
  });

[vossmalte]

Same applies here:
https://tkdodo.eu/blog/react-query-fa-qs#how-can-i-pass-parameters-to-refetch
So the answer is no!

[naveenSuki]

Ya; but i think then this is a flaw with queryKeys; it's wrong to assume them to handle two things at the same time:

1. acting as dependency array
2. helps in caching results.

Personally; thinking in react-query would be a little simple; if these two responsibilites are handled by seperate entities internally/externally.

We could say something like cacheKeys and dependencyKeys; or any better name

These two functionality are totally different; and will lead to someone resorting to a more complex implementation to block unneccesary api calls etc.

Although; it's just my opinion only; but i beg to differ here.

[TkDodo]

These two functionality are totally different

They are really not. To avoid problems, you really need to cache results by their inputs. If you consider a generic function:

fn(...args: string)

and you'd wanted to cache results for function calls, the only reliable way is to cache by the args that you get. The QueryKey is the argument to the queryFn, because not only is it passed implicitly inside the QueryFunctionContext:

useQuery({
  queryFn: (context) => context.queryKey
}

we also ensure with an eslint plugin that everything you use inside the queryFn is also part of the key, because if it's not, you can create problems like:

useQuery({
  queryKey: ['todos', page],
  queryFn: () => fetchTodos(sort, page)
})

⬆️ oh no, we are not adding sort to the queryKey, but we use it in the queryFn, so now we get shared keys between different sortings, thus reading wrong values from the cache. You really don't want to do that, and separating into different keys will go down this exact road.

i want to update query keys and axios functions params before the next api call is made

you might think that's what you want, but I doubt it. So please tell us your real use case instead of asking an xy-question (https://tkdodo.eu/blog/how-can-i)

[naveenSuki]

Yes i agree...So; i will tell you what i did and why i did that...and maybe u can help me rectify my approach [i think react query is right tool to solve this problem also];
So; the situation is like this:

1. i have an app where i need to poll for certain notes; until suggestions are generated for them.
2. At a given point of time; their can be multiple such notes.
3. i poll them using an api to which i pass noteIds for all such notes; which gives me back the status of each note in an array; whether suggestion are still generating or not; for each note.
   e.g. [{[noteId]:{status}}]
4. Now; once i receive response; i check the status of each note; and if status of that note says; suggestions are generated; i want to stop polling for that note; apart from also updating the UI for that note.

So; my problem is that only; how do i make sure that before the next api call is made; i send to my api only those noteIds for which suggestions are still generating?

I am using useState to store noteIds for which i want to poll; but sometimes it takes time in determining which noteIds are still in generating Suggestions status.
Also; the precondition is i want to make one api call only, passing all noteIds; not seperate request for each noteId; bcz at a time; there can be several such notes.
Currently; I am using refetchInterval to poll the api. and i have useEffect to update these[generating suggestions] noteIds; once i receive data back from api

[TkDodo]

So, one way I'm seeing is to fire one query without refechInterval to just get the initial ids for notes, then do multiple useQuery (one for each noteId), potentially in useQueries, and give each one their own refetchInterval and stop polling once this specific note is done.

This will make more requests one per noteId - batching them together would need to happen on a different layer, e.g. with a lib like batshit.

and if status of that note says; suggestions are generated; i want to stop polling for that note

But I'm also questioning a bit the approach in general. Let's assume you have 5 noteIds, and you get back status processing for all of them. You refetch in an interval, next time, 4 of them are still generating, one is finished. Why do you need to exclude the finished one from the next request? I would just continue to ask for the status of the 5 notes, until all are finished. When the backend gets the 5 notes, it will lookup the status (shouldn't be a big deal) for all 5 of them. Why does it matter to the backend if it only gets the ones that haven't been finished when you last made the request ?

[naveenSuki]

Makes total sense. I was of the idea that if the status has changed to finished; then it's unnecessary to make a subsequent request for that noteId and i should stop polling that noteId. I think this is something that one can live with and is unnecessary to worry about.

Thank you;
@TkDodo