Данные интеллектуального запроса Apollo не обновляются при изменении переменной (Shopify Storefront API + Nuxt + Vuex + Apollo + GraphQL)

Question

После нескольких дней просмотра документации я не могу решить эту проблему.

Я создаю переключатель валюты, который позволит клиентам переключаться между валютами в долларах США и австралийскими долларами в пользовательском интерфейсе. Я реализовать это с помощью запросов Shopify Storefront API пытаюсьInternational Pricing GraphQL , в  частности директивы @inContext .

Я сохраняю переменную в хранилище Vuex (которое обновляется с помощью переключателя в пользовательском интерфейсе) и передаю ее в Apollo Smart Query в качестве реактивной переменной в компоненте страницы.

Я могу успешно получить данные о товарах / ценах для определенной страны при первой загрузке, но моя проблема заключается в обновлении countryCode Переменная интеллектуального запроса через действие Vuex не влияет на данные Apollo, даже если данные Vuex обновляются по желанию.

Я не уверен, связана ли эта проблема напрямую с API Shopify Storefront или с ошибкой моего запроса Apollo?

FYI - при обновлении реактивной переменной productHandle, данные автоматически обновляются, как ожидалось.

Шаблон страницы

      export default {
  data: () => ({
    productHandle: "product-name",
  }),

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

  // Pass country code to Smart query variable
  apollo: {
    product: {
      client: "shopify",
      query: ProductByHandle,
      variables: function () {
        return {
          handle: this.productHandle,
          countryCode: this.currentCountryCode, // this should be reactive but doesn't effect query when variable is updated/changes
        };
      },
      update(data) {
        return _get(data, "productByHandle", {});
      },
      deep: true, // has no noticeable effect 
    },
  },
}

Запрос GraphQL (для контекста)

      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
            }
        }
    }
}

Будем очень признательны за любое руководство или помощь!

Answer 1

Я обнаружил, что я должен установитьfetchPolicy: 'no-cache'по запросу Apollo, если я передаю данные компоненту. Если вы используетеproductданные, где происходит запрос Apollo (то есть тот же компонент/страница), вы можете пропуститьfetchPolicyи просто добавьте наблюдателя.

      apollo: {
  product: {
    client: "shopify",
    query: ProductByHandle,
    fetchPolicy: 'no-cache',
    variables: function () {
      return {
        handle: this.productHandle,
        countryCode: this.currentCountryCode
      }
    }
  }
}

Затем я использую наблюдатель и вызываю метод для обновления цены. Например:

      methods: {
  updatePrice(product) {
    this.minPrice = Number(product.node.priceRange.minVariantPrice.amount).toFixed(2),
    this.maxPrice = Number(product.node.priceRange.maxVariantPrice.amount).toFixed(2),
    this.compareAtMinPrice = Number(product.node.compareAtPriceRange.minVariantPrice.amount).toFixed(2),
    this.compareAtMaxPrice = Number(product.node.compareAtPriceRange.maxVariantPrice.amount).toFixed(2)
  }
},
watch: {
  product: function(newval, oldval) {
       this.updatePrice(newval)
    }
  }

Это работает, но я хотел бы найти решение, включающее кэширование. Я подозреваю, что использование мутации, когда изменения валюты могут сделать это, но не вникал в это.