Theo's Typesafe Cult•16mo ago

React Query cache is not working?

I started a new t3-turbo-app project then added refetchInterval: 1000 in the post router to update posts real-time. I am getting a status 200 even though data haven't changed. I was expecting a status 304.

2 Replies

.traevelliath•16mo ago

What exactly is the issue? Cache is working, but you are manually requesting a refetch, so the data gets repopulated.

dondonai•16mo ago

Thanks for the reply. I am referring to this example https://tanstack.com/query/v4/docs/react/examples/react/auto-refetching. How can I achieve this?

  const { status, data, error, isFetching } = useQuery({
    queryKey: ['todos'],
    queryFn: async () => {
      const res = await axios.get('/api/data')
      return res.data
    },
    // Refetch the data every second
    refetchInterval: intervalMs,
  })

  const { status, data, error, isFetching } = useQuery({
    queryKey: ['todos'],
    queryFn: async () => {
      const res = await axios.get('/api/data')
      return res.data
    },
    // Refetch the data every second
    refetchInterval: intervalMs,
  })

The status code is 304 (not modified).

React Query Auto Refetching. Example | TanStack Query Docs

An example showing how to implement Auto Refetching. in React Query

Gaming

Programming

React Query cache is not working?