Generating types for client

Pothos does not have a built in mechanism for generating types to use with a client, but graphql-code-generator can be configured to consume a schema directly from your typescript files.

export your schema

The first thing you will need is a file that exports your built schema. The schema should be exported as schema or as the default export. This will be used to generate your client types, but can also be the schema you use in your server.

// schema.ts

// Import the builder
import builder from './builder';

// Import your type definitions
import './types/Query';
import './types/User';
import './types/Posts';

// Build and export the schema
export const schema = builder.toSchema({});

export schema in a js file

To be able to use your schema with graphql-code-generator, it will need to exported from a javascript file. To do this we can use @boost/module to load the typescript file and re-export it from a js file.

yarn add --dev @boost/module

// build-schema.js
module.exports = require('@boost/module').requireModule(require.resolve('./schema.ts'));

Set up graphql-code-generator

The following set up will generate a schema.graphql file, and apollo client hooks for queries defined in your client ts and tsx files. The specifics of this config file should be updated to match your own needs using docs from graphql-code-generator.

yarn add --dev @graphql-codegen/cli
# Plugins below can be replaced or omitted as needed to match your use case
yarn add --dev @graphql-codegen/schema-ast
yarn add --dev @graphql-codegen/typescript
yarn add --dev @graphql-codegen/typescript-operations
yarn add --dev @graphql-codegen/typescript-react-apollo

# codegen.yml
overwrite: true
errorsOnly: true
schema: build-schema.js
# This should be updated to match your client files
documents: 'client/**/!(*.d).{ts,tsx}'
generates:
  # This will take your schema and print an SDL schema.
  schema.graphql:
    plugins:
      - schema-ast
  # This will contain the generated apollo hooks and schema types needed to make type-safe queries with the apollo client
  __generated__/operations.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo

Generating types

Your types can now be generated using. This can also be added as a script in package.json.

yarn graphql-codegen

Watch mode

To get watch mode to work you will need to make a small change to your build-schema.js file. Watch mode will re-load your build-schema.js, but other modules will still be in the require cache, and not be reloaded. To work around this, we need to remove those files from the cache before importing our schema:

// build-schema.js

// delete cache entries for all files outside of node_modules
Object.keys(require.cache)
  .filter((key) => !key.includes('node_modules'))
  .forEach((key) => {
    delete require.cache[key];
  });

module.exports = require('@boost/module').requireModule(require.resolve('./schema.ts'));

You can now run your graphql codegen in watch mode to update your schema and client types as you edit your code.

yarn graphql-codegen --watch './src/**/*.ts'

App Layout Patterns