useQuery hook not updated after parameter changes

[mickael-h]

I made a query for a piece of data that is constantly being updated server-side, and so it refreshes periodically.

  const [user, setUser] = useRecoilState(userState);
  const {status, data} = useQuery('points', () => getPoints(user.uuid), {
    refetchInterval: 5000,
  });

When user.uuid is updated, the Recoil state re-renders the component, but the useQuery hook is not updated and still uses the old uuid. How do I make the useQuery hook update the function when it changes?

[TkDodo]

react-query will not refetch on every re-render, that would be waaay too much. It will refetch if the key changes, so please put all your "dependencies" for the queryFn into the query key. Your queryFn uses user.uuid, so if you want react-query to refetch whenever the id changes, you have to make it part of the queryKey:

  const [user, setUser] = useRecoilState(userState);
  const {status, data} = useQuery(['points', user.uuid], () => getPoints(user.uuid), {
    refetchInterval: 5000,
  });

[mickael-h]

That worked. Thanks for the help 👍

[shuvo-me]

@TkDodo thanks for your help.