Preset Configurations

@woographql/codegen provides three pre-configured setups optimized for common WooGraphQL project patterns.

Generates TypeScript types from your GraphQL schema without any client-specific code.

Best for:

• Projects using a custom GraphQL client
• Server-side code that only needs types
• Shared type packages

Usage:

// codegen.ts
import { TypesCodegenConfig } from '@woographql/codegen';

export default TypesCodegenConfig;

Plugins used:

• typescript - Generates TypeScript types from schema

Generated output example:

/* eslint-disable */
export type Maybe<T> = T | null;
export type Product = {
  __typename?: 'Product';
  id: string;
  databaseId: number;
  name?: Maybe<string>;
  // ...
};

Generates types plus a typed SDK for use with graphql-request.

Best for:

• Projects using graphql-request library
• Server-side data fetching (Next.js RSC, API routes)
• Simple client applications

Usage:

// codegen.ts
import { GraphQLRequestCodegenConfig } from '@woographql/codegen';

export default GraphQLRequestCodegenConfig;

Plugins used:

• typescript - Schema types
• typescript-operations - Operation types
• typescript-graphql-request - Typed SDK

Generated output example:

/* eslint-disable */
export type GetProductsQuery = {
  products?: Maybe<{
    nodes?: Maybe<Array<Maybe<ProductFieldsFragment>>>;
  }>;
};

export function getSdk(client: GraphQLClient) {
  return {
    GetProducts(variables?: GetProductsQueryVariables): Promise<GetProductsQuery> {
      return client.request(GetProductsDocument, variables);
    },
  };
}

Usage in code:

import { GraphQLClient } from 'graphql-request';
import { getSdk } from './graphql/generated';

const client = new GraphQLClient(process.env.GRAPHQL_ENDPOINT);
const sdk = getSdk(client);

const { products } = await sdk.GetProducts({ first: 12 });

Generates types plus React hooks for Apollo Client.

Best for:

• React applications using Apollo Client
• Projects needing SSR support with Apollo
• Real-time subscriptions

Usage:

// codegen.ts
import { ReactApolloCodegenConfig } from '@woographql/codegen';

export default ReactApolloCodegenConfig;

Plugins used:

• typescript - Schema types
• typescript-operations - Operation types
• typescript-react-apollo - React hooks

Configuration options:

• withHooks: true - Generate React hooks
• withResultType: true - Include result types
• skipTypename: false - Keep __typename field
• withHOC: false - No higher-order components
• withComponent: false - No render prop components

Generated output example:

/* eslint-disable */
export function useGetProductsQuery(
  baseOptions?: Apollo.QueryHookOptions<GetProductsQuery, GetProductsQueryVariables>
) {
  return Apollo.useQuery<GetProductsQuery, GetProductsQueryVariables>(
    GetProductsDocument,
    baseOptions
  );
}

export function useGetProductsLazyQuery(
  baseOptions?: Apollo.LazyQueryHookOptions<GetProductsQuery, GetProductsQueryVariables>
) {
  return Apollo.useLazyQuery<GetProductsQuery, GetProductsQueryVariables>(
    GetProductsDocument,
    baseOptions
  );
}

Usage in components:

import { useGetProductsQuery } from './graphql/generated';

function ProductList() {
  const { data, loading, error } = useGetProductsQuery({
    variables: { first: 12 },
  });

  if (loading) return <Loading />;
  if (error) return <Error error={error} />;

  return (
    <ul>
      {data?.products?.nodes?.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

All presets share these default settings:

{
  schema: process.env.GRAPHQL_ENDPOINT,
  verbose: true,
  overwrite: true,
  generates: {
    'graphql/generated.ts': {
      documents: ['graphql/**/*.graphql'],
      config: {
        namingConvention: 'keep',
        allowEnumStringTypes: true,
      },
    },
  },
}

• Custom Configuration - Extending preset configurations
• Utilities - Available helper functions