Dependent query best practices

[ad-walker]

I'm curious if there is a preferred method of invalidating dependent queries, as my coworker and I took two different approaches based on our understanding of the documentation.

We have two queries both wrapped in hooks, one called favorites and the other offers. The favorites data is an array of items the user can add or remove from, whereas the offers data is generated by the backend based on the items the user adds to their favorites.

The desired functionality is that when a user adds or removes a favorite, the offers data is refetched.

One approach was to add the favorites.data property as a dependency of the offers query key, with the understanding that if favorites.data changed, the offers query would refetch.

// userOffers.tsx
const {favoritesQuery} = useFavorites();

const offersQuery = useQuery(['offers', favoritesQuery.data], getOffers, {
	enabled:  !!favoritesQuery.data,
});

The other approach was to invalidate the dependent query from the onSuccess handler of the mutation functions in the favorites hook.

// useOffers.tsx
const offersQuery = useQuery(['offers'], getOffers);

// useFavorites.tsx
const addFavorite = useMutation({
	mutationFn: (favorite) =>  addFavorite(favorite),
	onMutate: () => {// Optimistic updating}
	onSuccess: () => {
		//...
		queryClient.invalidateQueries('offers')
	},
});

const removeFavorite = useMutation({
	//...
	onSuccess: () => {
		//...
		queryClient.invalidateQueries('offers')
	},
});

Is either approach more consistent with the React Query paradigm? Is there another route we may both be overlooking? Any help is appreciated.

[meatnordrink]

Though we never got any thoughts on this here, we did get one answer to the same question posted on Discord, from @TkDodo , prominent React Query blog-author, suggesting going with the invalidation approach: