Shopify Storefront API and International Pricing (Nuxt + Vuex + Apollo)

[strnr]

After days crawling through documentation I am unable to get past this issue.

I am building a currency toggle which will allow customers to switch between $AUD and $USD currencies in the UI. I am attempting to implement this via Shopify's Storefront API International Pricing GraphQL queries, specifically the @inContext directive.

I'm storing a `countryCode` variable in the Vuex store (which is updated via a toggle in the UI) and passing it into an Apollo Smart Query as a reactive variable in the page component.

I am able to successfully retrieve product data/prices for a certain country on first load but my issue is when updating the `countryCode` Smart Query variable via a Vuex action it has no effect on the Apollo data even though the Vuex data updates as desired. Unfortunately, manual triggering the update with `refetch()` or `setVariables()` has no effect as well. 

So I'm not sure if this issue is directly related to the Shopify Storefront API or a mistake with my Apollo query?

FYI – when updating the reactive variable `productHandle`, the data automatically updates as expected.

Page template (_product.vue)

export default {
  data: () => ({
    productHandle: "bright-stripe-eyeliner",
  }),

  // Get selected country code from Vuex store module
  computed: {
    currentCountryCode() {
      return this.$store.getters["currency/countryCode"];
    },
  },

  // Pass country code to Smart query
  apollo: {
    product: {
      client: "shopify",
      query: ProductByHandle,
      variables: function () {
        return {
          handle: this.productHandle,
          countryCode: this.currentCountryCode,
        };
      },
      update(data) {
        return _get(data, "productByHandle", {});
      },
    },
  },
}

GraphQL query (for context)

query ProductByHandle($handle: String!, $countryCode: CountryCode!) @inContext(country: $countryCode) {
    productByHandle(handle: $handle) {
        id
        title
        handle
        productType
        tags
        description
        descriptionHtml
        availableForSale
        vendor
        images(first: 10) {
            edges {
                node {
                    transformedSrc
                }
            }
        }
        priceRange {
            minVariantPrice{
              amount
              currencyCode
            }
        }
    }
}

Any guidance or help would be greatly appreciated! 

[SBD_]

Hey @strnr 

Would love to dig into this. Any chance you could provide a sample repo?

[strnr]

Hi @SBD_ 

Ok great – thanks for getting back to me.

Could you please email me at sam@studiolathe.com and will add you to the repo?

Thank you,
Sam