{"id":21,"date":"2021-01-20T23:06:18","date_gmt":"2021-01-21T05:06:18","guid":{"rendered":"https:\/\/wpdeveloperhub.wpengine.com\/introduction-to-graphql-in-wordpress\/"},"modified":"2024-08-15T13:31:55","modified_gmt":"2024-08-15T18:31:55","slug":"introduction-to-graphql-in-wordpress","status":"publish","type":"post","link":"https:\/\/wpengine.com\/builders\/introduction-to-graphql-in-wordpress\/","title":{"rendered":"Introduction to GraphQL in WordPress"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Introduction to WPGraphQL\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/N7H-a1232ow?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><a href=\"https:\/\/graphql.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">GraphQL<\/a> is an open-source data&nbsp;query&nbsp;and&nbsp;manipulation&nbsp;language for&nbsp;APIs, and a runtime for fulfilling queries with existing data. It has become increasingly popular since Facebook released it in 2015. GraphQL is similar to REST in that it is an API used to retrieve data, but there are some key differences. You can add GraphQL to any WordPress site by using the <a href=\"https:\/\/www.wpgraphql.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">WPGraphQL plugin<\/a>. Go ahead and install it on your site if you want to try out the examples in this post.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">GraphQL Basics<\/h2>\n\n\n\n<p>GraphQL provides a single endpoint to query against which is typically \/graphql. Queries are sent to the endpoint via POST requests. Here&#8217;s a simple query that pulls back all the posts in a WordPress instance:<\/p>\n\n\n<pre class=\"wp-block-code language-json\"><span><code class=\"hljs shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>query {\n<\/span><\/span><span class='shcb-loc'><span>  posts {\n<\/span><\/span><span class='shcb-loc'><span>    nodes {\n<\/span><\/span><span class='shcb-loc'><span>      id\n<\/span><\/span><span class='shcb-loc'><span>      title\n<\/span><\/span><span class='shcb-loc'><span>      slug\n<\/span><\/span><span class='shcb-loc'><span>    }\n<\/span><\/span><span class='shcb-loc'><span>  }\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><\/pre>\n\n\n<p>The result will be a JSON object that looks something like this:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>{\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-attr\">\"data\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attr\">\"posts\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-attr\">\"nodes\"<\/span>: &#91;\n<\/span><\/span><span class='shcb-loc'><span>        {\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-string\">\"cG9zdDozOQ==\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-attr\">\"title\"<\/span>: <span class=\"hljs-string\">\"Another Post\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-attr\">\"slug\"<\/span>: <span class=\"hljs-string\">\"another-post\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        },\n<\/span><\/span><span class='shcb-loc'><span>        {\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-string\">\"cG9zdDox\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-attr\">\"title\"<\/span>: <span class=\"hljs-string\">\"Hello World!\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-attr\">\"slug\"<\/span>: <span class=\"hljs-string\">\"hello-world\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        }\n<\/span><\/span><span class='shcb-loc'><span>      ]\n<\/span><\/span><span class='shcb-loc'><span>    }\n<\/span><\/span><span class='shcb-loc'><span>  }\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>A key tenet of  GraphQL is that it only returns the data you request. This is particularly important when we&#8217;re retrieving data on a mobile device or over a slow connection. The less data we need to transfer, the faster the result!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Testing Queries In GraphiQL<\/h2>\n\n\n\n<p>GraphQL provides an IDE for testing queries and exploring the schema called Graph<em>i<\/em>QL which WPGraphQL makes available on our sites. Once you install the plugin, you&#8217;ll see the WPGraphiQL IDE logo in the top menu bar of the WP Admin interface.<\/p>\n\n\n\n<p>Let&#8217;s explore the interface for GraphiQL. Here&#8217;s what the overall interface looks like when you click the link in the WP Admin menu bar to navigate to it:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"804\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/09\/19-graphiql-ide-view-1024x804.png\" alt=\"GraphiQL\" class=\"wp-image-5578\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/09\/19-graphiql-ide-view-1024x804.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/09\/19-graphiql-ide-view-300x235.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/09\/19-graphiql-ide-view-768x603.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/09\/19-graphiql-ide-view-1536x1206.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/09\/19-graphiql-ide-view.png 1636w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>On the left, you&#8217;ll see a tree navigation that allows you to explore the schema that is exposed via WPGraphQL. You should see some familiar WordPress types like posts, pages, and comments. The middle section of the IDE is where you can write a query to run against the GraphQL server, and the right side of the interface displays the results of your query.<\/p>\n\n\n\n<p>The GraphQL schema allows for relationships between data types. For instance, a WordPress post has an author. There&#8217;s a relationship between posts and users called author. Here&#8217;s a query that pulls back posts with their author:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>query {\n<\/span><\/span><span class='shcb-loc'><span>  posts {\n<\/span><\/span><span class='shcb-loc'><span>    nodes {\n<\/span><\/span><span class='shcb-loc'><span>      id\n<\/span><\/span><span class='shcb-loc'><span>      title\n<\/span><\/span><span class='shcb-loc'><span>      slug\n<\/span><\/span><span class='shcb-loc'><span>      author {\n<\/span><\/span><span class='shcb-loc'><span>        node {\n<\/span><\/span><span class='shcb-loc'><span>          id\n<\/span><\/span><span class='shcb-loc'><span>          name\n<\/span><\/span><span class='shcb-loc'><span>        }\n<\/span><\/span><span class='shcb-loc'><span>      }\n<\/span><\/span><span class='shcb-loc'><span>    }\n<\/span><\/span><span class='shcb-loc'><span>  }\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><\/pre>\n\n\n<p>The result should looks like this:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>{\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-attr\">\"data\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attr\">\"posts\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-attr\">\"nodes\"<\/span>: &#91;\n<\/span><\/span><span class='shcb-loc'><span>        {\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-string\">\"cG9zdDox\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-attr\">\"title\"<\/span>: <span class=\"hljs-string\">\"Hello World!\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-attr\">\"slug\"<\/span>: <span class=\"hljs-string\">\"hello-world\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-attr\">\"author\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>            <span class=\"hljs-attr\">\"node\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>              <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-string\">\"dXNlcjoy\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>              <span class=\"hljs-attr\">\"name\"<\/span>: <span class=\"hljs-string\">\"Matt Landers\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>            }\n<\/span><\/span><span class='shcb-loc'><span>          }\n<\/span><\/span><span class='shcb-loc'><span>        }\n<\/span><\/span><span class='shcb-loc'><span>      ]\n<\/span><\/span><span class='shcb-loc'><span>    }\n<\/span><\/span><span class='shcb-loc'><span>  }\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">GraphQL Relay Specification<\/h2>\n\n\n\n<p>At this point, you may notice something a bit odd in the queries and results. There&#8217;s an extra layer of nesting in node(s). The reason for the extra layers is that WPGraphQL follows the <a rel=\"noreferrer noopener\" href=\"https:\/\/relay.dev\/docs\/en\/graphql-server-specification\" target=\"_blank\">Relay Specification<\/a> for GraphQL. The documentation explains the reason for implementing this specification <a rel=\"noreferrer noopener\" href=\"https:\/\/www.wpgraphql.com\/docs\/connections\/#relay-specification\" target=\"_blank\">here<\/a>. In short, you typically don&#8217;t want to return every item for a type (i.e. post). Imagine a site with hundreds or thousands of blog posts. We don&#8217;t want to return all that data every time. We probably want to allow the user to page through the posts or infinitely scroll. The Relay Spec provides a standard way to get page information for any &#8220;node&#8221; in the schema.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pagination In WPGraphQL<\/h2>\n\n\n\n<p>Let&#8217;s explore how we can paginate our results to limit the number of posts we return. Here&#8217;s an initial query to grab a page of posts with 2 entries. Notice that we pass an argument to posts that says we only want the first 2 posts.<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>{\n<\/span><\/span><span class='shcb-loc'><span>  posts(first: 2) {\n<\/span><\/span><span class='shcb-loc'><span>    pageInfo {\n<\/span><\/span><span class='shcb-loc'><span>      hasNextPage\n<\/span><\/span><span class='shcb-loc'><span>      endCursor\n<\/span><\/span><span class='shcb-loc'><span>    }\n<\/span><\/span><span class='shcb-loc'><span>    nodes {\n<\/span><\/span><span class='shcb-loc'><span>      id\n<\/span><\/span><span class='shcb-loc'><span>      title\n<\/span><\/span><span class='shcb-loc'><span>      slug\n<\/span><\/span><span class='shcb-loc'><span>    }\n<\/span><\/span><span class='shcb-loc'><span>  }\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><\/code><\/span><\/pre>\n\n\n<p>Now, let&#8217;s look at the result and see how we can grab the next page:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>{\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-attr\">\"data\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attr\">\"posts\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-attr\">\"pageInfo\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-attr\">\"hasNextPage\"<\/span>: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-attr\">\"endCursor\"<\/span>: <span class=\"hljs-string\">\"YXJyYXljb25uZWN0aW9uOjM4\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      },\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-attr\">\"nodes\"<\/span>: &#91;\n<\/span><\/span><span class='shcb-loc'><span>        {\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-string\">\"cG9zdDozOQ==\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-attr\">\"title\"<\/span>: <span class=\"hljs-string\">\"Another Nother Post\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-attr\">\"slug\"<\/span>: <span class=\"hljs-string\">\"another-nother-post\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        },\n<\/span><\/span><span class='shcb-loc'><span>        {\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-string\">\"cG9zdDozOA==\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-attr\">\"title\"<\/span>: <span class=\"hljs-string\">\"Another Post\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-attr\">\"slug\"<\/span>: <span class=\"hljs-string\">\"another-post\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        }\n<\/span><\/span><span class='shcb-loc'><span>      ]\n<\/span><\/span><span class='shcb-loc'><span>    }\n<\/span><\/span><span class='shcb-loc'><span>  }\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In our query, we requested the <code>pageInfo<\/code>. We asked if there&#8217;s another page of posts and what the ending cursor is for the current page of posts. Now, we can get the next page of posts by using the ending cursor. Notice that we pass 2 parameters to posts this time saying that we want the first 2 posts after the ending cursor that was provided from the previous query:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>{\n<\/span><\/span><span class='shcb-loc'><span>  posts(first: <span class=\"hljs-number\">2<\/span>, <span class=\"hljs-attr\">after<\/span>: <span class=\"hljs-string\">\"YXJyYXljb25uZWN0aW9uOjM4\"<\/span>) {\n<\/span><\/span><span class='shcb-loc'><span>    pageInfo {\n<\/span><\/span><span class='shcb-loc'><span>      hasNextPage\n<\/span><\/span><span class='shcb-loc'><span>      endCursor\n<\/span><\/span><span class='shcb-loc'><span>    }\n<\/span><\/span><span class='shcb-loc'><span>    nodes {\n<\/span><\/span><span class='shcb-loc'><span>      id\n<\/span><\/span><span class='shcb-loc'><span>      title\n<\/span><\/span><span class='shcb-loc'><span>      slug\n<\/span><\/span><span class='shcb-loc'><span>    }\n<\/span><\/span><span class='shcb-loc'><span>  }\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The query above is going to ask for 2 more posts and indicate that the posts should be after the previous <code>endCursor<\/code>. We end up with a response similar to the following:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>{\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-attr\">\"data\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attr\">\"posts\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-attr\">\"pageInfo\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-attr\">\"hasNextPage\"<\/span>: <span class=\"hljs-literal\">false<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-attr\">\"endCursor\"<\/span>: <span class=\"hljs-string\">\"YXJyYXljb25uZWN0aW9uOjQy\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      },\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-attr\">\"nodes\"<\/span>: &#91;\n<\/span><\/span><span class='shcb-loc'><span>        {\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-string\">\"cG9zdDo0Mg==\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-attr\">\"title\"<\/span>: <span class=\"hljs-string\">\"The last post\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-attr\">\"slug\"<\/span>: <span class=\"hljs-string\">\"the-last-post\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        },\n<\/span><\/span><span class='shcb-loc'><span>        {\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-string\">\"cG9zdDo0MQ==\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-attr\">\"title\"<\/span>: <span class=\"hljs-string\">\"Some other Post\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-attr\">\"slug\"<\/span>: <span class=\"hljs-string\">\"some-other-post\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        }\n<\/span><\/span><span class='shcb-loc'><span>      ]\n<\/span><\/span><span class='shcb-loc'><span>    }\n<\/span><\/span><span class='shcb-loc'><span>  }\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Notice the result above indicates <code>\"hasNextPage\": false<\/code>. This is how WPGraphQL lets us know there are no more posts to fetch.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">GraphQL Versus REST<\/h2>\n\n\n\n<p>If you haven&#8217;t already, read our post on the <a href=\"https:\/\/wpengine.com\/builders\/introduction-to-the-wordpress-rest-api\/\">WordPress REST API<\/a>. That post will walk you through a similar path as this posts only with the REST API. At the end of the day the choice is yours whether to use REST or GraphQL. WPGraphQL, and more broadly GraphQL, is gaining popularity because of its easy integration with frontend clients. There are certainly pros and cons to both, which warrants a separate post! Whatever you decide, hopefully this post helped familiarize you with GraphQL and the WPGraphQL plugin for WordPress.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>GraphQL is an open-source data&nbsp;query&nbsp;and&nbsp;manipulation&nbsp;language for&nbsp;APIs, and a runtime for fulfilling queries with existing data. It has become increasingly popular since Facebook released it in 2015. GraphQL is similar to [&hellip;]<\/p>\n","protected":false},"author":23,"featured_media":35,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"categories":[23],"tags":[],"class_list":["post-21","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-headless"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Introduction to GraphQL in WordPress - Builders<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wpengine.com\/builders\/introduction-to-graphql-in-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introduction to GraphQL in WordPress - Builders\" \/>\n<meta property=\"og:description\" content=\"GraphQL is an open-source data&nbsp;query&nbsp;and&nbsp;manipulation&nbsp;language for&nbsp;APIs, and a runtime for fulfilling queries with existing data. It has become increasingly popular since Facebook released it in 2015. GraphQL is similar to [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/builders\/introduction-to-graphql-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Builders\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-21T05:06:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-15T18:31:55+00:00\" \/>\n<meta name=\"author\" content=\"Matt Landers\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:site\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matt Landers\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/introduction-to-graphql-in-wordpress\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/introduction-to-graphql-in-wordpress\\\/\"},\"author\":{\"name\":\"Matt Landers\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/fa4bfe62d9565dc74f610c5d8b4cba45\"},\"headline\":\"Introduction to GraphQL in WordPress\",\"datePublished\":\"2021-01-21T05:06:18+00:00\",\"dateModified\":\"2024-08-15T18:31:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/introduction-to-graphql-in-wordpress\\\/\"},\"wordCount\":780,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/introduction-to-graphql-in-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"\",\"articleSection\":[\"Headless\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/introduction-to-graphql-in-wordpress\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/introduction-to-graphql-in-wordpress\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/introduction-to-graphql-in-wordpress\\\/\",\"name\":\"Introduction to GraphQL in WordPress - Builders\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/introduction-to-graphql-in-wordpress\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/introduction-to-graphql-in-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2021-01-21T05:06:18+00:00\",\"dateModified\":\"2024-08-15T18:31:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/introduction-to-graphql-in-wordpress\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/introduction-to-graphql-in-wordpress\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/introduction-to-graphql-in-wordpress\\\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/introduction-to-graphql-in-wordpress\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introduction to GraphQL in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"name\":\"Builders\",\"description\":\"Reimagining the way we build with WordPress.\",\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\",\"name\":\"WP Engine\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"width\":348,\"height\":68,\"caption\":\"WP Engine\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/wpebuilders\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCh1WuL54XFb9ZI6m6goFv1g\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/fa4bfe62d9565dc74f610c5d8b4cba45\",\"name\":\"Matt Landers\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a89035ad50a20ca3fe6f9cf661f39e86d54562b1ccfad1544120c86099324e52?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a89035ad50a20ca3fe6f9cf661f39e86d54562b1ccfad1544120c86099324e52?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a89035ad50a20ca3fe6f9cf661f39e86d54562b1ccfad1544120c86099324e52?s=96&d=mm&r=g\",\"caption\":\"Matt Landers\"},\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/author\\\/wpdeveloperhub\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introduction to GraphQL in WordPress - Builders","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wpengine.com\/builders\/introduction-to-graphql-in-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"Introduction to GraphQL in WordPress - Builders","og_description":"GraphQL is an open-source data&nbsp;query&nbsp;and&nbsp;manipulation&nbsp;language for&nbsp;APIs, and a runtime for fulfilling queries with existing data. It has become increasingly popular since Facebook released it in 2015. GraphQL is similar to [&hellip;]","og_url":"https:\/\/wpengine.com\/builders\/introduction-to-graphql-in-wordpress\/","og_site_name":"Builders","article_published_time":"2021-01-21T05:06:18+00:00","article_modified_time":"2024-08-15T18:31:55+00:00","author":"Matt Landers","twitter_card":"summary_large_image","twitter_creator":"@wpebuilders","twitter_site":"@wpebuilders","twitter_misc":{"Written by":"Matt Landers","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wpengine.com\/builders\/introduction-to-graphql-in-wordpress\/#article","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/introduction-to-graphql-in-wordpress\/"},"author":{"name":"Matt Landers","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/fa4bfe62d9565dc74f610c5d8b4cba45"},"headline":"Introduction to GraphQL in WordPress","datePublished":"2021-01-21T05:06:18+00:00","dateModified":"2024-08-15T18:31:55+00:00","mainEntityOfPage":{"@id":"https:\/\/wpengine.com\/builders\/introduction-to-graphql-in-wordpress\/"},"wordCount":780,"commentCount":0,"publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"image":{"@id":"https:\/\/wpengine.com\/builders\/introduction-to-graphql-in-wordpress\/#primaryimage"},"thumbnailUrl":"","articleSection":["Headless"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wpengine.com\/builders\/introduction-to-graphql-in-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wpengine.com\/builders\/introduction-to-graphql-in-wordpress\/","url":"https:\/\/wpengine.com\/builders\/introduction-to-graphql-in-wordpress\/","name":"Introduction to GraphQL in WordPress - Builders","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wpengine.com\/builders\/introduction-to-graphql-in-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/wpengine.com\/builders\/introduction-to-graphql-in-wordpress\/#primaryimage"},"thumbnailUrl":"","datePublished":"2021-01-21T05:06:18+00:00","dateModified":"2024-08-15T18:31:55+00:00","breadcrumb":{"@id":"https:\/\/wpengine.com\/builders\/introduction-to-graphql-in-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/builders\/introduction-to-graphql-in-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/introduction-to-graphql-in-wordpress\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/builders\/introduction-to-graphql-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/builders\/"},{"@type":"ListItem","position":2,"name":"Introduction to GraphQL in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/builders\/#website","url":"https:\/\/wpengine.com\/builders\/","name":"Builders","description":"Reimagining the way we build with WordPress.","publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/builders\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wpengine.com\/builders\/#organization","name":"WP Engine","url":"https:\/\/wpengine.com\/builders\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","width":348,"height":68,"caption":"WP Engine"},"image":{"@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/wpebuilders","https:\/\/www.youtube.com\/channel\/UCh1WuL54XFb9ZI6m6goFv1g"]},{"@type":"Person","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/fa4bfe62d9565dc74f610c5d8b4cba45","name":"Matt Landers","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/a89035ad50a20ca3fe6f9cf661f39e86d54562b1ccfad1544120c86099324e52?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a89035ad50a20ca3fe6f9cf661f39e86d54562b1ccfad1544120c86099324e52?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a89035ad50a20ca3fe6f9cf661f39e86d54562b1ccfad1544120c86099324e52?s=96&d=mm&r=g","caption":"Matt Landers"},"url":"https:\/\/wpengine.com\/builders\/author\/wpdeveloperhub\/"}]}},"_links":{"self":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":0,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/21\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media?parent=21"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/categories?post=21"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/tags?post=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}