Merge multiple caches for restoration

We’re looking at micro-frontends with SSR support. Currently each MFE is rendering a part of the page in React, and extracting the data.

Is there a way to extract the InMemoryCache for each MFE, merge them, then create a new single Apollo client on the client using this merged cache?

[jgan42]

As a temporary solution maybe you can try something like this :

const mergeApolloCache = (mainClient: ApolloClient<NormalizedCacheObject>, client: ApolloClient<NormalizedCacheObject>) => {
  const newData = client.cache.extract();

  if (newData) {
    const currentStore: EntityStore = (mainClient.cache as any).data;

    // Extract of cache.replace code without the clear old cache part
    // https://github.com/apollographql/apollo-client/blob/83935e8e1ea2c3eb4a0f10fffbbfb4d51cfc02d2/src/cache/inmemory/entityStore.ts#L335
    const { __META, ...rest } = newData;
    Object.keys(rest).forEach(dataId => {
      currentStore.merge(dataId, rest[dataId] as StoreObject);
    });
    if (__META) {
      __META.extraRootIds.forEach(currentStore.retain, this);
    }
  }
};

I’ve tested a few cases and it seems to work fine.

[jacobp100]

The solution from @jgan42 works well - it’s pretty much using the same code used internally for restoration