Simple GraphQL example using Apollo Client

bookernath · bookernath · commit 508feeb1b00d · 2019-08-13T17:49:52.000-05:00
diff --git a/assets/js/theme/global.js b/assets/js/theme/global.js
@@ -13,6 +13,7 @@ import maintenanceMode from './global/maintenanceMode';
 import carousel from './common/carousel';
 import loadingProgressBar from './global/loading-progress-bar';
 import svgInjector from './global/svg-injector';
+import basicGraphQLQuery from './global/basicGraphQLQuery';
 
 export default class Global extends PageManager {
     onReady() {
@@ -28,5 +29,7 @@ export default class Global extends PageManager {
         maintenanceMode(this.context.maintenanceMode);
         loadingProgressBar();
         svgInjector();
+        /* Inject token into function */
+        basicGraphQLQuery(this.context.storefrontAPIToken);
     }
 }
diff --git a/assets/js/theme/global/basicGraphQLQuery.js b/assets/js/theme/global/basicGraphQLQuery.js
@@ -0,0 +1,55 @@
+import ApolloClient from 'apollo-boost';
+import gql from 'graphql-tag';
+
+
+/**
+ * Run a basic request against the GraphQL Storefront API using Apollo Client and log the results to the browser console
+ */
+export default function (token) {
+    const client = new ApolloClient({
+        headers: { Authorization: `Bearer ${token}` },
+    });
+
+    client.query({
+        query: gql`
+            query MyFirstQuery {
+                site {
+                    settings {
+                        storeName
+                    }
+                    products {
+                        edges {
+                            node {
+                                name
+                                sku
+                                prices {
+                                    retailPrice {
+                                        value
+                                        currencyCode
+                                    }
+                                    price {
+                                        value
+                                        currencyCode
+                                    }
+                                }
+                                defaultImage {
+                                    url(width:1280)
+                                }
+                                options {
+                                    entityId
+                                    displayName
+                                    values {
+                                        entityId
+                                        label
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        `,
+    })
+        .then(data => console.log(data))
+        .catch(error => console.error(error));
+}
diff --git a/package.json b/package.json
@@ -8,9 +8,12 @@
   "dependencies": {
     "@babel/polyfill": "^7.4.4",
     "@bigcommerce/stencil-utils": "^4.2.0",
+    "apollo-boost": "^0.4.4",
     "creditcards": "^3.0.1",
     "easyzoom": "^2.5.2",
     "foundation-sites": "^5.5.3",
+    "graphql": "^14.4.2",
+    "graphql-tag": "^2.10.1",
     "jquery": "^3.4.1",
     "jstree": "vakata/jstree",
     "lazysizes": "5.1.0",
diff --git a/templates/layout/base.html b/templates/layout/base.html
@@ -34,6 +34,8 @@
         {{~inject 'secureBaseUrl' settings.secure_base_url}}
         {{~inject 'cartId' cart_id}}
         {{~inject 'template' template}}
+        {{!-- Inject Storefront API Token into JS context so we can use it in our JavaScript --}}
+        {{~inject 'storefrontAPIToken' settings.storefront_api.token}}
     </head>
     <body>
         <svg data-src="{{cdn 'img/icon-sprite.svg'}}" class="icons-svg-sprite"></svg>

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,7 @@ import maintenanceMode from './global/maintenanceMode';`
`13`	`13`	`import carousel from './common/carousel';`
`14`	`14`	`import loadingProgressBar from './global/loading-progress-bar';`
`15`	`15`	`import svgInjector from './global/svg-injector';`
	`16`	`+import basicGraphQLQuery from './global/basicGraphQLQuery';`
`16`	`17`
`17`	`18`	`export default class Global extends PageManager {`
`18`	`19`	`onReady() {`
`@@ -28,5 +29,7 @@ export default class Global extends PageManager {`
`28`	`29`	`maintenanceMode(this.context.maintenanceMode);`
`29`	`30`	`loadingProgressBar();`
`30`	`31`	`svgInjector();`
	`32`	`+ /* Inject token into function */`
	`33`	`+ basicGraphQLQuery(this.context.storefrontAPIToken);`
`31`	`34`	`}`
`32`	`35`	`}`