jovidecroock / blog-portfolio

Hey 👋

let me introduce myself, my name is Jovi, I'd describe myself as a full stack developer. I'm currently employed as a Software Engineer at Stellate.

I'm passionate about Open-source and help maintain several projects

• Preact
• Preact-render-to-string
• Prefresh
• Hoofd
• GraphQLSP
• GQL.tada
• urql

Formerly employed at

• Formidable

Some information about me

• 🔭 I’m currently working on The above OSS projects
• 👯 I’m looking to collaborate on performance-related and GraphQL projects
• 💬 Ask me about front-end frameworks or GraphQL - always open for conversations on Twitter!
• 📫 How to reach me: Twitter Mastodon
• 😄 Pronouns: he/him

blog-portfolio's Issues

Codegen add __typename recipe

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;

Async routes