Support for Directives (inContext)

[PaulBouisset]

Hi, I am not sure if it's already the case but it seems that directive like @inContext are not supported currently by the shopify client.

I tried to use the @incontext directive in my query like explained in this guide but with no success.

Is there a way to check if it's working or maybe I am doing something wrong but just want to check.
My query:

query allProducts @inContext(country: US) {
      products(first: 1) {
        pageInfo { hasNextPage, hasPreviousPage }
        edges {
          node {
            variants(first: 1) {
              pageInfo { hasNextPage, hasPreviousPage }
              edges {
                node {
                  priceV2 {
                    amount
                    currencyCode
                  }
                }
              }
            }
          }
        }
      }
  }

[Gomah]

Hey @PaulBouisset, did you configure custom prices for this specific country?

From the docs:

If you don't include the @inContext directive or provide a country argument that doesn't have custom prices configured, then the prices of products are returned in the default currency that's configured for the storefront.

[PaulBouisset]

I do not have a country specific price for US but currently this query is working when I use the shopify Graphql app and my shop is returning prices in dollar if I set the @incontext directive to US and in euro if I set it to "FR".

I am just not sure how to build the query with the shopify client from nuxt-shopify.

Do I send a "raw" query like the one I described above? If yes, how do I send it? Because currently if I understood correctly $shopify.graphQLClient.query only accept functions and not raw queries.

Or do I use the technic like this and I can specify the @incontext directive somewhere:

const customerQuery = this.$shopify.graphQLClient.query((root) => {
        root.add('products', { args: {} }, (products) => {
        })

[Gomah]

I am just not sure how to build the query with the shopify client from nuxt-shopify.

Here's an example: https://github.com/Shopify/js-buy-sdk#fetching-products-1

You need to use the unoptimized SDK version, don't forget to set unoptimized: true in your nuxt config.

Do I send a "raw" query like the one I described above? If yes, how do I send it? Because currently if I understood correctly $shopify.graphQLClient.query only accept functions and not raw queries.

Or do I use the technic like this and I can specify the @incontext directive somewhere:

const customerQuery = this.$shopify.graphQLClient.query((root) => {
        root.add('products', { args: {} }, (products) => {
        })

You can try, this part of the SDK is not really documented so you might have to dig in a bit, also I'm not sure you can add a directive with their SDK, I could be wrong.

I reckon you could just query the storefront API directly:

const query = `
    query allProducts @inContext(country: US) {
      products(first: 1) {
        pageInfo { hasNextPage, hasPreviousPage }
        edges {
          node {
            variants(first: 1) {
              pageInfo { hasNextPage, hasPreviousPage }
              edges {
                node {
                  priceV2 {
                    amount
                    currencyCode
                  }
                }
              }
            }
          }
        }
      }
  }
`;

const body = JSON.stringify({ query });

fetch("YOUR_SHOPIFY_STOREFRONT_GRAPHQL_ENDPOINT", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "X-Shopify-Storefront-Access-Token": "YOUR_TOKEN"
  },
  body,
})
  .then((res) => res.json())
  .then(({ data }) => console.log(data));