Getting Started with @woographql/codegen

Quick setup guide for @woographql/codegen - a streamlined wrapper for GraphQL Code Generator optimized for WooGraphQL projects.

This package is hosted on a private registry. Access requires a valid WooGraphQL Pro license.

Create or update .npmrc in your project root:

registry=https://registry.npmjs.org/
@woographql:registry=https://yeetsquad.net/
//yeetsquad.net/:_authToken="YOUR_LICENSE_KEY"
always-auth=true

Replace YOUR_LICENSE_KEY with your WooGraphQL Pro license key.

npm install @woographql/codegen

Choose the peer dependencies based on your configuration:

For Types Only:

npm install -D @graphql-codegen/add @graphql-codegen/typescript

For GraphQL Request:

npm install -D @graphql-codegen/add @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-graphql-request

For React Apollo:

npm install -D @graphql-codegen/add @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo

For Watch Mode:

npm install -D @parcel/watcher

Create a .env or .env.local file with your GraphQL endpoint:

GRAPHQL_ENDPOINT=https://your-wordpress-site.com/graphql

Create a codegen.ts file in your project root:

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

export default TypesCodegenConfig;

Or for React Apollo:

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

export default ReactApolloCodegenConfig;

Create a graphql/ directory and add your .graphql files:

# graphql/fragments.graphql
fragment ProductFields on Product {
  id
  databaseId
  name
  slug
  type
  ... on SimpleProduct {
    price
    regularPrice
  }
  ... on VariableProduct {
    price
    regularPrice
  }
}

# graphql/operations.graphql
query GetProducts($first: Int = 12) {
  products(first: $first) {
    nodes {
      ...ProductFields
    }
  }
}

Add these scripts to your package.json:

{
  "scripts": {
    "codegen": "woographql-codegen",
    "codegen:watch": "woographql-codegen --watch"
  }
}

npm run codegen

This generates graphql/generated.ts with your TypeScript types.

After setup, your project should look like:

your-project/
├── .env.local          # GRAPHQL_ENDPOINT
├── .npmrc              # Registry configuration
├── codegen.ts          # Codegen configuration
├── graphql/
│   ├── fragments.graphql
│   ├── operations.graphql
│   └── generated.ts    # Generated output
└── package.json

• Preset Configurations - Choose the right configuration for your project
• Custom Configuration - Extend and customize configurations
• Utilities - Available helper functions