T
TanStack•3y ago
fair-rose

Watching changes

Hey guys... I have a query that store some data for filters example: { status: ['a', 'b', 'c'], method: ['d', 'e', 'f'] period: { end: '2023-06-02', start: '2023-06-05', } } On the frontend side has a button to remove these filters, but for the period.. user don't remove, just change the date using a logic to set new start and new end date. for status and method it's working except period now is 2023-06-02.. when the user clicks on this button... changes to "2023-06-05" as today. How to watch these changes (of period) to refetch a new data from api? I used this way 
const { data } = useQuery(['filters-query']);



useEffect(() => {
    console.log('filter', filter);
  }, [filter]);
const { data } = useQuery(['filters-query']);



useEffect(() => {
    console.log('filter', filter);
  }, [filter]);
3 Replies
wise-white
wise-white•3y ago
make filters part of the querykey
fair-rose
fair-roseOP•3y ago
@TkDodo 🔮 but I did ... 
const mutation = useMutation({
    mutationFn: (params: any) =>
      queryClient.setQueryData(['filters-query'], params)
  });
const mutation = useMutation({
    mutationFn: (params: any) =>
      queryClient.setQueryData(['filters-query'], params)
  });
params = status[], method[], period (end and start date) I tried using useMutation... now I can see when the status and method are different (split of array).. but period nop... =/
absent-sapphire
absent-sapphire•3y ago
https://tanstack.com/query/v3/docs/react/guides/query-keys From your example above, it seems that the querykey only contains "filters-query". You can add the filters to it like ['filters-query', filters] or with a subset ['filters-query', startDate, endDate].
Query Keys | TanStack Query Docs
At its core, React Query manages query caching for you based on query keys. Query keys can be as simple as a string, or as complex as an array of many strings and nested objects. As long as the query key is serializable, and unique to the query's data, you can use it! String-Only Query Keys

Did you find this page helpful?