{"id":186,"date":"2021-05-18T17:31:01","date_gmt":"2021-05-18T23:31:01","guid":{"rendered":"https:\/\/developers.wpengine.com\/blog\/?p=186"},"modified":"2026-02-05T21:02:39","modified_gmt":"2026-02-06T03:02:39","slug":"graphql-code-generator-for-wpgraphql","status":"publish","type":"post","link":"https:\/\/wpengine.com\/builders\/graphql-code-generator-for-wpgraphql\/","title":{"rendered":"GraphQL Code Generator for WPGraphQL"},"content":{"rendered":"\n

When getting started with TypeScript, developers quickly become accustomed to defining their typings. For a React component that’s responsible for rendering a single blog post’s content, you may write something like this:<\/p>\n\n\n

type Avatar = {\n<\/span><\/span>  url<\/span>: string;\n<\/span><\/span>};\n<\/span><\/span>\n<\/span><\/span>type User = {\n<\/span><\/span>  name<\/span>: string;\n<\/span><\/span>  avatar: Avatar;\n<\/span><\/span>};\n<\/span><\/span>\n<\/span><\/span>type Post = {\n<\/span><\/span>  databaseId<\/span>: number;\n<\/span><\/span>  title: string;\n<\/span><\/span>  slug: string;\n<\/span><\/span>  excerpt: string;\n<\/span><\/span>  content: string;\n<\/span><\/span>  author: {\n<\/span><\/span>    node<\/span>: User;\n<\/span><\/span>  }\n<\/span><\/span>};\n<\/span><\/span>\n<\/span><\/span>type Props = {\n<\/span><\/span>  post<\/span>: Post;\n<\/span><\/span>};\n<\/span><\/span>\n<\/span><\/span>export<\/span> default<\/span> function<\/span> BlogPost<\/span>(props: Props<\/span>) <\/span>{\n<\/span><\/span>  const<\/span> { post } = props;\n<\/span><\/span>  return<\/span> (\n<\/span><\/span>    <article<\/span>><\/span><\/span>\n<\/span><\/span>      <h1<\/span>><\/span>{post.title}<\/h1<\/span>><\/span><\/span><\/span>\n<\/span><\/span>      {\/* etc. *\/}<\/span><\/span><\/span><\/span>\n<\/span><\/span>    <\/article<\/span>><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>  );<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>}<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
You can see that the BlogPost<\/code> component accepts an argument with a type of Props<\/code>, which itself uses a type of Post<\/code>. Post<\/code> uses the User<\/code> type, which in turn uses the Avatar<\/code> type. Sure, you may be able to nest some<\/em> of those types inside others to make things a bit more concise, but you still end up with quite a few type definitions. While this code works fine, you may find that it is time-consuming to create all the types for your project manually.<\/p>\n\n\n\n
If your project sources its data from a GraphQL API, you may look at the GraphQL schema and think:<\/p>\n\n\n\n
“Wait…since my GraphQL schema is strongly typed, can’t I just leverage those same types in my TypeScript code instead of reinventing the wheel?”<\/p><\/blockquote>\n\n\n\n
You, my astute friend, are in luck! That is indeed possible using GraphQL Code Generator<\/a>, a.k.a. “GraphQL Codegen.” This free, open-source tool can use your GraphQL schema to generate TypeScript typings. This image sums it up nicely:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Set Up<\/h2>\n\n\n\n
Let’s learn how you set up GraphQL Codegen in your headless WordPress projects that use WPGraphQL.<\/p>\n\n\n\n
Enable GraphQL Introspection<\/h3>\n\n\n\n
In the WordPress admin sidebar of your local environment, head to GraphQL<\/code> > Settings<\/code>. Make sure the Enable Public Introspection<\/strong> option is checked. This will allow GraphQL Code Generator to run an introspection query against your GraphQL endpoint to get the entire schema.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Initialize GraphQL Code Generator<\/h3>\n\n\n\n
  1. Head over to the GraphQL Code Generator Getting Started documentation page<\/a>. Follow the steps for installing the graphql<\/code> and @graphql-codegen\/cli<\/code> NPM packages.<\/li>
  2. Run npx graphql-codegen init<\/code> (or yarn graphql-codegen init<\/code>) to launch the initialization wizard. Below, we’ll cover what to enter for each prompt.<\/li><\/ol>\n\n\n\n
    What type of application are you building?<\/h4>\n\n\n\n
    Select Angular\/React\/any thing your heart desires.<\/p>\n\n\n\n
    Where is your schema?<\/h4>\n\n\n\n
    Paste in your local WordPress site’s GraphQL endpoint. You can see it on the WPGraphQL settings page here:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Where are your operations and fragments?<\/h4>\n\n\n\n
    Enter the path to where the .graphql<\/code> files containing operations and fragments. Example: src\/**\/<\/em>*.graphql<\/code>. If you don’t have .graphql<\/code> files in your project, just hit enter to go to the next step.<\/p>\n\n\n\n
    Pick plugins<\/h4>\n\n\n\n
    Make sure to check TypeScript (required by other typescript plugins<\/code>. Look if TypeScript Operations (operations and fragments)<\/code> only if you have .graphql<\/code> files containing GraphQL operations and fragments in your project; un-check it, if not. Leave all other options unchecked and hit enter to continue.<\/p>\n\n\n\n
    Where to write the output<\/h4>\n\n\n\n
    Enter generated\/graphql.ts<\/code>. This tells GraphQL Code Generator what file it should write the generated typings.<\/p>\n\n\n\n
    Do you want to generate an introspection file?<\/h4>\n\n\n\n
    Choose “No”.<\/p>\n\n\n\n
    How to name the config file?<\/h4>\n\n\n\n
    Hit enter to accept the default codegen.yml<\/code> filename.<\/p>\n\n\n\n
    What script in package.json should run the codegen?<\/h4>\n\n\n\n
    Enter generate<\/code>.<\/p>\n\n\n\n
    The GraphQL Codegen CLI will: <\/p>\n\n\n\n