WordPress GraphQL Custom Fields — Field Forge + WPGraphQL
Download Log in

GraphQL Schema Generation — WPGraphQL Integration

Field Forge auto-generates GraphQL Schema Definition Language (SDL) for every field group in your WordPress site. Combined with automatic WPGraphQL type registration, your custom fields are queryable via GraphQL with minimal configuration. This turns a notoriously painful headless WordPress workflow into a much shorter setup.

Integration scope note: Native GraphQL resolvers are verified for Field Forge scalar values, structured Group / Repeater / Flexible Content values, and object-backed MediaItem, ContentNode, and TermNode fields. sourceUrl can be null for non-image attachments in WPGraphQL; use mediaItemUrl when you need a stable file URL. user and page_link remain scalar in the current resolver scope.


The WPGraphQL + custom fields problem

WPGraphQL is the GraphQL API layer for WordPress. It exposes posts, pages, taxonomies, and users as a GraphQL schema that a JavaScript frontend can query. It’s excellent — except for one major gap: it doesn’t know about custom fields.

If you want to query custom fields via WPGraphQL, you traditionally have three options:

  1. WPGraphQL for ACF — a separate plugin that reads ACF field definitions and exposes them. Works for ACF and SCF users, but requires manual configuration for complex field groups.
  2. Custom WPGraphQL types — write PHP code to register every custom field type with WPGraphQL manually. Extremely tedious.
  3. Use REST API instead — WordPress’s REST API does expose custom fields, but it’s less efficient than GraphQL for complex queries.

Field Forge’s approach: auto-register WPGraphQL types the moment both plugins are active. Zero code. Zero manual registration. Your custom fields become queryable via GraphQL immediately.


How it works

Step 1: Install Field Forge and WPGraphQL

Both plugins must be active. WPGraphQL is the GraphQL API layer; Field Forge provides the type definitions and resolvers for custom fields.

Step 2: Field Forge detects WPGraphQL on activation

When Field Forge is activated (or WPGraphQL is activated after Field Forge), Field Forge scans your field groups and auto-registers:

  • GraphQL types for each field group (e.g., HeroSectionFields, TeamMemberFields)
  • GraphQL types for nested repeaters, groups, and flexible content layouts
  • Union types for flexible content with multiple layouts
  • Resolvers that fetch field values from Field Forge’s custom table storage

Step 3: Query via WPGraphQL

Your custom fields are immediately queryable:

query GetPage {
  page(id: "home", idType: SLUG) {
    title
    fieldforge {
      heroSection {
        title
        subtitle
        backgroundImage {
          id
          sourceUrl
          altText
          mediaDetails {
            width
            height
          }
        }
        ctaButton {
          text
          url
          openInNewTab
        }
      }
    }
  }
}

The fieldforge key is added to every queryable post type, exposing the custom field groups assigned to that post.


Downloadable GraphQL SDL

Field Forge also lets you download the pure GraphQL Schema Definition Language (SDL) for your field groups. This is useful for:

  • Code generation — tools like GraphQL Code Generator can read the SDL and produce TypeScript types
  • Documentation — publish the schema for your team or API consumers
  • Testing — use the SDL to mock responses in tests
  • Tooling — schema-aware GraphQL IDEs like GraphQL Playground can auto-complete queries

Click Download GraphQL SDL in the Field Forge admin to get a .graphql file:

type HeroSectionFields {
  title: String
  subtitle: String
  backgroundImage: MediaItem
  ctaButton: CtaButtonGroup
}

type CtaButtonGroup {
  text: String
  url: String
  openInNewTab: Boolean
}

type TeamMemberFields {
  name: String
  photo: MediaItem
  bio: String
  skills: [SkillSubField]
}

type SkillSubField {
  skillName: String
  proficiency: Int
}

Nested and complex types

GraphQL handles nested types naturally. Field Forge generates:

Repeater fields → array types

type TeamPage {
  teamMembers: [TeamMemberRow]
}

type TeamMemberRow {
  name: String
  photo: MediaItem
  bio: String
}

Flexible content → union types

type LandingPage {
  pageSections: [PageSectionLayout]
}

union PageSectionLayout = HeroLayout | FeaturesLayout | CTALayout

type HeroLayout {
  title: String
  subtitle: String
  backgroundImage: MediaItem
}

type FeaturesLayout {
  sectionTitle: String
  features: [FeatureItem]
}

type CTALayout {
  headline: String
  button: ButtonGroup
}

Querying union types in GraphQL requires inline fragments:

query GetLandingPage {
  page(id: "home", idType: SLUG) {
    fieldforge {
      pageSections {
        __typename
        ... on HeroLayout {
          title
          subtitle
          backgroundImage { sourceUrl }
        }
        ... on FeaturesLayout {
          sectionTitle
          features {
            title
            description
          }
        }
        ... on CTALayout {
          headline
          button { text url }
        }
      }
    }
  }
}

This is standard GraphQL idiom. The result is a fully-typed array where each item has the right shape for its layout.


Relationship fields → connection types

Relational fields (post object, relationship, taxonomy) resolve to WPGraphQL object types:

type ProductFields {
  relatedProducts: [Post]  # Post type auto-resolved to WPGraphQL's Post type
  author: User             # User type auto-resolved
  category: [Category]     # Taxonomy terms auto-resolved
}

Field Forge resolves post relationships to WPGraphQL ContentNode objects and taxonomy relationships to TermNode objects. Anonymous queries receive null or filtered lists for inaccessible private, draft, or password-protected post objects.

query GetProduct {
  post(id: "product-a") {
    fieldforge {
      productDetails {
        relatedProducts {
          title
          slug
          featuredImage {
            node {
              sourceUrl
            }
          }
        }
      }
    }
  }
}

Works with GraphQL Code Generator

If you use GraphQL Code Generator in your frontend project, Field Forge’s auto-registered GraphQL schema works out of the box. Configure codegen.yml to introspect your WordPress GraphQL endpoint:

schema: https://wp.example.com/graphql
documents: './src/**/*.graphql'
generates:
  ./src/gql/:
    preset: client
    plugins: []

Run graphql-codegen and you get fully-typed GraphQL query hooks for your frontend, with Field Forge types integrated seamlessly.


Field Forge vs WPGraphQL for ACF

WPGraphQL for ACF is a separate plugin developed by the WPGraphQL team that exposes ACF (and SCF) field groups to GraphQL. It works, but it’s a separate plugin to manage and sometimes lags behind ACF updates.

Field Forge bundles GraphQL integration as a core feature. You don’t install a separate plugin. The integration is maintained as part of Field Forge’s release cycle. Scalar, structured, media, post relationship, and taxonomy values are covered natively; user and page_link remain scalar in the current resolver scope.

For sites using ACF + WPGraphQL for ACF, switching to Field Forge means one less plugin and better integration.


Performance

GraphQL queries in a Field Forge + WPGraphQL setup benefit from Field Forge’s custom table storage and object cache integration. A complex query fetching many posts with multiple field groups runs in a few SQL queries, not the hundreds that a naive wp_postmeta-based approach would generate.


Ready for GraphQL custom fields?

Get Field Forge — from $35/year →

GraphQL generation and WPGraphQL integration are in every paid plan.

Forge AI Assistant Online

Hi! I'm the Field Forge AI assistant. Ask me anything about the plugin — setup, features, troubleshooting, or development.

Just now
Powered by Forge AI · Browse docs