Codegen add __typename recipe

[n1ru4l]

Regarding the following:

blog-portfolio/src/pages/posts/persisted-operations/index.mdx

Lines 204 to 206 in 46a9f2d

	A lot of GraphQL clients use `__typename` for their caches, the issue here being that we have to add `__typename` to each
	`SelectionSet` we do in a document (or we add an extra plugin to `graphql-codegen` to do this for us.), otherwise our
	client-side cache could start missbehaving, in Relay this is done for us by the optimising compiler.

It would be nice to add the following tod document it 😇

import { Kind, visit } from 'graphql';
import { Types } from '@graphql-codegen/plugin-helpers';

export const addTypenameDocumentTransform: Types.DocumentTransformObject = {
  transform({ documents }) {
    return documents.map(document => ({
      ...document,
      document: document.document
        ? visit(document.document, {
            SelectionSet(node) {
              if (
                !node.selections.find(
                  selection => selection.kind === 'Field' && selection.name.value === '__typename',
                )
              ) {
                return {
                  ...node,
                  selections: [
                    {
                      kind: Kind.FIELD,
                      name: {
                        kind: Kind.NAME,
                        value: '__typename',
                      },
                    },
                    ...node.selections,
                  ],
                };
              }
            },
          })
        : undefined,
    }));
  },
};

import { addTypenameDocumentTransform } from './configs/graphql-code-generator/add-typename-document-transform.mjs';
import { CodegenConfig } from "@graphql-codegen/cli";

const config: CodegenConfig = {
  schema: "YOUR_GRAPHQL_ENDPOINT",
  documents: ["./**/*.{ts,tsx}"],
  ignoreNoDocuments: true,
  generates: {
    "./gql/": {
      preset: "client",
      plugins: [],
      presetConfig: {
        persistedDocuments: true,
      },
      documentTransforms: [addTypenameDocumentTransform],
    },
  },
};

export default config;

[JoviDeCroock]

Oh awesome, thanks! I will add it in a gist and link to it from that paragraph

[n1ru4l]

We will also add this document transform to the client preset and document it on the codegen website.

[n1ru4l]

dotansimha/graphql-code-generator#9562