Refetching with useQueries

[alexnguyennz]

Hi is it possible to do this without manually iterating over every individual query's refetch function?

I have a page where I fetch data with a number of queries in parallel and the component stays mounted due to the way it's setup with React Router, so I can't rely on refetchOnMount.

E.g. using the default example on https://react-query.tanstack.com/reference/useQueries where I can just refetch all of these. Thanks.

[erickjth]

Hi @alexnguyennz , I think you might need to iterate over all of those anyways, but you can create a hook to abstract that logic for you:

const useQueriesWithRefetch = (...queries) => {
	const results = useQueries(...queries);

	const refetchAll = useCallback(() => {
		results.forEach(result => result.refetch());
	}, [results]);

	return {
		queries,
		refetchAll,
	};
};

[alexnguyennz]

Yeah I suppose that's fine. Thanks.