How to partially update Apollo client cache after fetching GraphQL query? - reactjs

Question

I have massive query, which looks like this: https://pastebin.com/pMp4iNDc.
I have made also second query, which task would be to fetch only needed fields and update them in apollo cache, the query looks like that:
export const SCHEMA_TELEPORT_GET_FREE_TIME_LEFT = gql(`query GetFreeTimeLeft {
teleport {
enteredZoneData {
timeToFreeTry
positionPrice {
currency
amount
}
}
}
}
`);
So the main idea is that when the second query data is fetched it should update the cache which is coming from the first query.
My plan currently is to pass callback function to timer component, and execute the callback after time become zero.
Example:
const TeleportGrid = () => {
const eventData = useApolloClient().cache.readQuery({query: SCHEMA_TELEPORT_GET_DATA}).teleport;
const [fetchNewTime] = useLazyQuery(SCHEMA_TELEPORT_GET_FREE_TIME_LEFT);
return (
<TimerElement timerId={"counterNextFreeTry"} translation={__('event_teleport_position_time_until_free_try')} time={eventData.enteredZoneData.timeToFreeTry} callback={() => {
return fetchNewTime();
}}
/>
);
}
What I have tried till now ?
Use onComplete option from useLazyQuery and manually do writeQuery to update the cache
Use promise chain after fetchNewTime() and manually do writeQuery to update the cache
I haven't tried the useMutation because in this case we are not really mutating anything we are getting new data and updating cache.
Thanks for any advices in advance !
Have an awesome day <3

Answer 1

I haven't worked with Apollo's cache, but according to the documentation, normalized data should update itself in the cache. In your case, this does not happen.
Try setting fetchPolicy: network-only;
If that doesn't work, try tweaking your cache;
You can also directly use cache.modify in onCompleted() with fetchPolicy: no-cache;
const TeleportGrid = () => {
const {cache} = useApolloClient();
const eventData = cache.readQuery({query: SCHEMA_TELEPORT_GET_DATA}).teleport;
const [fetchNewTime] = useLazyQuery(SCHEMA_TELEPORT_GET_FREE_TIME_LEFT, {
onCompleted: (data) => {
cache.modify(...modify logic)
}
});
return ...;
}
PS. Let me remind you that queries have option pollInterval. Good luck!