The variables in the cache are not identical with SSR.

[negezor]

Intended outcome:

The variables in the cache are identical to those retrieved using SSR.

Actual outcome:

The variables in cache are sorted in a different order. The apollo client does not find the cache and makes new requests. If you look at the ROOT_QUERY cache through the Apollo Client Devtools, there will be two different keys:

// After cache.extract().ROOT_QUERY['...']
teams({"activity":{"include":[],"exclude":[]},"contributor":{"include":[],"exclude":[]},"first":20,"orderBy":{"field":"UPDATED_AT","direction":"DESC"}})

// After hydration in the client
teams({"activity":{"include":[],"exclude":[]},"contributor":{"include":[],"exclude":[]},"first":20,"orderBy":{"field":"UPDATED_AT","direction":"DESC"}})
teams({"activity":{"exclude":[],"include":[]},"contributor":{"exclude":[],"include":[]},"first":20,"orderBy":{"direction":"DESC","field":"UPDATED_AT"}})

const cache = new InMemoryCache({});

if (!isServer) {
  cache.restore(JSON.parse(window.__APOLLO_STATE__));
}

const apolloClient = new ApolloClient({
  link,
  cache,
  ssrMode: isServer,
  ssrForceFetchDelay: 1000,
  connectToDevTools: process.env.NODE_ENV !== 'production'
});

const { result } = useFetchTeamsQuery({
  activity: {
    include: [],
    exclude: []
  },
  contributor: {
    include: [],
    exclude: []
  },
  first: 20,
  orderBy: {
    field: 'UPDATED_AT',
    direction: 'DESC'
  }
});

How to reproduce the issue:

Versions

System:
  OS: Linux 4.19 Arch Linux
Binaries:
  Node: 16.10.0 - /usr/sbin/node
  Yarn: 1.22.11 - /usr/sbin/yarn
  npm: 7.24.0 - /usr/sbin/npm

@apollo/client: 3.4.15
graphql: 15.6.0

[benjamn]

@negezor This is surprising because Apollo Client and InMemoryCache definitely do attempt to serialize field arguments in a stable/sorted way. Do you think you could provide more of a reproduction, or try other @apollo/client versions (like 3.3.21, the last before 3.4.0) to see if this might be a regression? Do you have any keyArgs configuration for the Query.teams field?

[negezor]

I tried to reproduce the error, but I can't reproduce the error. I also tried to install different versions, but the result was the same. I'm not using keyArgs for the Query.teams field.

I am using Nuxt.js (Vue) and @vue/apollo-composable. There is a community module @nuxtjs/apollo, but it does not support Apollo 3. I manually configured Apollo, everything works except for a cache error in SSR. Can the hook library affect the cache result?

[brainkim]

@benjamn This might have to do with the way we serialize variables in our SSR stuff, though if the user is using Vue.js, I’m not sure how relevant that is (https://github.com/apollographql/apollo-client/blob/main/src/react/ssr/RenderPromises.ts#L105).

[negezor]

@brainkim I serialize the cache like this

JSON.stringify(cache.extract());

[bignimbus]

Somehow the linked PR didn't automatically close this so I'll do it manually :) let us know if you need more support here!