Reactjs Graphql – variable is required

September 15, 2022

I have a graphql server that is created with .Net Core and there I have a query with an array argument and an integer and when I test it at localhost:####/graphql it works correctly.

However, when I try to fetch that server with my query, I get an error that says Variable ... is required, even though I am using it.

My graphql query:

const kindd = [1,2];
const typeosQuery_param = `query ($kindd:[Int!]!){
        typeos(kindd: $kindd,flag:1){
            kindd
            name
            basis
        }
    }
  `

My code in which I consume the server and call the query:

useEffect(() => {
fetch("https://localhost:0094/graphql/",{
    method:"POST",
    headers:{"Content-Type":"application/json"},
    body: JSON.stringify({query: typeosQuery_param})
})

Note: the server, the query w/o parameters and the way I fetch the server it’s all fine, it makes troubles only when I want to pass a parameter.

Thank you in advance.

>Solution :

You’re missing the arguments on the fetch.

What you have to do is:

fetch(
  "https://localhost:0094/graphql/",{
    method:"POST",
    headers:{"Content-Type":"application/json"},
    body: JSON.stringify({query: typeosQuery_param, variables: {kindd} 
  })
})

In graphql we need the 2 parameters (if it includes variables)

You can read this and go deeper in the documentation:
https://graphql.org/graphql-js/passing-arguments/