How to refetch query to re-hit API Endpoint for new data

[VladRafli]

Hello everyone, I've got some trouble about invalidating or refetching query using React Query.

I have a program using React app as my front end, and Nest JS app as my back end. The feature I do here is fetch random question from server every question form is submitted.

My server is implementing caching but on testing with postman, the randomness of questions are not affected. Even tries to disable the caching seems not change anything.

To ensure the data is always new, I'm implementing useQuery and useMutation like this:

const queryClient = useQueryClient()
const questionNumber = parseInt(
  new URLSearchParams(location.search)
    .get('q') 
  ?? 0
)
const { data } = useQuery({
  queryKey: ['question', { questionNumber }]
  queryFn: () => getRandomQuestion() // => returns axios.get(),
  refetchOnWindowFocus: false,
  refetchOnMount: true,
},
  queryClient
)
const { mutate } = useMutation({
  mutationFn: ({ id, answer }: { id: number; answer: string }) =>
      postAnswerService(res?.data.data.id, answer),
  onSuccess: () => {
    queryClient.invalidateQueries({
      queryKey: ['question']
    })
    navigate(
      {
        pathname: '/test',
        search: `?q=${questionNumber + 1}`,
      },
      {
        replace: true,
      }
  },
})
const formik = useFormik({
  // initial values...
  onSubmit: (values) => {
    mutate(values)
  }
})

I declare the QueryClientProvider in root, and QueryClient outside the root component as per documentation.

What happened is when form is submitted, the data from useQuery doesn't change nor re-hit the api, it become severe when tries to invalidate manually from react-query-devtools the data not changes on invalidated multiple times.

I've tried staleTime to 0, turn off refetch and retry options but to no avail.

Is it a solution to this? Thank you.

[TkDodo]

the call to invalidateQueries would refetch the current question. So if we are on question5, that would get refetched. Then, the navigate to question6 would change the key, and has the observer look at question6.

with a staleTime of zero, it should just work as you described. I think the invalidation is pretty much unnecessary, but it also doesn't hurt. I can take a look if you can put this in a codesandbox reproduction and it also doesn't work there.

[VladRafli]

When I look again on my backend code and set the cache ttl to 1 miliseconds (basically turn in it off) is pretty much working as expected right now.

When debugging the backend with NestJS implementing sort of caching interceptor, the reason why the breakpoint doesn't hit at the controller the endpoint might be because its returning the cached data.

[VladRafli]

But when I'm navigate to next question using react-router-dom navigate(), seems the useQuery doesn't refetch when questionNumber is changed, i'll try to reproduce it if its just bad code or a bug.

When i'm change the navigate() to useSearchParams() for navigate to next question, seems much working... idk the reason but at least its working right now.

[TkDodo]

ah, it's because your component is not subscribed to url changes:

const questionNumber = parseInt(
  new URLSearchParams(location.search)
    .get('q') 
  ?? 0

this just reads location.search when the component renders, but it's not reactive. If you use a hook like useLocation() or useSearchParam(), you are actually subscribing to the global router state, and your component will re-render when it changes.

So the problem isn't RQ, it's just that in your case, the component didn't re-render at all when you navigate.

[VladRafli]

Ahh yes... after that I found useLocation from react router docs, its seems solved the problem.

[VladRafli]

Since its resolved, the conclusion for this is:

• For dynamic data, make sure to disable cache, both from front-end or back-end. For NestJS using CacheInterceptor, use decorator CacheTTL to 1.
• Rendering by changing url query using react and react-router must using useSearchParams hook and useLocation hook.

Hope it helps someone.