React-Query: How to use options for useQueries

September 13, 2022

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?

>Solution :

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,
    })
  )
}