useQuery - Fetch only on state change

[nanandn]

Is there way to fetch/refetch only if certain states change with useQuery, similar to the dependency list of useEffect? Right now, react-query, I use the React useEffect hook to fetch.

React.useEffect(() => {
fetch().then((res) => {});
}, [props.query]);

Is there a similar pattern that I can use in react-query?

[banagale]

I'm still learning this, but think you would want to declare your queries at the top, then make use of useQuery()'s enabled boolean. That can can be used to create a dependent query like you're after.

Perhaps you could compose the status of enabled based on changes to multiple states?

Feel free to post a sandbox with what you're trying to do.

[nanandn]

Yes, I can use "enabled", but the problem is figuring out if the state or prop changed. Have to implement some custom hook like "usePreviousState" or something like that. The "dependency" mechanism that useEffect uses is much more easier than figuring out if the state changed with react hooks.

[TkDodo]

You can also put your „dynamic“ part in the query key. A query will be re-executed when the query key changes:

useQuery(['posts', post.id], fetchFn)

In this case, when the post id changes, there will be a new query.

[banagale]

@TkDodo do you mean a pattern like this:

const [post, setPost] = useState('');

const {
  isLoading: fetchFnIsLoading,
  data: fetchFnData, isSuccess: fetchFnIsSuccess
} = useQuery(['posts', post.id], fetchFn)

And then make use of fetchFnData.id as the state gets updated?

[TkDodo]

Not totally sure what you mean with

And then make use of fetchFnData.id as the state gets updated?

But generally, yes. If you update post and change the id, the query will re-execute with the new queryKey

[martavis]

useQuery(['posts', post.id], fetchFn)

Bringing more attention to this as of v3.19.x. post.id should be replaced by your state or prop.