There are several places in the app where specific query is refetched after different mutations.
Example:
// Some component
const [setUserLocation, setUserLocationResult] = useMutation(setUserLocationMutation, {
refetchQueries: [{ query: getRecommendationsQuery }],
});
And in my RecommendationsComponent I want to know that this query is loading, but useQuery's loading doesn't update when getRecommendationsQuery is refetched.
const {
data,
loading, // this loading is false all the time except first loading
} = useQuery(getRecommendationsQuery);
I can try put useQuery's refetch to the context and use it everywhere rather than refetchQueries prop, but is there a better way to achieve that without that dirty hack - either make loading work or subscribe to that info using apollo client?
useQuery Hook will call the api only once. You need to call the refetch function to call it again
const {
data,
loading,
refetch: getRecommendations // <- use this function to refetch the data
} = useQuery(getRecommendationsQuery);
This will also update the loading state
I got two answers in github for that question, combined them both and it finally worked:
Pass notifyOnNetworkStatusChange: true to useQuery:
const { data, loading } = useQuery(getRecommendationsQuery, {
notifyOnNetworkStatusChange: true
});
Pass documents, not objects to refetchQueries prop:
// Some component
const [setUserLocation, setUserLocationResult] = useMutation(setUserLocationMutation, {
refetchQueries: [getRecommendationsQuery],
});
When the query is refetched, the data will be updated. You can subscribe to changes in the data object returned from the useQuery hook:
const {
data,
loading,
} = useQuery(getRecommendationsQuery);
useEffect(() => {
console.debug("data has changed!", data]);
}, [data]);