Apollo 查询返回错误“预期字符串，找到字符串”

Question

我正在尝试从 DB 获取单个产品，但我一直收到错误消息： 来自 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;

我注意到 $ 登录查询定义，尝试过，但它返回： “预期的字符串，找到 $”。

Answer 1

看起来您将操作签名和字段签名混为一谈。 GraphQL 查询的第一行格式如下：

[operationType] [operationName] [(variableDefinitions)]

如果省略操作类型，则假定为query（而不是mutation 或subscription）。操作名称也是可选的。编写查询时始终包含 both 是一种很好的做法。

如果你有变量，它们的定义遵循操作名称并采用以下格式：

名称：类型 [= defaultValue]

变量名总是以$ 开头。一旦声明，它们就可以用来代替查询中的任何参数。就像变量定义一样，字段参数也包含在一组括号中，但它们的格式很简单：

参数名称：值

因此，查询可能如下所示：

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

通常，每个参数都有一个变量，因此约定是只使用参数名作为变量名，并附加$，但变量名可以是任何你想要的。

综合起来，您的查询应该如下所示：

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

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