What is difference between reset and refetch in react-query?

[jangys]

Hello.
I wonder difference between reset and refetch in react-query.
I use react-query like this.

const {
   data, isFetched
}= useQuery(
    ['queryKey'],
    () => getAPI(),
    {
        enabled: true,
        refetchInterval: 10000,
        refetchOnReconnect: false,
        refetchOnWindowFocus: flase,
        cacheTime: 0,
        retry: false,
    }
);

useEffect(()=> {
    setConvertedDataState(converting(data));
},[data]);

const refreshQuery = async queryClient => {
      await queryClient.resetQueries(['queryKey']);
};

When I use refreshQuery function, then update convertedDataState.
I set refetchInterval 10000. I wait for 10 seconds, but It doesn't update convetedDataState.
(useEffect doesn't detect the data's change)

I know that useEffect's dependency only works in props or state.
But I don't know why when I use resetQueries then useEffect detect the data's change.

What is difference between them?

Thank you.

[TkDodo]

• refetch refetches the query unconditionally
• reset sets the query back to its initial state, then refetches it.

on top of that, you don't want a useEffect here. You want to derive state, not sync it:

const { data } = useQuery(...)
const convertedData = converting(data)

if you want to optimize, wrap the all in useMemo.

[jangys]

Thank you for replying~!
I change it as you said and adjust useMemo for optimizing.
Thanks a lot!