How can we use TypeScript with Apollo Client graphql codegen with Pothos?

[wakywayne]

I am using nestJS, I want my front end react queries with apollo to be typed out, but no configuration is working. I assume because Pothos actually builds your schema and it itself isn't a schema. My question is how do I make the TypeScript with Apollo Client code gen work?

My entire pothos schema is in my pages/api/index.ts file (I do not yet know how to spread this code out into mutliple files)

I have tried the following configurations:

Apollos recommendation

Link Above

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

const config: CodegenConfig = {
    schema: 'http://localhost:3000/api',
    documents: ['*.ts'],
    generates: {
        './src/__generated__/': {
            preset: 'client',
            plugins: [],
            presetConfig: {
                gqlTagName: 'gql',
            }
        }
    },
    ignoreNoDocuments: true,
};

export default config;

the guilds recomendation

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

const config: CodegenConfig = {
 // ...
 generates: {
 'path/to/file.ts': {
 plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
 config: {
 reactApolloVersion: 3
 }
 }
 }
}
export default config

combination of the two

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

const config: CodegenConfig = {
    schema: 'http://localhost:3000/api',
    documents: ['*.ts'],
    generates: {
        'pages/api/index.ts': {
            plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
            config: {
                reactApolloVersion: 3
            }
        }
    },
    ignoreNoDocuments: true,
};

export default config;

[hayes]

can you provide a little more detail on what is actually failing?

In general there are 3 options for using pothos with graphql-codegen:

1. Load the schema from the running service
   • This looks like what you are trying to do with schema: 'http://localhost:3000/api',
   • This doesn't require anything specific to pothos, but your API needs to have introspection enabled, and be running when you run the code generator
2. Use a generated graphql schema file
   • This is my preferred approach
   • You can write your generated schema by following this guide: https://pothos-graphql.dev/docs/guide/printing-schemas
   • I generally set up a pre-commit hook to print the schema, and always include the generated schemas in my repo
   • This is also very helpful for PR reviews since you can look at exactly how your schema changed
3. export the schema from a typescript file that is directly loaded by graphql-codegen
   • This is slightly trickier and more error prone, it's definitely possible, but requires more setup than I will describe here
   • The basic idea is that graphql-codegen can directly import schemas (returned by builder.toSchema()) if you export this from a file imported by graphql-codegen, this should work.

[hayes]

check out https://github.com/hayes/pothos/tree/main/examples/complex-app

It has a decent structure for how the schema can be split out into multiple files.

A couple of key concepts:

• create a builder.ts that sets up your builder, and creates an empty query and mutation type (builder.queryType({}); builder.mutationType({});). You can also add in scalars here if you want.
• Create separate files for different parts of your schema
  • this could mean having a file per model/type
  • You can also put multiple related things together (multiple types, all your mutations, etc)
• You can use builder.mutationField/mutationFields, builder.queryField, builder.objectField, etc to add fields to existing types
• DON'T create index files that re-export things from other files, this will cause you headaches down the road
  • instead, if you need to import a ref/type or something from another part of the schema, always import it directly from the file that defines i
• create a schema.ts that imports the builder, and then imports all the files that define parts of the schema (eg. import './types/user'), you don't need to import any values, just import the file itself).
• export const schema = builder.toSchema({}) in schema.ts. It's important to not import schema.ts from any of the other files that add things to the schema

[wakywayne]

Thank you so much

[wakywayne]

I am pretty sure this will be my last question... thank you again you are a lifesaver, when you are using the pothos methods does the file automatically return the schema? If not, how does this work in the file:
(https://github.com/hayes/pothos/tree/main/examples/complex-app/src/schema)/index.ts

How does the schema include all of the files?

import './game';
import './player';
import './point';
import './team';
import { builder } from '../builder';

export const schema = builder.toSchema();

[hayes]

The builder is stateful, so every time you call a method on the builder, new types are added to the builder instance. When you import those files, they run, and add types to the builder, then calling toSchema on the builder after the other files are imported will generate a schema with all the types defined in the import files

[wakywayne]

Thank you so much my next pothos project will be beautifully organized!!! I am going to learn Prisma too so I will be typed all over.