How to pass javascript variable to graphql query?

Question

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

SpeederX · Accepted Answer · 2021-12-23 10:21:25Z

7

Have a look here: https://graphql.org/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 accomodate the inputs which are expected to be fulfilled

answered Dec 23, 2021 at 10:21

SpeederX

4243 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

andy mccullough Over a year ago

should it not be variables: { sku : "3111" } ?

SpeederX Over a year ago

@andymccullough yea, I thought so. If you open the link the official doc it reports you can use positional arguments though. Without the need to declare the specific parameter you're referring to.

Timo Over a year ago

There is no need for variables object in the body as arg to stringify. Just pass the var to query with ${sku}. It works because of the backticks.

Russo Mar 28 at 11:08

variables: {"sku":"${sku}","var2":"${var2}"},

Collectives™ on Stack Overflow

How to pass javascript variable to graphql query?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related