React-Query: How to use options for useQueries

xiaofeng 0
Viewed 40

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?

react-query react-hooks reactjs
1 Answers

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,
    })
  )
}
Konrad Linkowski0
Related