How should i refetch with same filters after set state?

[alvinlys]

Hi, I came across with filters when filtering using react query with tables. After i filtered some values for the 1st time, react query does not refetch again with the same value for 2nd time, and i wanted it to refetch because there might be newer data during the state time and yet to display to user at instant.

Please do advise me any method and below is a mock example.

const [id, setId] = useState(1)

const { data } = useQuery({
  queryKey: ['item', id],
  queryFn: () => fetchItem({ id }),
})

<button onClick={() => {
  setId(2) // unable to refetch again after clicked here
}})>Show Item 2</button>

[louis-young]

Hi 👋

If you're setting the ID to the same value as it was previously, and you're leveraging caching, then this won't trigger a refetch.

Is this some form of refresh button from which you want to refresh data? If so, you might want to invalidate that query instead.

[alvinlys]

its a table search button where user can search the filters. Are you saying invalidate is better than refetch?

[louis-young]

Neither is appropriate here then. Changing the query key to a new key that doesn't have an entry cached should run the query function again. If this is not the case, please provide a reproduction.

If you're setting the ID to the same value as it was previously, and you're leveraging caching, then this won't trigger a refetch. If you don't want to cache the results, you should opt out of caching.

[alvinlys]

understand on your advises. Thanks for your help