WordPress GraphQL with WPGraphQL

What this prompt does

This prompt frames the model as a WPGraphQL expert setting up and tuning a headless [site_type] WordPress site with a [frontend_framework] front end. It runs six stages: installing and configuring WPGraphQL, extending the schema, authentication, performance, the front-end data layer, and the dev/deploy workflow.

Setup wires the endpoint at [graphql_endpoint], enables introspection only in [dev_environments], and sets CORS for [allowed_origins]. Schema work registers [custom_type_count] types with their ACF/meta fields and [mutation_count] mutations, plus connections like [relationship_example]. The performance stage is where it earns its keep: persisted queries via [persisted_query_approach], N+1 hunting on [complex_query], a complexity cap of [max_complexity] and depth limit of [max_depth], and Smart Cache on [cache_backend].

The front-end and workflow stages close the loop between WordPress and [frontend_framework]. The data layer sets up [graphql_client] with [query_count] typed hooks for the common queries, ISR with a [revalidation_interval] revalidation, and a preview mode that fetches draft content through authenticated queries. A codegen pipeline using [codegen_tool] generates TypeScript types from the schema and re-runs whenever the schema changes, so the front end never drifts from the API. Pairing that with N+1 fixes and complexity limits is what keeps a headless setup both fast and type-safe in production.

When to use it

• You are building a headless WordPress site with a [frontend_framework] front end.
• You need custom types and ACF fields exposed as typed GraphQL fields.
• You require authentication via [auth_method] for user-specific queries and mutations.
• Your GraphQL endpoint is slow and you suspect N+1 queries.
• You want persisted queries to lock down production against arbitrary requests.
• You want a codegen pipeline keeping [frontend_framework] types in sync with the schema.

Example output

Expect a configuration-and-code plan: WPGraphQL setup with introspection gated to [dev_environments] and CORS for [allowed_origins], schema extensions registering [custom_type_count] types and [mutation_count] mutations with a connection like [relationship_example], an auth setup using [auth_method] with [token_expiry] tokens, performance work applying [persisted_query_approach], a [max_complexity]/[max_depth] guard, and Smart Cache on [cache_backend], plus [query_count] typed hooks in [frontend_framework] and a [codegen_tool] pipeline.

Pro tips

• Disable introspection outside [dev_environments] so production does not expose the full schema.
• Cap [max_complexity] and [max_depth] deliberately; without them a single nested query can hammer the database.
• Profile [complex_query] with the debug extension before optimizing, so you fix real N+1s not imagined ones.
• Lock production to persisted queries via [persisted_query_approach] rather than accepting arbitrary GraphQL.
• Keep token expiry like [token_expiry] short and pair it with a refresh flow for protected operations.
• Run [codegen_tool] on every schema change so [frontend_framework] types never drift from reality.
• Register custom fields with show_in_graphql and strong types, since loosely typed fields push the cost of guessing onto the front end.
• Set ISR's [revalidation_interval] against how fresh the content needs to be, balancing edge speed against staleness for [query_count] query types.