GiraphQL
Search…
Generating Client Types
GiraphQL 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.
1
// schema.ts
2
3
// Import the builder
4
import builder from './builder';
5
6
// Import your type definitions
7
import './types/Query';
8
import './types/User';
9
import './types/Posts';
10
11
// Build and export the schema
12
export const schema = builder.toSchema({});
Copied!

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.
1
yarn add --dev @boost/module
Copied!
1
// build-schema.js
2
module.exports = require('@boost/module').requireModule(require.resolve('./schema.ts'));
Copied!

Set up graphql-code-generator

The following set up will generate a schema.graphql file, and apollo client hooks for queries defined in your 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.
1
yarn add --dev @graphql-codegen/cli
2
# Plugins below can be replaced or omitted as needed to match your use case
3
yarn add --dev @graphql-codegen/schema-ast
4
yarn add --dev @graphql-codegen/typescript
5
yarn add --dev @graphql-codegen/typescript-operations
6
yarn add --dev @graphql-codegen/typescript-react-apollo
Copied!
1
# codegen.yml
2
overwrite: true
3
errorsOnly: true
4
schema: build-schema.js
5
# This should be updated to match your client files
6
documents: 'client/**/!(*.d).{ts,tsx}'
7
generates:
8
# This will take your schema and print an SDL schema.
9
schema.graphql:
10
plugins:
11
- schema-ast
12
# This will contain the generated apollo hooks and schema types needed to make type-safe queries with the apollo client
13
__generated__/operations.ts:
14
plugins:
15
- typescript
16
- typescript-operations
17
- typescript-react-apollo
Copied!

Generating types

Your types can now be generated using. This can also be added as a script in package.json.
1
yarn graphql-codegen
Copied!

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:
1
// build-schema.js
2
3
// delete cache entries for all files outside of node_modules
4
Object.keys(require.cache)
5
.filter((key) => !key.includes('node_modules'))
6
.forEach((key) => {
7
delete require.cache[key];
8
});
9
10
module.exports = require('@boost/module').requireModule(require.resolve('./schema.ts'));
Copied!
You can now run your graphql codegen in watch mode to update your schema and client types as you edit your code.
1
yarn graphql-codegen --watch './src/**/*.ts'
Copied!
Last modified 3d ago