Invalidating queries after subscription update

Help
,
1

I have one component that queries for a list of Journeys for the current user with a MyJourneys query. It uses a paginated connection. Sorting is done on the server and is fairly complex.

I also have a subscription to my Journeys that will fire whenever any are added or updated in any way. These changes may affect the sorting, update data about a single journey, or add a journey to the list. The subscription is called with the Journey that was updated.

Because the sorting is complex, I’d rather not have the subscription’s update function update the list of Journeys every time a change is made. My ideal solution for updating the list would be to invalidate all of the MyJourneys queries so that the next time the list is displayed it will remake them. This seems better than proactively refetching all of the relevant queries, but that doesn’t seem to be an option. If I could just reset the cache to make it as if all queries of a given type have never been made that would be great. Am I missing something about how this should work? Thanks!

2

When I wrote this I was hoping that I could have a single place where I subscribe to the Journeys… one thing I’ve found is that if I subscribe in the component that queries for the list then I can do a refetch there and it will behave the way I want it to. Still, it would be great if I could subscribe in a single place, but I can see how this solution would work.

3

What you’re looking for is cache.evict:

useSubscription(subscription, {
    onSubscriptionData: (result) => {
        result.client.cache.evict({
            id: 'ROOT_QUERY',
            fieldName: 'MyJourneys' // assuming that is the name of the root query field
        });
    }
});

This removes the MyJourneys field from the cache, causing a cache miss the next time it is requested and thus a refetch from the server.