{"id":7480,"date":"2019-09-29T13:49:15","date_gmt":"2019-09-29T13:49:15","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7480"},"modified":"2019-09-29T14:09:36","modified_gmt":"2019-09-29T14:09:36","slug":"apollo-graphql-client","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/apollo-graphql-client\/","title":{"rendered":"Apollo GraphQL client"},"content":{"rendered":"<p>Based upon our previous implementation(s) of a server it&#8217;s now time to write some client code.<\/p>\n<ul>\n<li>yarn add apollo-client<\/li>\n<li>yarn add apollo-cache-inmemory<\/li>\n<li>yarn add apollo-link-http<\/li>\n<li>yarn add graphql-tag<\/li>\n<li>yarn add isomorphic-fetch<\/li>\n<li>yarn add -D @types\/isomorphic-fetch<\/li>\n<\/ul>\n<p>Now let&#8217;s create a simple script entry (this extends the previous post&#8217;s scripts section)<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\n&quot;scripts&quot;: {\r\n  &quot;build&quot;: &quot;tsc&quot;,\r\n  &quot;client&quot;: &quot;node client.js&quot;\r\n}\r\n<\/pre>\n<p>Now let&#8217;s create the file client.ts which should look like this<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nimport ApolloClient from 'apollo-client';\r\nimport { InMemoryCache } from 'apollo-cache-inmemory';\r\nimport { HttpLink } from 'apollo-link-http';\r\nimport gql from 'graphql-tag';\r\nimport fetch from 'isomorphic-fetch';\r\n\r\nconst cache = new InMemoryCache();\r\nconst link = new HttpLink({\r\n  uri: 'http:\/\/localhost:4000\/',\r\n  fetch: fetch\r\n})\r\n\r\nconst client = new ApolloClient({\r\n  cache,\r\n  link,\r\n});\r\n\r\nclient.query({\r\n  query: gql`\r\n    {\r\n    users {\r\n      firstName\r\n      lastName\r\n    }\r\n  }`\r\n  })\r\n  .then((response: any) =&gt; console.log(response.data.users));\r\n<\/pre>\n<p>The <em>response.data.users<\/em> should now output the array of User objects.<\/p>\n<p>Here&#8217;s an example of a mutation<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nclient.mutate({\r\n  mutation: gql`\r\n    mutation {\r\n      create(user: {\r\n        firstName: &quot;Miner&quot;,\r\n        lastName: &quot;FortyNiner&quot;\r\n      }) {\r\n        firstName\r\n        lastName\r\n      }\r\n    }\r\n  `\r\n}).then((response: any) =&gt; console.log(response.data.create));\r\n<\/pre>\n<p>Note: I had lots of issues around the <em>fetch<\/em> code, with errors such as <em>Invariant Violation:<br \/>\nfetch is not found globally and no fetcher passed, to fix pass a fetch for your environment like<br \/>\nhttps:\/\/www.npmjs.com\/package\/node-fetch.<\/em>. The addition of the <em>isomorphic-fetch<\/em> solved this problem.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Based upon our previous implementation(s) of a server it&#8217;s now time to write some client code. yarn add apollo-client yarn add apollo-cache-inmemory yarn add apollo-link-http yarn add graphql-tag yarn add isomorphic-fetch yarn add -D @types\/isomorphic-fetch Now let&#8217;s create a simple script entry (this extends the previous post&#8217;s scripts section) &quot;scripts&quot;: { &quot;build&quot;: &quot;tsc&quot;, &quot;client&quot;: &quot;node [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[269,189,45,46],"tags":[],"class_list":["post-7480","post","type-post","status-publish","format-standard","hentry","category-apollo","category-graphql","category-javascript","category-typescript"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7480","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7480"}],"version-history":[{"count":3,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7480\/revisions"}],"predecessor-version":[{"id":7483,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7480\/revisions\/7483"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}