Pitfalls I fell into during Apollo Client 3.0 migration

over 300 files update!

Recently I worked on migrating Apollo Client to 3.0 from 2.6 in our project. There are quite a few updates in Apollo 3.0 so I never underestimated the complexity of upgrading this library, but still, it took a few days to complete the task. Today I want to share about gotchas I encountered during this migration.

Infinite loop with useQuery, useLazyQuery and useMutation

In version 3.0, Apollo Client made major refactoring for a caching mechanism and request handling. It added significant performance improvements(in fact, it’s almost up to 76% with their benchmark) but at the same time, it caused some issues that did not occur before.

One example is this infinite looping of requests. This issue happens because Apollo checks optionsupdate more strictly than the previous version.

In our case, we used to insert uuidto BaseQueryOptionfor a tracking purpose. With this condition, when any fetchPolicy beside cache-first or cache-only is set as an option we ran into this infinite loop.

const operationId = uuidV4(); // Sending id for the logging purpose
const context = { operationId, queryVariablesName };
const { data, ...rest } = useQuery(document, {
    context,
    variables,
});