quickest-silver

Refetch useQueries

I have a useQuery which fetches a list of IDs from a public API. After that I use useQueries to fetch the information for each ID (name, URL, etc). This works on page load. The user can click one of 6 buttons to change the type of story they are looking at. I have the onClick for the button fetching the initial useQuery and successfully fetching a new list of story IDs. However I am not sure how to prompt useQueries to refetch. Please see https://github.com/MelkeyOSS/astrostation/blob/roy/add-hacker-news/src/components/HackerNews/HackerNews.tsx#L56-L93 for the code in question.

2 Replies

extended-yellow•3y ago

Instead of using refetch you should include selectedStoryType.apiSrcin the query key, that way it would automatically be refetched when it changes (+ you'll have a cache per apiSrc). See https://twitter.com/Julien_Delort/status/1626601358118846464 For fetching the details, do you actually need a separate useQueries() ? You could potentially do that in the queryFn of the first query:

const ids = await axios.get(...) // getting the ids
const data = await Promise.all(ids.map(async (id) => axio.get(...))) // getting details
return data;

const ids = await axios.get(...) // getting the ids
const data = await Promise.all(ids.map(async (id) => axio.get(...))) // getting details
return data;

See https://twitter.com/Julien_Delort/status/1628777914291392513

Julien Delort (@Julien_Delort)

A common mistake I've seen with @tan_stack query is the unnecessary usage of refetch in order to refetch data when some parameter has changed. Before:

Likes

133

Twitter

Julien Delort (@Julien_Delort)

@tan_stack query tip: when 2 endpoints are tightly coupled and you always need to call them both to get the data, you don't necessarily need multiple useQuery calls: #javascript #webdev #code #webdevelopment #programming #reactjs #react

Twitter

quickest-silverOP•3y ago

I think the second option is probably the play. I hadn't thought of doing that, but that should work perfectly. I will get that whirl and update as needed. That worked. Thanks for pointing out what should have been an obvious solution.

Gaming

Programming

Refetch useQueries

Did you find this page helpful?