typescript-nhost - Graphql Code Generator

import { PluginApiDocs, PluginHeader } from '@/components/plugin' import { pluginGetStaticProps } from '@/lib/plugin-get-static-props' export const getStaticProps = pluginGetStaticProps(__filename, { hasOperationsNote: true })

This plugin generates the schema for the Typescript Nhost SDK.

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

const config: CodegenConfig = {
  schema: 'http://localhost:4000',
  generates: {
    'src/schema.ts': { plugins: ['typescript-nhost'] }
  }
}
export default config

Usage

Step 1: Generate the schema

First, install GraphQL codegen and the Nhost Typescript plugin:

yarn add -D @graphql-codegen/cli @graphql-codegen/typescript-nhost

Then configure the code generator by adding a codegen.yaml file:

yaml

schema:
  - http://localhost:1337/v1/graphql:
      headers:
        x-hasura-admin-secret: nhost-admin-secret
generates:
  ./src/schema.ts:
    plugins:
      - typescript-nhost

Step 2: Install and configure the Nhost Typescript SDK

yarn add @nhost/nhost-js

import { NhostClient } from '@nhost/nhost-js'
import schema from './schema'

const nhost = new NhostClient({ subdomain: 'localhost', schema })

A GraphQL query named todos will then be accessible through:

const todos = await nhost.graphql.query.todos({ select: { contents: true } })

The todos object will be strongly typed based on the GraphQL schema, and the fields that would have been selected in the query.

Custom scalars

It is possible to customize the scalar types in adapting the configuration file. The following example illustrates how to specify some Hasura scalars. The @graphql-codegen/add plugin is necessary to be able to add the definition of the JSONValue type.

yaml

schema:
  - http://localhost:1337/v1/graphql:
      headers:
        x-hasura-admin-secret: nhost-admin-secret
generates:
  ./src/schema.ts:
    plugins:
      - typescript-nhost
      - add:
          content: 'export type JSONValue = string | number | boolean | { [x: string]: JSONValue } | Array<JSONValue>;'
    config:
      scalars:
        uuid: 'string'
        bigint: 'number'
        citext: 'string'
        timestamptz: 'string'
        json: 'JSONValue'
        jsonb: 'JSONValue'
        bytea: 'string'