Build reliable WPGraphQL queries, visually.

Quick Start

Install and activate WPGraphQL on your WordPress site, then install and activate WP GraphQL Toolkit. Open the Toolkit workspace from WordPress admin and confirm the schema explorer loads.

• Use a staging site while testing new queries.
• Confirm custom post types are configured to show in GraphQL.
• Only expose fields and operations your frontend needs.

Build Your First Query

Choose a root field such as posts, pages, or products. Add arguments, select nested fields, preview the response, then save or export the operation.

query LatestPosts {
  posts(first: 10, where: { status: PUBLISH }) {
    nodes {
      id
      slug
      title
      excerpt
    }
  }
}

Schema Explorer

The explorer reflects the schema currently exposed by your WordPress endpoint. If a type or field is missing, check its WordPress registration and the plugin that exposes it to WPGraphQL.

• ACF fields require a compatible WPGraphQL ACF integration.
• WooCommerce fields require the relevant WPGraphQL WooCommerce extension.
• Multilingual fields depend on the selected multilingual integration.

Authentication

Public queries use the permissions exposed by your GraphQL endpoint. Queries for drafts, private content, mutations, or protected data require an authenticated WordPress user and a supported authentication method.

• Never place administrator credentials or long-lived secrets in browser code.
• Use server-side requests for privileged operations.
• Apply least-privilege WordPress roles and capabilities.

Exporting Queries

Export validated operations as GraphQL documents or code-friendly strings. Keep the query separate from presentation components and regenerate frontend types when your schema changes.

const response = await fetch(process.env.WORDPRESS_GRAPHQL_URL!, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ query: LatestPosts }),
});

Troubleshooting

• Schema not loading: verify the endpoint, WPGraphQL activation, permissions, and server logs.
• Field missing: confirm the field is exposed to GraphQL and clear schema or object caches.
• Preview unauthorized: authenticate with an account that has the required capability.
• Frontend request blocked: configure CORS carefully or proxy through your server.
• Unexpected null values: inspect field resolvers, publication status, and viewer permissions.