@thor-commerce/graphql-codegen-preset

GraphQL Codegen helpers for Thor Commerce Admin and Storefront APIs.

Installation

npm install -D @graphql-codegen/cli graphql @thor-commerce/graphql-codegen-preset

@thor-commerce/graphql-codegen-preset does not ship the graphql-codegen binary. Install @graphql-codegen/cli in the consuming project and run the CLI from that project.

graphql.config.ts

import {
  ApiType,
  ClientType,
  thorCommerceApiProject,
} from "@thor-commerce/graphql-codegen-preset";

export default {
  projects: {
    admin: thorCommerceApiProject({
      apiType: ApiType.Admin,
    }),
    storefront: thorCommerceApiProject({
      apiType: ApiType.Storefront,
      client: ClientType.Apollo,
      outputDir: "./src/storefront/types",
      documents: ["./src/storefront/**/*.{ts,tsx}"],
    }),
  },
};

package.json

{
  "scripts": {
    "graphql-codegen": "graphql-codegen --config graphql.config.ts"
  }
}

Generated files

For each API, the preset generates:

• <api>.schema.json
• <api>.types.d.ts
• <api>.generated.d.ts

Set declarations: false if you want .ts outputs instead of .d.ts.

Schema Fetching

Schema fetching is not tenant-specific. By default the preset reads from:

• https://api.thorcommerce.io/admin/graphql/schema.graphql
• https://api.thorcommerce.io/storefront/graphql/schema.graphql

You only need baseUrl if you want to point codegen at a different environment.

Client Modes

• client: ClientType.Thor is the default and uses the Thor preset output.
• client: ClientType.Apollo generates typescript-operations plus typed-document-node output in <api>.generated.*.

Using With @thor-commerce/graphql-client

If you want to use the generated types with @thor-commerce/graphql-client, prefer client: ClientType.Apollo.

That mode gives you operation result and variable types you can feed into request() or requestOrThrow() on the runtime client:

import {createAdminGraphQLClient} from "@thor-commerce/graphql-client";
import type {
  GetOrdersQuery,
  GetOrdersQueryVariables,
} from "./types/admin.generated";

const client = createAdminGraphQLClient({
  tenant: "demo",
  apiKey: process.env.THOR_ADMIN_API_KEY!,
});

const GET_ORDERS_QUERY = `#graphql
  query GetOrders($first: Int!) {
    orders(first: $first) {
      nodes {
        id
      }
    }
  }
`;

const data = await client.requestOrThrow<
  GetOrdersQuery,
  GetOrdersQueryVariables
>(GET_ORDERS_QUERY, {
  variables: {first: 10},
});