I have checked other StackOverFlow questions and official react-query docs but I don’t find related info.

Basically I do something after fetch data inside queryFn and I noticed that it causes multiple http calls.

export const useMyItems = () => {
  return useQuery({
    queryKey: ['myItems'],
    queryFn: () => {
      const items = getItems() // fetch
      const res = items.reduce(...);  // <- this causes multiple re-run queryFn. If I remove it, then no multiple re-run

      return res;
    }
    staleTime: 60 * 100, // 10 sec
    refetchOnWindowFocus: false,
  })
}

If I remove const res = items.reduce(...); and just return items, then there is no multiple calls.

Am I supposed to do some post processing in queryFn rather than just fetch and return data?