Generate a client SDK for your GraphQL API using GraphQL Codegen.
npm i --save-dev buro26-graphql-codegen-client buro26-graphql-codegen-zod @graphql-codegen/cli @graphql-codegen/schema-ast @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typed-document-nodeCreate a codegen.ts file in the root of your project with the following content:
import type {CodegenConfig} from '@graphql-codegen/cli'
const config: CodegenConfig = {
schema: 'http://localhost:1337/graphql',
documents: 'src/lib/strapi/queries/**/!(*.generated).{ts,tsx}',
debug: true,
overwrite: true,
verbose: true,
generates: {
// optional: generate schema types
'./schema.graphql': {
plugins: ['schema-ast']
},
'src/lib/my-api/generated/types.ts': {
plugins: ['typescript', 'typescript-operations', 'typed-document-node'],
config: {
withHooks: false,
maybeValue: 'T | null',
avoidOptionals: false
}
},
'src/lib/my-api/generated/client-factory.ts': {
plugins: ['buro26-graphql-codegen-client'],
config: {
logger: true,
typesImportPath: '@/lib/strapi/generated/types',
schemaImportPath: '@/lib/strapi/generated/schema'
}
},
'src/lib/my-api/generated/schema.ts': {
plugins: ['buro26-graphql-codegen-zod'],
config: {
onlyWithValidation: false,
lazy: true,
zodTypesMap: {
DateTime: 'string',
JSON: 'string',
ID: 'string',
Int: 'number',
Float: 'number',
Long: 'number',
String: 'string',
Boolean: 'boolean',
I18NLocaleCode: 'string'
},
zodSchemasMap: {
DateTime: 'z.string()',
JSON: 'z.any()',
Long: 'z.coerce.number()',
I18NLocaleCode: 'z.string()'
}
}
}
}
}
export default configAdd a script to your package.json to run the codegen:
{
"scripts": {
"codegen": "graphql-codegen"
}
}Run the codegen script:
npm run codegenCreate a client from the generated code:
import {createClient} from '@/lib/my-api/generated/client-factory'
export const client = createClient({
url: process.env.MY_API_URL!,
logging: true
})Import the client and make a request:
import {client} from '@/lib/my-api/client'
const {data} = await client.query.adres.fetch({
authToken: ctx.session?.accessToken,
variables: {
filters: {
id: {
eq: id
}
}
}
})Import the schema and use it to validate data. This is useful for example for form validation, or usage with tRPC.
procedure
.input(
client.query.adres.schema()
)
.query(async ({input, ctx}) => {
const {data} = await client.query.adres.fetch({
authToken: ctx.session?.accessToken,
variables: input
})
return data?.adressen?.data[0] ?? null
})To run tests, run the following command:
bun testWish to contribute to this project? Pull the project from the repository and create a merge request.
Buro26 - https://buro26.digital
Special thanks to all contributors and the open-source community for their support and contributions.
This project is licensed under the MIT License - see the LICENSE file for details.
The project is currently in active development. We are continuously working on adding new features and improving the existing ones. Check the issues section for the latest updates and planned features.
Feel free to reach out if you have any questions or suggestions!