useQuery/useInfiniteQuery caches data but refetch it

[andrii-pavlykivskyi]

Hi, I faced the problem wih caching data using useQuery and useInfiniteQuery.
Requests depend on typeFilter and data is being updated when filter changed.
If I choose filter, that has been already fetched it returns data immediately from the cache but http request is being sent as well.

Here is my code:

const [typeFilter, setTypeFilter] = useState(projectTypes[0])

const { data: count } = useQuery({
    queryKey: [`projects-count`, typeFilter],
    queryFn: getProjectCount
  });

  const {
    data: projectsData,
    fetchNextPage,
    isLoading
  } = useInfiniteQuery(
    [`projects`, typeFilter],
    ({ pageParam }) =>
      selectProjects({ start: pageParam?.start ?? 0, count: pageParam?.count ?? 12, typeFilter }),
    {
      getNextPageParam:
        (lastPage) => ({ start: lastPage.offset, count: 12, typeFilter: lastPage?.typeFilter })
    }
  )

[TkDodo]

that's because staleTime defaults to 0:

• https://tanstack.com/query/v4/docs/react/guides/important-defaults
• https://tkdodo.eu/blog/react-query-as-a-state-manager