Apollo Query Returns Error "expected String, Found String"

I'm trying to get single product from DB, but all the time I'm getting the error: 'Expected String, found String' from GraphQL. Here is the code: I noticed $ sign in query defini

Solution 1:

Looks like you're conflating the operation signature and the field signature. The very first line of a GraphQL query has this format:

[operationType] [operationName] [(variableDefinitions)]

If the operation type is omitted, it's assumed to be query (as opposed to mutation or subscription). The operation name is also optional. It's good practice to always include both when writing your queries.

If you have variables, their definitions follow the operation name and take the following format:

name: type [= defaultValue]

Variable names always begin with $. Once declared, they can then be used in place of any argument inside your query. Just like variable definitions, field arguments are also wrapped in a set of parentheses, but their format is simply:

argumentName: value

So, a query can look like this:

query SomeArbitraryName ($foo: String, $bar: Int!) {
  getSomething (name: $foo) {
    name
    quxs (max: $bar)
  }
}

Here we've defined two variables ($foo and $bar). $foo is used for the name argument for the getSomething query, while $bar is used as the max argument for the quxs field. Note that the types you define for each variable are significant -- I can only use $foo as a replacement for arguments that are of the type String (as opposed to another scalar or type or String! or [String])

Normally, you end up with one variable per argument, so convention is to just use the argument name for the variable name, and just append the $, but the variable name could be anything you want.

Putting it all together, your query should look something like this:

query WhateverNameYouLike ($_id: String) {
  product(_id: $_id) {
    brand
  }
}

You could change the variable name to something else, like $productId, but you would also need to change how you reference that inside your Query component