Js-buy-sdk: Unable to call client functions using Nuxt

[FistMeNaruto]

Describe the bug
This is probably not a bug, I'm just not sure how to approach this. I am testing out shopify-buy using Nuxt and I ran into some issues. I have been mostly following react-js-buy-sdk example.

To Reproduce
Here is my (trimmed) setup:

/pages/index.vue

<template>
  <main>
    <h1>{{ shop.name }}</h1>
    <Products :client="client" :products="products" :addVariantToCart="addVariantToCart" />
    <button @click="addVariantToCart">Add test product</button>
  </main>
</template>

<script>
import "isomorphic-fetch";
import shopifyClient from "shopify-buy";
import Products from "~/components/Products.vue";

export default {
  components: {
    Products
  },
  data() {
    return {
      client: {},
      checkout: { lineItems: [] },
      products: [],
      shop: {}
    };
  },
  async asyncData({ env }) {
    const client = await shopifyClient.buildClient({
      storefrontAccessToken: env.shopifyAccessToken,
      domain: env.shopifyDomain
    });

    let checkout = await client.checkout.create();
    let products = await client.product.fetchAll();

    let lineItems = [{ variantId: products[0].variants[0].id, quantity: 5 }];
    let checkoutId = checkout.id;

    client.checkout.addLineItems(checkoutId, lineItems).then(res => {
      console.log(res.lineItems.quantity);
    });

    return {
      client: client,
      checkout: checkout,
      products: products,
      shop: await client.shop.fetchInfo()
    };
  },
  methods: {
    addVariantToCart: function() {
      const lineItemsToAdd = [
        { variantId: this.products[0].variants[0].id, quantity: 5 }
      ];
      const checkoutId = this.checkout.id;

      return this.client.checkout
        .addLineItems(checkoutId, lineItemsToAdd)
        .then(res => {
          this.checkout = res;
          console.log(res.lineItems.quantity);
        });
    }
  }
};
</script>

Clicking on the button gives me this.client.checkout.addLineItems is not a function error. The addLineItems inside asyncData sometimes works and sometimes doesn't.

Expected behavior
I'm not really sure how to approach this, I'm unable to call methods on client when it is stored in data, nor when it is passed to child components as prop. This is most likely not even js-buy-sdk issue, but I hope there is someone more knowlegeble to understand what's wrong.

Environment (please complete the following information):

• OS: Linux
• Browser Chrome
• SDK Version v1.4.0

Additional context
Add any other context about the problem here.

Bug Report Checklist

• [x] I have read and agree to the CODE_OF_CONDUCT.md
• [x] I have read the CONTRIBUTING.md guidelines.
• [x] I have provided a detailed description of the bug, including code samples, and/or network data.
• [x] I have provided information about my development environment, including SDK version.

[minasmart]

is the method async asyncData failing? or just the addVairantToCart method?

I'm not familiar with nuxt, but I'm not sure where this.client is being assigned, and the line const client = await shopifyClient.buildClient({ is fishy, because buildClient is not asynchronous.

[FistMeNaruto]

Thanks for quick response!

Only addVariantToCart method fails, asyncData seems to work correctly. asyncData gets called before loading page components and it is necessary for server-side rendering to work. The return value of it gets merged with the component data, so client is set at asyncData and can be accessed with this.client.

Removing await from shopifyClient.buildClient() didn't help. I made a little example here: https://github.com/FistMeNaruto/nuxt-shop-example

I doubt this is a bug on shopify's end, I'll try contacting Nuxt community. If we resolve this issue, I'd be happy to recreate and open source react-js-buy using nuxt/vue

[FistMeNaruto]

Resolved this by defining shopifyClient in plugins/shopify.js and injecting it into the root Vue instance

import Client from "shopify-buy";

const config = {
  domain: process.env.shopifyDomain,
  storefrontAccessToken: process.env.shopifyAccessToken
};

export default (context, inject) => {
  inject("shopifyClient", Client.buildClient(config));
};

This minimal example can be found here: https://github.com/FistMeNaruto/nuxt-shop-example