Building Composable Commerce with Nuxt, Shopify, and Storyblok Crash Course Part Three
Tags: vue, javascript, webdev, tutorial
Published: 2023-04-03 06:27:40

In this section, we will replace current mocks for both Home Page and Product Page with actual data from the Shopify. To integrate with Apollo, we will be using the official Apollo module for Nuxt.

![Nuxt Apollo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y118cug2a9bvdxdadszk.png)

The installation is very similar to other modules that we have already added to our storefront. Let’s install the module with the following command:

```bash
yarn add -D @nuxtjs/apollo@next
```

Next, let’s add it to the `modules` array in `nuxt.config.ts` file:

```tsx
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss', '@nuxt/image-edge', '@nuxtjs/apollo'],
  ...
})
```

But that is not it yet as we also need to configure Apollo to fetch the data from Shopify. We can do so by registering a new client with a host and by passing a `X-Shopify-Storefront-Access-Token` as a header.

Let’s add the following `apollo` configuration object in our `nuxt.config.ts` file:

```tsx
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  ...
  apollo: {
    clients: {
      default: {
        httpEndpoint: process.env.SHOPIFY_STOREFRONT_HOST,
        httpLinkOptions: {
          headers: {
            'X-Shopify-Storefront-Access-Token': process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN
          },
        }
      }
    },
  },
})
```

Now, we also need to create a `.env` file with these environment variables. For this tutorial, I used the publicly available credentials from Shopify demo playground so no need to worry about them:

```tsx
SHOPIFY_STOREFRONT_HOST=https://graphql.myshopify.com/api/2023-01/graphql.json
SHOPIFY_STOREFRONT_ACCESS_TOKEN=ecdc7f91ed0970e733268535c828fbbe
```

For your project, remember to replace them to fetch the data from your store instead.

### Fetching data from Shopify

As we have already configured our Apollo GraphQL client to work with Shopify, we can now start fetching the actual data from the platform and populate our storefront application with it.

Let’s create a new folder `graphql` and inside of it a new file called `getProductsQuery.ts`. In here, we will write a GraphQL query that will be responsible for fetching the data about our products and will also accept some variables like the number of products or query.

```tsx
export const getProductsQuery = gql`
query Products ($first: Int!, $query: String) {
  products(first: $first, query: $query) {
    edges {
      node {
        id
        images(first: 1) {
          edges {
            node {
              src
            }
          }
        }
        title
        description
        handle
        priceRange {
          maxVariantPrice {
            amount
            currencyCode
          }
        }
      }
    }
  }
}
`
```

In this query, we will be fetching data about products that will be used later on in our Vue component as product title, image, price, etc. Apart from mandatory param of `first` which will be used to determine how many products we want to fetch, we will also add here an optional `query` parameter that will be used later in the Product page to fetch related products. To use it, we will modify the `index.vue` page in a following way:

```tsx
<script setup lang="ts">
import { getProductsQuery } from '../graphql/getProductsQuery';

const variables = { first: 3 }
const { data } = await useAsyncQuery(getProductsQuery, variables)
</script>

<template>
  <div>
    <HeroBanner />
    <div class="flex my-20">
      <ProductCard
        v-for="{ node } in data.products.edges"
        :key="node.id"
        :image="node.images.edges[0].node.src"
        :title="node.title"
        :price="`${node.priceRange.maxVariantPrice.amount} ${node.priceRange.maxVariantPrice.currencyCode}`"
        :link="`products/${node.handle}`"
        :description="node.description"
      />      
    </div>
  </div>
</template>
```

Let’s stop for a second to explain each step individually:

1. We are importing previously created GraphQL query.
2. We are registering a new variable called `variables` where we could pass the amount of products o query.
3. We are calling a `useAsyncQuery` composable that will under the hood send this query to Shopify (with variables as well).
4. We have access to the response from a `data` variable. 
5. We are using the response data in the template to display a list of products (the complexity of nested properties is caused by nesting in Shopify, we cannot do anything about it unfortunately 😞).

If we did everything properly, we should see the following result in the browser:

![Product List](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7lf2eghznymm4f5mnt3.png)

 The images are not yet properly optimized as we need to add them to the `[image.domains](http://image.domains)` array in `nuxt.config.ts`. Let’s do this now:

```tsx
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  ...
  image: {
    domains: ['mdbootstrap.com', 'cdn.shopify.com']
  },
  ..
})
```

Our Home Page looks good so far. Let’s focus right now on the Product Page so that we could navigate from the Home Page and have real data here as well!

In the `graphql` folder, create a new file called `getProductQuery` and add the following code:

```tsx
export const getProductsQuery = gql`
  query Product($handle: String!) {
    productByHandle(handle: $handle) {
      id
      title
      productType
      priceRange {
        maxVariantPrice {
          amount
          currencyCode
        }
      }
      description
      images(first: 1) {
        edges {
          node {
            src
          }
        }
      }
      variants(first: 1) {
        edges {
          node {
            id
          }
        }
      }
    }
  }
`;
```

In here, we are fetching the data about our product that we will display in the Product Page. We will be using handle as the unique identifier for each product. Apart from the regular data, we will be also fetching the variant ID that will be used later on for redirecting to checkout.

Now, let’s use it in the `pages/products/[handle].vue` page to fetch the data about the product after visiting the Product Page with a certain handle:

```tsx
<script setup lang="ts">
import { getProductQuery } from '~~/graphql/getProductQuery';
const route = useRoute()

const { data: product } = await useAsyncQuery(getProductQuery, { handle: route.params.handle })
const price = computed(() => `${product.value.productByHandle.priceRange.maxVariantPrice.amount} ${product.value.productByHandle.priceRange.maxVariantPrice.currencyCode}`)
</script>

<template>
  <section>
    <div class="grid grid-cols-2 items-center px-20">
      <NuxtImg
        :src="product.productByHandle.images.edges[0].node.src"
        class="rounded-lg shadow-lg -rotate-6"
        alt="Product Image"
        format="webp"
      />
      <div class="rounded-lg shadow-lg p-12 backdrop-blur-2xl">
        <h2 class="text-4xl font-bold mb-6">{{ product.productByHandle.title }}</h2>
        <p class="text-gray-500 mb-6">
          {{ product.productByHandle.description }}
        </p>

        <button
          class="px-7 py-3 bg-green-600 text-white font-medium text-sm rounded shadow-md hover:bg-green-700 hover:shadow-lg focus:bg-green-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-green-800 active:shadow-lg transition duration-150 ease-in-out"
        >
          Pay {{ price }}
        </button>
      </div>
    </div>
  </section>
</template>
```

A lot of things have happened here so let’s stop for a second to discuss each meaningful part:

1. Import `getProductQuery` GraphQL query.
2. Utilize `useRoute` composable to get access to route params where our handle lives.
3. Call `useAsyncQuery` composable with `getProductQuery` query and pass handle as variables.
4. Create a helper computed property that will create a price of the product in a form `5 $`
5. Use the data in the template.

If we did everything correctly, we should see the following result in the browser:

![Product Detail Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zsm2ntvjlwnu9duyarg.png)

To not put all the logic in the same time, I decided to split fetching data about the product from fetching data about the related products. Let’s do it right now.

We will add another call to the Shopify to fetch related products (I intentionally removed some of the code so that it will be easier to understand):

```tsx
<script setup lang="ts">
...
import { getProductsQuery } from '~~/graphql/getProductsQuery';
...

const { data: product } = await useAsyncQuery(getProductQuery, { handle: route.params.handle })
...
const { data: related } = await useAsyncQuery(getProductsQuery, { first: 3, query: `product_type:${product.value.productByHandle.productType}`, })
</script>

<template>
  <section>
    ...
    <div class="flex my-20">
      <ProductCard
        v-for="{ node } in related.products.edges"
        :key="node.id"
        :image="node.images.edges[0].node.src"
        :title="node.title"
        :price="`${node.priceRange.maxVariantPrice.amount} ${node.priceRange.maxVariantPrice.currencyCode}`"
        :link="`/products/${node.handle}`"
        :description="node.description"
      />      
    </div>
  </section>
</template>
```

Let’s stop for a second here to explain what was done:

1. Import `getProductsQuery` GraphQL query.
2. Call useAsyncQuery composable where we are passing variables to get first three products and as a query we are passing `product_type:${product.value.productByHandle.productType}` → this is Shopify-specific way of fetching data based on some query conditions.
3. We use the related products data in the template

If we did everything correctly, we should see the following result in the browser:

![Related Products](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8blh0s9888fqb8c92y6s.png)

Uff that was a lot! There is only one thing left to do here in terms of Shopify itself and it is a mutation that will create a Check out session once we click Pay button. Let’s add it now.

We will create a new file in `graphql` folder called `createCheckoutMutation.ts` :

```tsx
export const createCheckoutMutation = gql`
  mutation Checkout($variantId: ID!) {
    checkoutCreate(
      input: { lineItems: { variantId: $variantId, quantity: 1 } }
    ) {
      checkout {
        webUrl
      }
    }
  }
`;
```

As a required parameter we will pass a variantId that we will get from fetching the data about the product in Product Page. As a return value we will get the url of checkout that we will redirect the user to.

Now, let’s use it in the`pages/products/[handle].vue` page

```tsx
<script setup lang="ts">
import { createCheckoutMutation } from '~~/graphql/createCheckoutMutation';
...

const { data: product } = await useAsyncQuery(getProductQuery, { handle: route.params.handle })
...
...

const redirectToPayment = async () => {
  const { data } = await useAsyncQuery(createCheckoutMutation, { variantId: product.value.productByHandle.variants.edges[0].node.id })

  window.location.href = data.value.checkoutCreate.checkout.webUrl
}
</script>

<template>
  <section>
    <div class="grid grid-cols-2 items-center px-20">
        ...
        <button
          @click="redirectToPayment"
          class="px-7 py-3 bg-green-600 text-white font-medium text-sm rounded shadow-md hover:bg-green-700 hover:shadow-lg focus:bg-green-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-green-800 active:shadow-lg transition duration-150 ease-in-out"
        >
          Pay {{ price }}
        </button>
				...
  </section>
</template>
```

Let’s stop for a second here to explain what was done:

1. Import `createCheckoutMutation` GraphQL mutation.
2. Create a new method called `redirectToPayment` . It will send the mutation to Shopify with the parameter of `variantId`.
3. We are redirecting the user to the webUrl returned by the previous GraphQL mutation.

If we did everything correctly, after clicking a `Pay` button, after a while we should be redirected to the Shopify checkout page like the following (the url could be something like [`https://graphql.myshopify.com/checkouts/co/8201a00b239e6d9bd081b0ee9fdaaa38/information`](https://graphql.myshopify.com/checkouts/co/8201a00b239e6d9bd081b0ee9fdaaa38/information):

![Shopify Checkout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gcpdzatxmra1z9lgza8q.png)

It was a lot of stuff but together we have managed to make through it! Now, we will move into Storyblok to see how we can add the dynamic content and also, use the Shopify plugin for Storyblok 🚀