I have a super simple GraphQl query, but im having trouble to make the query dynamic based on input. Lets say you will get a string in javascript that you want to pass along to the query, how is it done? Take example below, how would i replace the hardcoded string of "3111" on the Sku field in the product but instead inserting the value from the variable myString? I am just getting errors when i try to pass it along.

let myString = "3111"

`query getProductBySku {
        site {
          product(sku: "3111") {
            id
            entityId
            name
            sku
          }
        }
      }`

I have a super simple GraphQl query, but im having trouble to make the query dynamic based on input. Lets say you will get a string in javascript that you want to pass along to the query, how is it done? Take example below, how would i replace the hardcoded string of "3111" on the Sku field in the product but instead inserting the value from the variable myString? I am just getting errors when i try to pass it along.

let myString = "3111"

`query getProductBySku {
        site {
          product(sku: "3111") {
            id
            entityId
            name
            sku
          }
        }
      }`

• javascript
• reactjs
• graphql
• graphql-js

Share Improve this question Follow asked Dec 23, 2021 at 10:13 ScreamoIsDeadScreamoIsDead 38711 gold badge33 silver badges1616 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Have a look here: https://graphql/graphql-js/passing-arguments/

In your case scenario:

var query = `query getProductBySku($sku: String) {
        site {
          product(sku: $sku) {
            id
            entityId
            name
            sku
          }
        }
      }
`;

fetch('/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
  body: JSON.stringify({
    query,
    variables: { "3111" }, // this refers to SKU
  })
})
  .then(r => r.json())
  .then(data => console.log('data returned:', data));

---

Basically other than creating a query that allows argument to pass, you need a POST request with the body setup to acodate the inputs which are expected to be fulfilled