graphql-codegen-graphism

A GraphQL Codegen plugin that generates a client SDK for the Graphism API.

Installation

Before using this plugin, install the required dependencies.

Step 1: Install GraphQL

yarn add graphql

Step 2: Install GraphQL Codegen and Required Plugins

yarn add -D @graphql-codegen/cli @graphql-codegen/schema-ast @graphql-codegen/typescript

Step 3: Install the Graphism Codegen Plugin

yarn add -D @otion-core/graphql-codegen-graphism

Usage

After installing the required packages, create a codegen.ts configuration file:

import type { CodegenConfig } from '@graphql-codegen/cli'
import { preset } from '@otion-core/graphql-codegen-graphism'

const config: CodegenConfig = {
  schema: 'http://localhost:4000/graphql',
  generates: {
    './src/graphism/schema.graphql': {
      plugins: ['schema-ast']
    },
    './src/graphism/types/api.ts': {
      plugins: ['typescript'],
      config: {
        defaultScalarType: 'unknown'
      }
    },
    './src/graphism/': {
      preset,
      presetConfig: {
        sdkOutputDir: './src/graphism/',
        registerApolloClientPath: '@/apollo'
      },
      plugins: ['@otion-core/graphql-codegen-graphism']
    }
  },
  hooks: { afterOneFileWrite: ['prettier --write'], afterAllFileWrite: ['eslint --fix'] } // Triggers only on generated files
}

export default config

🔹 Note: You can replace ./src/graphism/ with a custom path based on your project structure.

Running Code Generation

To generate the SDK, add the following script to your package.json:

"scripts": {
  "codegen": "rm -rf ./src/graphism/ && yarn graphql-codegen --config codegen.ts"
}

Then, run:

yarn codegen

What This Does:

• Removes any previously generated files in ./src/graphism/.
• Runs GraphQL Codegen with the specified configuration.

Now, your client SDK for the Graphism API is ready to use. 🚀