Apollo 查询 returns 错误 "Expected String, found String"

Question

我试图从数据库中获取单个产品，但我一直收到错误消息： "Expected String, found String" 来自 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;

我注意到 $ sign in query defining，尝试过但它 returns： "Expected String, found $".

Answer 1

您似乎在混淆操作签名和字段签名。 GraphQL 查询的第一行格式如下：

[operationType] [operationName] [(variableDefinitions)]

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

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

name: type [= defaultValue]

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

argumentName: value

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

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 组件

中引用它的方式

Apollo 查询 returns 错误 "Expected String, found String"

Apollo query returns error "Expected String, found String"

javascript

apollo

reactjs

react-apollo