Codegen
PluginsTypeScriptnhost

TypeScript Nhost

Package nameWeekly DownloadsVersionLicenseUpdated
@graphql-codegen/typescript-nhostDownloadsVersionLicenseSep 5th, 2024

Installation

npm i -D @graphql-codegen/typescript-nhost
⚠️

Usage Requirements In order to use this GraphQL Codegen plugin, please make sure that you have GraphQL operations (query / mutation / subscription and fragment) set as documents: … in your codegen.yml.

Without loading your GraphQL operations (query, mutation, subscription and fragment), you won’t see any change in the generated output.

This plugin generates the Typescript schema that enables queries and mutations to be typed in the Nhost SDK.

Config API Reference

scalars

type: ScalarsMap_3

Extends or overrides the built-in scalars and custom GraphQL scalars to a custom type.

Usage Examples

codegen.ts
 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file': {
       // plugins...
       config: {
         scalars: {
           DateTime: 'Date',
           JSON: '{ [key: string]: any }',
         }
       },
     },
   },
 };
 export default config;

This plugin generates the schema for the Typescript Nhost SDK.

codegen.ts
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:

codegen.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
src/main.ts
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.

codegen.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'
oclifoperations