Apollo查询返回错误“期望的字符串，找到的字符串". [英] Apollo query returns error "Expected String, found String"

问题描述

我正在尝试从数据库中获取单个产品，但是一直以来我都遇到错误:来自GraphQL的期望的字符串，找到的字符串".

I'm trying to get single product from DB, but all the time I'm getting the error: "Expected String, found String" from GraphQL.

这是代码:

class ProductDetail extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    console.log(JSON.stringify(this.props.id));
    return <Query query={GET_PRODUCT} variables={{_id: JSON.stringify(this.props.id)}}>
    {({ loading, error, data }) => {
      if (loading) return <ReactLoading type="spin" className="spinner" color={"black"}></ReactLoading>
      if (error) return <Alert color="danger">{error.message}</Alert>
      return (
        <div>
          {data.products.map(p => (
            console.log(data)
          ))}
        </div>
      )
    }}
  </Query>
  }
}


const GET_PRODUCT = gql`
    {
  product(_id: String) {
    brand
  }
}
`

export default ProductDetail;

我注意到查询中定义了$符号，尝试了一下，但返回了:期望的字符串，找到$".

I noticed $ sign in query defining, tried with that but it returns: "Expected String, found $".

推荐答案

看起来就像您在混合操作签名和字段签名.GraphQL查询的第一行具有以下格式:

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 )]

如果省略操作类型，则将其假定为 query (与 mutation 或 subscription 相对).操作名称也是可选的.最好在编写查询时始终同时包含和.

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:

名称:类型 [= 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 :值

因此，查询如下所示:

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

在这里，我们定义了两个变量( $ foo 和 $ bar ). $ foo 用于 getSomething 查询的 name 参数，而 $ bar 用作 quxs 字段的> max 参数.请注意，您为每个变量定义的类型都很重要-我只能使用 $ foo 来替换类型为 String 的参数(而不是另一个标量)或键入或 String！或 [String] )

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

您可以将变量名更改为其他名称，例如 $ productId ，但是您还需要更改在 Query 组件中引用该变量的方式

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

这篇关于Apollo查询返回错误“期望的字符串，找到的字符串".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！