setup codegen

pnpm i -D graphql
pnpm i -D @graphql-codegen/cli
pnpm i -D @urql/svelte 
pnpm i -D @types/node
pnpm i -D @graphql-codegen/typescript-operations
pnpm i -D @parcel/watcher

setup codegen

pnpm graphql-codegen init

urql

pnpm i -D @urql/svelte 

codegen.ts

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

export const config: CodegenConfig = {
    overwrite: true,
    schema: 'http://0.0.0.0:5100/graphql',
    documents: 'src/lib/graphql/operations/**/*.ts',
    generates: {
        'src/lib/graphql/generated/graphql.ts': {
            plugins: [
                'typescript',
                'typescript-operations',
            ]
        }
    }
}

export default config

Add script

"codegen": "graphql-codegen --watch --config codegen.ts",

codegen.yml

overwrite: true
schema: "http://localhost:5100/graphql/"
documents: "src/lib/graphql/*.graphql"
generates:
  src/lib/generated/graphql.ts:
    plugins:
      - "typescript"
      - "typescript-operations"

Add script

"codegen": "graphql-codegen --config codegen.yml"

with headers

overwrite: true
schema: 
  - "https://corrffzfsdldzdebeugi.supabase.co/graphql/v1":
      headers: 
        apiKey: "api key here"
documents: "src/lib/graphql/operations/**/*.graphql"
generates:
  src/lib/graphql/types.ts:
    plugins:
      - "typescript"
      - "typescript-operations"

links

CMS-driven IntelliSense in your code editor
CMS-driven IntelliSense in your code editor