The behavior of queryFn performed by invalidateQueries and refetch are slightly different.

[ynifamily3]

 const [v, sv] = useState(0);
  const queryClient = useQueryClient();
  const { refetch } = useQuery({
    queryKey: ['__cpcp__'],
    queryFn: () => {
      console.log('external state value', v);
      return 0;
    },
  });


return 
<>
        <Text>{v}</Text>
        <Button onClick={() => sv((_v) => _v - 1)}>-</Button>
        <br />
        <Button onClick={() => sv((_v) => _v + 1)}>+</Button>
        <br />
        <Button
          onClick={() => {
            queryClient.invalidateQueries({ queryKey: ['__cpcp__'] });
          }}
        >
          Trigger invalidate
        </Button>
        <br />
        <Button
          onClick={() => {
            refetch();
          }}
        >
          Trigger refetch
        </Button>
</>

If you change the value of the 'v' count by pressing the button a few times and clicks 'invalidate', the old value will be displayed on the console. 'refetch' prints new value to the console.

I think 'invalidate' is a closure issue because it holds a reference to an old function. Is this the intended behavior? Is there a way to make it look at the new function reference rather than using the old closure value?

[ynifamily3]

#5894

[TkDodo]

your example closes over a value v in the queryFn that isn't part of the queryKey. We have a linter to warn you about that: https://tanstack.com/query/latest/docs/eslint/exhaustive-deps

you need:

  const { refetch } = useQuery({
    queryKey: ['__cpcp__', v],
    queryFn: () => {
      console.log('external state value', v);
      return 0;
    },