Skip to content

Instantly share code, notes, and snippets.

@ericclemmons
Created April 22, 2024 04:41
Show Gist options
  • Save ericclemmons/061f3852c6a2442d327763d9ece8718e to your computer and use it in GitHub Desktop.
Save ericclemmons/061f3852c6a2442d327763d9ece8718e to your computer and use it in GitHub Desktop.
graphql-codgen config for the best fully-typed, client-side GraphQL experience with TypeScript
import type {CodegenConfig} from '@graphql-codegen/cli';
const config: CodegenConfig = {
config: {
namingConvention: {
// Ensure enum values are the same as their name, not a number or camelCased
enumValues: 'keep',
},
},
schema: ['src/**/schema.graphql'],
documents: ['src/components/**/*.tsx'],
generates: {
'./src/gql/generated/': {
config: {
// See: https://the-guild.dev/graphql/scalars/docs/quick-start#graphql-code-generator-integration
// More: https://the-guild.dev/graphql/codegen/plugins/typescript/typescript#scalars
scalars: {
DateTime: 'Date',
EmailAddress: 'string',
PhoneNumber: 'string',
ReactElement: 'React.ReactElement',
},
},
preset: 'client',
presetConfig: {
fragmentMasking: {
// Disambiguate with React Hooks – https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#the-usefragment-helper
unmaskFunctionName: 'getFragmentData',
},
},
},
// Nececssary for "rolling up" multiple GraphQL schemas into 1 for the client
'./src/gql/generated/typeDefs.graphql': {
config: {
// commentDescriptions: true,
includeDirectives: true,
// includeIntrospectionTypes: true,
},
plugins: ['schema-ast'],
},
'./src/gql/generated/introspection.ts': {
config: {
includeScalars: true,
includeEnums: true,
includeInputs: true,
includeDirectives: true,
useTypeImports: true,
module: 'es2015',
},
plugins: ['urql-introspection'],
},
'./src/gql/generated/resolvers.types.ts': {
config: {
// If resolvers return a different model type, we have to map it here.
// Otherwise, it's assumed that resolvers return the type defined in the GraphQL schema!
enumValues: {},
mappers: {
ActionItem:
'@my/custom/types#ActionItem',
User: '@my/custom/types#User',
Workflow:
'@my/custom/types#Workflow',
},
useTypeImports: true,
},
plugins: [
// Prevent lint errors for generated code (especially `import-order`)
{add: {content: '/* eslint-disable */'}},
'typescript-resolvers',
],
preset: 'import-types-preset',
presetConfig: {
typesPath: './graphql',
},
},
},
ignoreNoDocuments: true,
};
export default config;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment