GraphQL

The graphql/ directory contains the GraphQL client, operations, fragments, and generated types that power all data fetching in the storefront. Files are generated based on your configuration (product types, auth type, NextPress, checkout, account pages).

The client uses graphql-request and is configured in client.ts:

import { GraphQLClient } from 'graphql-request';

export function getClient() {
  const endpoint = process.env.GRAPHQL_ENDPOINT;
  if (!endpoint) {
    throw new Error('GRAPHQL_ENDPOINT is not defined');
  }
  return new GraphQLClient(endpoint);
}

export function getClientWithSdk() {
  return getSdk(getClient());
}

getClient() returns a raw GraphQLClient for cases where you need to set custom headers (auth tokens, session tokens). getClientWithSdk() returns the typed SDK generated by codegen for convenient, type-safe queries.

client.ts also exports helper functions that call the Next.js API routes with built-in caching:

When credentialStorageType = cookies, additional helpers are generated:

fragments.graphql defines reusable fragments that are composed across queries and mutations. The fragments adapt based on your configuration:

operations.graphql defines all queries and mutations. Like fragments, operations are conditionally included based on configuration.

common.ts exports utility types derived from the generated GraphQL types:

// Product union type from GetProductQuery
type ProductQueryResult = NonNullable<GetProductQuery['product']>;

// Extract specific product type by __typename
type ProductOf<T extends ProductQueryResult['__typename']> = Extract<ProductQueryResult, Partial<{ __typename: T }>>;

// Specific product result types
type SimpleProductResult = ...;
type VariableProductResult = ...;
type ExternalProductResult = ...;     // if external type enabled
type BundleProductResult = ...;       // if bundle type enabled
type CompositeProductResult = ...;    // if composite type enabled
type GroupedProductResult = ...;      // if grouped type enabled

// Listing product node type
type ProductsQueryNode = ...;

// Session types
type SessionCart = NonNullable<GetSessionQuery['cart']>;
type SessionCustomer = NonNullable<GetSessionQuery['customer']>;

These types are used throughout the storefront components to ensure type safety without importing from the generated file directly.

The codegen configuration file uses @woographql/codegen presets:

import { disableEsLint, defaultPlugins, defaultPluginsConfig } from '@woographql/codegen';

export const Config = {
  schema: [process.env.GRAPHQL_ENDPOINT],
  verbose: true,
  overwrite: true,
  generates: {
    'src/graphql/generated.ts': {
      documents: ['src/graphql/**/*.graphql'],
      plugins: [disableEsLint(), ...defaultPlugins, 'typescript-graphql-request'],
      config: defaultPluginsConfig,
    },
  },
};

The codegen reads your .env for the GRAPHQL_ENDPOINT, introspects the WPGraphQL schema, and generates TypeScript types plus a typed SDK from your .graphql files.

npx woonext codegen

Or with watch mode during development:

npx woonext codegen --watch

The generated generated.ts file should not be edited manually. Modify the .graphql files and re-run codegen to update types.