{"id":128386,"date":"2019-12-10T17:01:15","date_gmt":"2019-12-10T17:01:15","guid":{"rendered":"https:\/\/javascriptforwp.com\/?p=128386"},"modified":"2019-12-10T17:02:32","modified_gmt":"2019-12-10T17:02:32","slug":"apollo-graphql-wordpress-theme-tutorial","status":"publish","type":"post","link":"https:\/\/javascriptforwp.com\/apollo-graphql-wordpress-theme-tutorial\/","title":{"rendered":"Using Apollo and GraphQL in a WordPress Theme Tutorial"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">In the <a href=\"https:\/\/javascriptforwp.com\/adding-react-to-a-wordpress-theme-tutorial\/\">last part of this series we looked at how to include React in a WordPress Theme<\/a>. In this tutorial we are going to look at how to build on that and setup the WordPress GraphQL plugin and Apollo for making requests for data with our JavaScript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apollo &amp; WPGraphQL vs. REST API &amp; WP Fetch API<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress ships with a REST API.  This is a great and super easy to use with the Fetch API or other AJAX libraries.  I have a <a href=\"https:\/\/javascriptforwp.com\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\/\">nice tutorial and video on how to work with these two<\/a> if you&#8217;re interested.  However, working with REST APIs is falling out of popularity largely because of common necessity for making multiple API calls to get the data you need.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <a href=\"https:\/\/github.com\/wp-graphql\/wp-graphql\">WP GraphQL plugin<\/a> does not ship with WordPress Core, but does add a GraphQL endpoint to WordPress.  GraphQL is the preferred method for getting data mostly due to its ease of use and ability to get with one query what would take multiple queries with a REST API.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Apollo is the go to library for making GraphQL requests so we will bundle that with our theme code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Getting GraphQL Setup in WordPress<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To get setup with GraphQL in WordPress we have to first install the <a href=\"https:\/\/github.com\/wp-graphql\/wp-graphql\">WP GraphQL<\/a> and <a href=\"https:\/\/github.com\/wp-graphql\/wp-graphiql\">WP GraphiQL<\/a> plugins.  The first one will enable the GraphQL server and the second one will give us an interface for making queries and looking through what data is available.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/thepracticaldev.s3.amazonaws.com\/i\/cgcfdoq3xrmkdzoeebu5.png\" alt=\"WP GraphiQL Installed\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This what GraphiQL looks like when it is up and running (with a post request). If this is your first time using WP GraphQL, it is quite exciting to see everything that is available and be able to easily query it all via the Explorer.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Setting Up Apollo in Our Theme<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can see <a href=\"https:\/\/github.com\/zgordon\/twentytwenty-react\">example theme we are using here<\/a>.  We are going to pickup where we left off with the last tutorial.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The first thing we have to do is install Apollo and the related packages.  Run this in the root of your theme:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-bash\" data-line=\"\">npm install apollo-boost @apollo\/react-hooks graphql<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now we are going to setup some new files that let us query some recent posts and display them on the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We are going to add in a <code class=\"\" data-line=\"\">components<\/code> folder with a <code class=\"\" data-line=\"\">posts<\/code> folder and an <code class=\"\" data-line=\"\">index.js<\/code> file inside that.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"\" data-line=\"\">\/build\n\/src\n-- \/components\n   -- \/posts\n      -- index.js\n-- index.js\nfunctions.php\npackage.json\npage-react.php\nstyle.css\nwebpack.config.js<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Inside the main <code class=\"\" data-line=\"\">\/src\/index.js<\/code> file we are going to setup the Apollo client like this:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">const { render } = wp.element;\nimport { ApolloProvider } from &quot;@apollo\/react-hooks&quot;;\n\nconst client = new ApolloClient({\n  uri: &quot;http:\/\/react-dev.local\/graphql&quot;\n});\n\nconst App = () =&gt; {\n  return (\n    &lt;ApolloProvider client={client}&gt;\n      &lt;div&gt;\n        &lt;h1&gt;My First Apollo Theme!&lt;\/h1&gt;\n      &lt;\/div&gt;\n    &lt;\/ApolloProvider&gt;\n  );\n};\nrender(&lt;App \/&gt;, document.getElementById(`react-app`));<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This sets up our Apollo client to ping the GraphQL endpoint on our WordPress site.  You can change that URL to match the URL of your site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then we wrap our code inside the Apollo Provider, which will allow this client to be available to any components we include inside of it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now we can turn to looking at a how to create a Posts component that queries and displays posts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creating a List of WordPress Posts with Apollo<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now open the <code class=\"\" data-line=\"\">\/src\/components\/posts\/index.js<\/code> file.  The first thing we&#8217;re going to do is import the necessary libraries for using React hooks and making GraphQL queries:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">import { useQuery } from &quot;@apollo\/react-hooks&quot;;\nimport { gql } from &quot;apollo-boost&quot;;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Then below that we can write out the query we will use to get our posts:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">const POSTS_QUERY = gql`\n  {\n    posts {\n      nodes {\n        postId\n        title(format: RENDERED)\n      }\n    }\n  }\n`;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This is a pretty straightforward query to get our post titles and IDs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Next we can write our actual Posts component that will make the query, display a loading message, an error message if there is one, and then finally display our posts.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">const Posts = () =&gt; {\n  const { loading, error, data } = useQuery(POSTS_QUERY);\n  const posts = data.posts.nodes;\n\n  if (loading) return &lt;p&gt;Loading Posts...&lt;\/p&gt;;\n  if (error) return &lt;p&gt;Something wrong happened!&lt;\/p&gt;;\n\n  return posts.map(({ postId, title }) =&gt; &lt;h3 key={postId}&gt;{title}&lt;\/h3&gt;);\n};<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This is a pretty simple setup.  Here is what it looks like all together:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">import { useQuery } from &quot;@apollo\/react-hooks&quot;;\nimport { gql } from &quot;apollo-boost&quot;;\n\nconst POSTS_QUERY = gql`\n  {\n    posts {\n      nodes {\n        postId\n        title(format: RENDERED)\n      }\n    }\n  }\n`;\n\nconst Posts = () =&gt; {\n  const { loading, error, data } = useQuery(POSTS_QUERY);\n  const posts = data.posts.nodes;\n\n  if (loading) return &lt;p&gt;Loading Posts...&lt;\/p&gt;;\n  if (error) return &lt;p&gt;Something wrong happened!&lt;\/p&gt;;\n\n  return posts.map(({ postId, title }) =&gt; &lt;h3 key={postId}&gt;{title}&lt;\/h3&gt;);\n};\n\nexport default Posts;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This is everything we need in this component.  Now we can bring it into our <code class=\"\" data-line=\"\">src\/index.js<\/code> file and place it inside the <code class=\"\" data-line=\"\">&lt;ApolloProvider&gt;<\/code> tags.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Rendering Our Posts Component<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Update your <code class=\"\" data-line=\"\">src\/index.js<\/code> file so that it imports the Posts component and then displays it on the page.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">const { render } = wp.element;\nimport ApolloClient from &quot;apollo-boost&quot;;\nimport { ApolloProvider } from &quot;@apollo\/react-hooks&quot;;\nimport Posts from &quot;.\/components\/posts&quot;;\n\nconst client = new ApolloClient({\n  uri: &quot;http:\/\/react-dev.local\/graphql&quot;\n});\n\nconst App = () =&gt; {\n  return (\n    &lt;ApolloProvider client={client}&gt;\n      &lt;div&gt;\n        &lt;Posts \/&gt;\n      &lt;\/div&gt;\n    &lt;\/ApolloProvider&gt;\n  );\n};\nrender(&lt;App \/&gt;, document.getElementById(`react-app`));<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">There we have it!  You now have an Apollo client setup to Query WP GraphQL and make requests for posts.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From here you can modify this as needed to query anything that WP GraphQL gets for you.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Next up in the series we will look at how to extend WP GraphQL as well as make mutations to our data.  To do this we will add a simple reddit style voting feature to our posts.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial we continue with learning how to use React in WordPress themes by configuring WPGraphQL and Apollo.<\/p>\n","protected":false},"author":4,"featured_media":128388,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","footnotes":""},"categories":[808],"tags":[],"class_list":["post-128386","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial"],"acf":[],"featured_image_urls":{"full":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series.png",1024,512,false],"thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-150x150.png",150,150,true],"medium":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-300x150.png",300,150,true],"medium_large":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-768x384.png",768,384,true],"large":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series.png",1024,512,false],"1536x1536":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series.png",1024,512,false],"2048x2048":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series.png",1024,512,false],"course_icon":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-150x150.png",150,150,true],"course_banner":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-500x300.png",500,300,true],"latest-full-width":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series.png",1024,512,false],"latest-grid-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-600x400.png",600,400,true],"latest-grid-thumb-masonry":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-450x225.png",450,225,true],"latest-woo-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-600x300.png",600,300,true],"latest-nav-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-800x280.png",800,280,true],"latest-mega-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-235x160.png",235,160,true],"latest-fixed-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-65x65.png",65,65,true],"latest-hero":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series.png",1024,512,false],"latest-single":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series.png",1024,512,false],"latest-hero-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-50x50.png",50,50,true],"latest-logo":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-400x200.png",400,200,true],"woocommerce_thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-300x300.png",300,300,true],"woocommerce_single":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-600x300.png",600,300,true],"woocommerce_gallery_thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-100x100.png",100,100,true]},"post_excerpt_stackable":"<p>In this tutorial we continue with learning how to use React in WordPress themes by configuring WPGraphQL and Apollo.<\/p>\n","category_list":"<a href=\"https:\/\/javascriptforwp.com\/category\/tutorial\/\" rel=\"category tag\">Tutorial<\/a>","author_info":{"name":"Zac Gordon","url":"https:\/\/javascriptforwp.com\/author\/zgordon\/"},"comments_num":"0 comments","featured_image_urls_v2":{"full":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series.png",1024,512,false],"thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-150x150.png",150,150,true],"medium":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-300x150.png",300,150,true],"medium_large":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-768x384.png",768,384,true],"large":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series.png",1024,512,false],"1536x1536":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series.png",1024,512,false],"2048x2048":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series.png",1024,512,false],"course_icon":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-150x150.png",150,150,true],"course_banner":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-500x300.png",500,300,true],"latest-full-width":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series.png",1024,512,false],"latest-grid-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-600x400.png",600,400,true],"latest-grid-thumb-masonry":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-450x225.png",450,225,true],"latest-woo-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-600x300.png",600,300,true],"latest-nav-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-800x280.png",800,280,true],"latest-mega-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-235x160.png",235,160,true],"latest-fixed-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-65x65.png",65,65,true],"latest-hero":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series.png",1024,512,false],"latest-single":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series.png",1024,512,false],"latest-hero-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-50x50.png",50,50,true],"latest-logo":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-400x200.png",400,200,true],"woocommerce_thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-300x300.png",300,300,true],"woocommerce_single":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-600x300.png",600,300,true],"woocommerce_gallery_thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series-100x100.png",100,100,true]},"post_excerpt_stackable_v2":"<p>In this tutorial we continue with learning how to use React in WordPress themes by configuring WPGraphQL and Apollo.<\/p>\n","category_list_v2":"<a href=\"https:\/\/javascriptforwp.com\/category\/tutorial\/\" rel=\"category tag\">Tutorial<\/a>","author_info_v2":{"name":"Zac Gordon","url":"https:\/\/javascriptforwp.com\/author\/zgordon\/"},"comments_num_v2":"0 comments","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Using Apollo and GraphQL in a WordPress Theme Tutorial - JavaScript for WordPress<\/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:\/\/javascriptforwp.com\/apollo-graphql-wordpress-theme-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Apollo and GraphQL in a WordPress Theme Tutorial - JavaScript for WordPress\" \/>\n<meta property=\"og:description\" content=\"In this tutorial we continue with learning how to use React in WordPress themes by configuring WPGraphQL and Apollo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/javascriptforwp.com\/apollo-graphql-wordpress-theme-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"JavaScript for WordPress\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-10T17:01:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-12-10T17:02:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Zac Gordon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/zgordon\" \/>\n<meta name=\"twitter:site\" content=\"@zgordon\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Zac Gordon\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/apollo-graphql-wordpress-theme-tutorial\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/apollo-graphql-wordpress-theme-tutorial\\\/\"},\"author\":{\"name\":\"Zac Gordon\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#\\\/schema\\\/person\\\/76dfb19fbd859b4a17428b8b17767b25\"},\"headline\":\"Using Apollo and GraphQL in a WordPress Theme Tutorial\",\"datePublished\":\"2019-12-10T17:01:15+00:00\",\"dateModified\":\"2019-12-10T17:02:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/apollo-graphql-wordpress-theme-tutorial\\\/\"},\"wordCount\":694,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/apollo-graphql-wordpress-theme-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/React-in-WordPress-Series.png\",\"articleSection\":[\"Tutorial\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/javascriptforwp.com\\\/apollo-graphql-wordpress-theme-tutorial\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/apollo-graphql-wordpress-theme-tutorial\\\/\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/apollo-graphql-wordpress-theme-tutorial\\\/\",\"name\":\"Using Apollo and GraphQL in a WordPress Theme Tutorial - JavaScript for WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/apollo-graphql-wordpress-theme-tutorial\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/apollo-graphql-wordpress-theme-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/React-in-WordPress-Series.png\",\"datePublished\":\"2019-12-10T17:01:15+00:00\",\"dateModified\":\"2019-12-10T17:02:32+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/apollo-graphql-wordpress-theme-tutorial\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/javascriptforwp.com\\\/apollo-graphql-wordpress-theme-tutorial\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/apollo-graphql-wordpress-theme-tutorial\\\/#primaryimage\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/React-in-WordPress-Series.png\",\"contentUrl\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/React-in-WordPress-Series.png\",\"width\":1024,\"height\":512,\"caption\":\"Apollo and GraphQL in a WordPress Theme\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/apollo-graphql-wordpress-theme-tutorial\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/javascriptforwp.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Apollo and GraphQL in a WordPress Theme Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#website\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/\",\"name\":\"JavaScript for WordPress\",\"description\":\"Tutorials, Courses, Bootcamps and Conferences\",\"publisher\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/javascriptforwp.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#organization\",\"name\":\"JavaScript for WordPress Master Course\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/wapuu-square.png\",\"contentUrl\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/wapuu-square.png\",\"width\":200,\"height\":200,\"caption\":\"JavaScript for WordPress Master Course\"},\"image\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/zgordon\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#\\\/schema\\\/person\\\/76dfb19fbd859b4a17428b8b17767b25\",\"name\":\"Zac Gordon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g\",\"caption\":\"Zac Gordon\"},\"description\":\"Zac Gordon is a professional educator, with a current focus on JavaScript development with and alongside WordPress. Zac has years of experience teaching at high schools, colleges, bootcamps and online learning sites like Treehouse, Udemy and Frontend Masters.\",\"sameAs\":[\"https:\\\/\\\/twitter.com\\\/zgordon\",\"https:\\\/\\\/x.com\\\/https:\\\/\\\/twitter.com\\\/zgordon\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using Apollo and GraphQL in a WordPress Theme Tutorial - JavaScript for WordPress","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:\/\/javascriptforwp.com\/apollo-graphql-wordpress-theme-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"Using Apollo and GraphQL in a WordPress Theme Tutorial - JavaScript for WordPress","og_description":"In this tutorial we continue with learning how to use React in WordPress themes by configuring WPGraphQL and Apollo.","og_url":"https:\/\/javascriptforwp.com\/apollo-graphql-wordpress-theme-tutorial\/","og_site_name":"JavaScript for WordPress","article_published_time":"2019-12-10T17:01:15+00:00","article_modified_time":"2019-12-10T17:02:32+00:00","og_image":[{"width":1024,"height":512,"url":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series.png","type":"image\/png"}],"author":"Zac Gordon","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/zgordon","twitter_site":"@zgordon","twitter_misc":{"Written by":"Zac Gordon","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/javascriptforwp.com\/apollo-graphql-wordpress-theme-tutorial\/#article","isPartOf":{"@id":"https:\/\/javascriptforwp.com\/apollo-graphql-wordpress-theme-tutorial\/"},"author":{"name":"Zac Gordon","@id":"https:\/\/javascriptforwp.com\/#\/schema\/person\/76dfb19fbd859b4a17428b8b17767b25"},"headline":"Using Apollo and GraphQL in a WordPress Theme Tutorial","datePublished":"2019-12-10T17:01:15+00:00","dateModified":"2019-12-10T17:02:32+00:00","mainEntityOfPage":{"@id":"https:\/\/javascriptforwp.com\/apollo-graphql-wordpress-theme-tutorial\/"},"wordCount":694,"commentCount":0,"publisher":{"@id":"https:\/\/javascriptforwp.com\/#organization"},"image":{"@id":"https:\/\/javascriptforwp.com\/apollo-graphql-wordpress-theme-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series.png","articleSection":["Tutorial"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/javascriptforwp.com\/apollo-graphql-wordpress-theme-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/javascriptforwp.com\/apollo-graphql-wordpress-theme-tutorial\/","url":"https:\/\/javascriptforwp.com\/apollo-graphql-wordpress-theme-tutorial\/","name":"Using Apollo and GraphQL in a WordPress Theme Tutorial - JavaScript for WordPress","isPartOf":{"@id":"https:\/\/javascriptforwp.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/javascriptforwp.com\/apollo-graphql-wordpress-theme-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/javascriptforwp.com\/apollo-graphql-wordpress-theme-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series.png","datePublished":"2019-12-10T17:01:15+00:00","dateModified":"2019-12-10T17:02:32+00:00","breadcrumb":{"@id":"https:\/\/javascriptforwp.com\/apollo-graphql-wordpress-theme-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/javascriptforwp.com\/apollo-graphql-wordpress-theme-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/javascriptforwp.com\/apollo-graphql-wordpress-theme-tutorial\/#primaryimage","url":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series.png","contentUrl":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/12\/React-in-WordPress-Series.png","width":1024,"height":512,"caption":"Apollo and GraphQL in a WordPress Theme"},{"@type":"BreadcrumbList","@id":"https:\/\/javascriptforwp.com\/apollo-graphql-wordpress-theme-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascriptforwp.com\/"},{"@type":"ListItem","position":2,"name":"Using Apollo and GraphQL in a WordPress Theme Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/javascriptforwp.com\/#website","url":"https:\/\/javascriptforwp.com\/","name":"JavaScript for WordPress","description":"Tutorials, Courses, Bootcamps and Conferences","publisher":{"@id":"https:\/\/javascriptforwp.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/javascriptforwp.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/javascriptforwp.com\/#organization","name":"JavaScript for WordPress Master Course","url":"https:\/\/javascriptforwp.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/javascriptforwp.com\/#\/schema\/logo\/image\/","url":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2016\/03\/wapuu-square.png","contentUrl":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2016\/03\/wapuu-square.png","width":200,"height":200,"caption":"JavaScript for WordPress Master Course"},"image":{"@id":"https:\/\/javascriptforwp.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/zgordon"]},{"@type":"Person","@id":"https:\/\/javascriptforwp.com\/#\/schema\/person\/76dfb19fbd859b4a17428b8b17767b25","name":"Zac Gordon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g","caption":"Zac Gordon"},"description":"Zac Gordon is a professional educator, with a current focus on JavaScript development with and alongside WordPress. Zac has years of experience teaching at high schools, colleges, bootcamps and online learning sites like Treehouse, Udemy and Frontend Masters.","sameAs":["https:\/\/twitter.com\/zgordon","https:\/\/x.com\/https:\/\/twitter.com\/zgordon"]}]}},"_links":{"self":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/posts\/128386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/comments?post=128386"}],"version-history":[{"count":4,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/posts\/128386\/revisions"}],"predecessor-version":[{"id":128391,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/posts\/128386\/revisions\/128391"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/media\/128388"}],"wp:attachment":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/media?parent=128386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/categories?post=128386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/tags?post=128386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}