I want to make an API request for each item in an array with useQueries and I don't want a refetch on window focus. When using useQuery, adding refetchOnWindowFocus disables it, but adding options at the end of useQueries refetchOnWindowFocus does not work. It still refetches the data on window focus.
matchData.map((match, index) => {
return {
queryKey: ["matchInfo", matchData[index]],
queryFn: async () => await fetchMatchInfoByMatchId(match),
options: {
refetchOnWindowFocus: false,
enabled: !!matchData,
},
};
})
Does not work.
However writing useQueries like so:
export const useMatchData = (matchData: string[]) => {
const matchInfoArray = useQueries([
{
queryKey: ["matchInfo", 1],
queryFn: () => fetchMatchInfoByMatchId(matchData[0]),
enabled: !!matchData[0],
refetchOnWindowFocus: false,
},
{
queryKey: ["matchInfo", 2],
queryFn: () => fetchMatchInfoByMatchId(matchData[1]),
enabled: !!matchData[1],
refetchOnWindowFocus: false,
},
...
works.
Since the array is big, it's not a good solution. The useQueries documentation does not help. Why does the first solution not work?
CodePudding user response:
useQuery
doesn't support options
property
What's wrong with:
export const useMatchData = (matchData: string[]) => {
const matchInfoArray = useQueries(
matchData.map((match, index) => ({
queryKey: ["matchInfo", match],
queryFn: () => fetchMatchInfoByMatchId(match),
enabled: !!match,
refetchOnWindowFocus: false,
})
)
}