Merge pull request #7 from BKWLD/add-mocking

Add mocks options

README.md

@@ -10,32 +10,43 @@ Shopify Storefront API client and related helpers.
 1. Install with `yarn add @cloak-app/shopify`
 2. Add to `nuxt.config` with `buildModules: ['@cloak-app/shopify']`
 
-
 ### Module Options
 
-- `cloak.shopify:`
-  - `url` - Your public Shopify store URL, for example: https://brand.myshopify.com or https://shop.brand.com.  Defaults to `process.env.SHOPIFY_URL`.
-  - `storefront:`
-    `token` - The Storefront API token of your custom app.  Defaults to `process.env.SHOPIFY_STOREFRONT_TOKEN`.
-    `version` - The [Storefront API version](https://shopify.dev/api/usage/versioning) to use.  Defaults to `unstable` (aka, latest).
+Set these properties within `cloak: { shopify: { ... } }` in the nuxt.config.js:
+
+- `url` - Your public Shopify store URL, for example: https://brand.myshopify.com or https://shop.brand.com.  Defaults to `process.env.SHOPIFY_URL`.
+- `storefront:`
+  - `token` - The Storefront API token of your custom app.  Defaults to `process.env.SHOPIFY_STOREFRONT_TOKEN`.
+  - `version` - The [Storefront API version](https://shopify.dev/api/usage/versioning) to use.  Defaults to `unstable` (aka, latest).
+- `mocks` - An array of objects for use with [`mockAxiosGql`](https://github.com/BKWLD/cloak-utils/blob/main/src/axios.js).
 
 ## Usage
 
-### Inside of Nuxt
+### Inside of Nuxt app
 
 The [`storefront` Nuxt plugin](./plugins/storefront.js) injects `$storefront` globally.  This is an Axios instance with it's `baseUrl` set to `cloak.shopify.endpoint`.  In addition, you can call:
 
-- `$craft.execute({ query, variables })` - Executes a GraphQL request that automatically adds a `site` GraphQL variable with the value from the `cloak.craft.site` value.
+- `$storefront.execute({ query, variables })` - Executes a GraphQL request that automatically adds a `site` GraphQL variable with the value from the `cloak.craft.site` value.
+
+### Inside of Nuxt module
 
+You can use the `makeModuleStorefrontClient()` factory method within a Nuxt module to build a `$storefront` instance.  In a module, we can't use the instance that is injected by the `storefront-client` plugin because that is constructed later in the lifecycle.
+
+```js
+// A Nuxt module
+import { makeModuleStorefrontClient } from '@cloak-app/shopify/factories'
+export default function() {
+  const $storefront = makeModuleStorefrontClient(this)
+}
+```
 
 ### Outside of Nuxt
 
 You can make an instance of the Storefront Axios client when outside of Nuxt (like in a Shopify JS entry point) as follows:
 
 ```js
 import { makeStorefrontClient } from '@cloak-app/shopify/factories'
-import axios from 'axios'
-const storefront = makeStorefrontClient(axios, {
+const storefront = makeStorefrontClient({
   url: process.env.SHOPIFY_URL,
   token: process.env.SHOPIFY_STOREFRONT_TOKEN,
 })

demo/.env.example

@@ -0,0 +1,2 @@
+SHOPIFY_URL=
+SHOPIFY_STOREFRONT_TOKEN=

demo/components/mocks-demo.vue

@@ -0,0 +1,44 @@
+<!-- Demo using mocks -->
+
+<template lang='pug'>
+
+ul.mocks-demo: li(v-for='product in products')
+	| {{ product.title }}
+
+</template>
+
+<!-- ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– -->
+
+<script lang='coffee'>
+import productFragment from '../../queries/fragments/product.gql'
+export default
+
+	data: -> products: []
+
+	fetch: ->
+		{ @products } = await @$storefront.execute query: '''
+			query getSomeProducts {
+				products(first: 5) {
+					edges {
+						node { ...product }
+					}
+				}
+			}
+		''' + productFragment
+
+</script>
+
+<!-- ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– -->
+
+<style lang='stylus' scoped>
+
+.mocks-demo
+	border 1px dashed currentColor
+	padding 1em
+	list-style disc
+
+li
+	margin-left 1em
+	margin-v .25em
+
+</style>

demo/content/demo.md

@@ -1,3 +1,39 @@
 # [@cloak-app/shopify](https://github.com/BKWLD/cloak-shopify)
 
-Check out this [example PDP](/products/clay-plant-pot).
+## PDP Example
+
+Check out this [example PDP](/products/clay-plant-pot) using live data from a demo Shopify store.
+
+## Mocking Example
+
+This is an example of using the `mocks` option to return mocked data.
+
+<mocks-demo></mocks-demo>
+
+```vue
+<template lang='pug'>
+
+ul: li(v-for='product in products')
+  | {{ product.title }}
+
+</template>
+
+<script lang='coffee'>
+import productFragment from '../../queries/fragments/product.gql'
+export default
+
+  data: -> products: []
+
+  fetch: ->
+    { @products } = await @$storefront.execute query: '''
+      query getSomeProducts {
+        products(first: 5) {
+          edges {
+            node { ...product }
+          }
+        }
+      }
+    ''' + productFragment
+
+</script>
+```

demo/nuxt.config.js

@@ -1,3 +1,6 @@
+// Mock stubs
+import someProducts from './stubs/some-products.json'
+
 // Nuxt config
 export default {
 
@@ -21,6 +24,16 @@ export default {
 			siteName: '@cloak-app/shopify demo',
 		},
 
+		// Mock Storefront queries
+		shopify: {
+			mocks: [
+				{
+					query: 'getSomeProducts',
+					response: someProducts,
+				}
+			],
+		},
+
 	},
 
 	// @nuxt/content can't be loaded from module