Using graphcache with codegen on Next.JS, am I doing this right?

[liamlows]

Hey y'all,

So as the title states we recently started using graphql for querying some of the data we display on our website and chose to use URQL due its power and small size. We still use REST in some places on our application, and when we do, we use SWR as our client library. SWR has been really great with document caching and worked out of the box with no configuration, but unfortunately graphcache was not the same experience. It does not seem to cache requests and complains about a lot of "invalid key" or "invalid undefined" warnings. So we figured this would be a good place to discuss this and ensure everything looks good.

It's also worth noting we are using graphql codegen with URQL to straight up generate the query hooks. Our codegen.ts file looks like this:

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: `redacted`,
  documents: ['src/graphql/queries/**/*.graphql'],
  ignoreNoDocuments: true, // for better experience with the watcher
  generates: {
    'src/graphql/generated/graphql.ts': {
      plugins: ['typescript', 'typescript-operations', 'typescript-urql', 'urql-introspection'],
    },
  },
  hooks: { afterAllFileWrite: ['prettier --write'] },
};
export default config;

this will generate a graphql.ts which is then where we import all our queries from. We write all of our queries in a .graphql file located under the documents path listed above. Here is an excerpt of a query and fragment from that file:

query SeedElementsByClientId($clientId: String!) {
  seedElementsByClientId(clientId: $clientId) {
    __typename
    ... on Subnet {
      ...SubnetFragment
    }
    ... on Domain {
      ...DomainFragment
    }
    ... on User2 {
      ...User2Fragment
    }
    ... on Netif {
      ...NetifFragment
    }
  }
}

fragment SubnetFragment on Subnet {
  __typename
  ipv4
  prefixLength
  external
  hosts {
    nodes {
      ...HostFragment
    }
    pageInfo {
      ...PageFragment
    }
    totalCount
  }
  ...ElementDocumentFragment
}

Additionally we have a urql provider in our app that takes in the following client configuration:

import { devtoolsExchange } from '@urql/devtools';
import { cacheExchange } from '@urql/exchange-graphcache';
import { refocusExchange } from '@urql/exchange-refocus';
import { retryExchange } from '@urql/exchange-retry';
import { createClient as createWSClient } from 'graphql-ws';
import { Client, fetchExchange, subscriptionExchange } from 'urql';

import schema from '@/graphql/generated/graphql';

const wsClient = createWSClient({
  url: `redacted`,
});

const options = {
  initialDelayMs: 1000,
  maxDelayMs: 15000,
  randomDelay: true,
  maxNumberAttempts: 2,
  // retryIf: (err) => err && err.networkError,
};

const cache = cacheExchange({schema});

export const GraphQLClient = new Client({
  url: `redacted`,
  exchanges: [
    devtoolsExchange,
    cache,
    retryExchange(options),
    refocusExchange(),
    fetchExchange,
    subscriptionExchange({
      forwardSubscription(request) {
        const input = { ...request, query: request.query || '' };
        return {
          subscribe(sink) {
            const unsubscribe = wsClient.subscribe(input, sink);
            return { unsubscribe };
          },
        };
      },
    }),
  ],
});

Now onto the errors...

We managed to get some errors silenced by adding "__typename" to all fragments using in a query and the query itself, that seemed to fix some of the errors but not all, then we added the schema import to the Graphcache provider in the constructor and that removed all except some issues with selection set and id on a createdBy field. Im assuming now that everything should be working.

The part that is making me think I'm doing something wrong is that if i switch tabs and a refocus revalidation occurs, network requests show that a 200 occurred and not a 304. Furthermore, logging the result provided by useQuery shows that in the result object operation.context.meta.cacheOutcome is always a "miss" even though no data changed. Lastly, looking at the cache with URQL dev tools, it seems to be merging all the data types together. Looking at the query above, when i look at it in cache, the data is there but the attributes of every element are on every element of the list in cache, even if that element does not have those attributes. This is not how the data actually looks like when its returned and logged to the console.

Anyway if anyone can help us understand if this looks good or not that would be super appreciated, we just want to make sure we set this up right and using codegen it has been kind of extra complicated. Please dont hesitate to ask for more information if needed either!

Thank you!