Question

我试图从数据库中获取单个产品，但我一直都会收到错误消息：＆＃34;预期字符串，找到String＆＃34;来自GraphQL。

以下是代码：

＆＃13;

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;

＆＃13;

我注意到查询定义中的$ sign，尝试过但它返回：＆＃34;预期字符串，找到$＆＃34;。

Answer 1

看起来您正在混淆操作签名和字段签名。 GraphQL查询的第一行具有以下格式：

[ operationType ] [ operationName ] [（ variableDefinitions ）]

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

如果您有变量，其定义将遵循操作名称并采用以下格式：

名称：类型 [= defaultValue ]

变量名称始终以$开头。声明后，可以使用它们代替查询中的任何参数。就像变量定义一样，字段参数也包含在一组括号中，但它们的格式只是：

argumentName ：value

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

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

我们已经定义了两个变量（$foo和$bar）。 $foo用于name查询的getSomething参数，而$bar用作max字段的quxs参数。请注意，为每个变量定义的类型都很重要 - 我只能使用$foo替换类型为String的参数（而不是另一个标量或类型或String! }或[String]）

通常情况下，每个参数最终会有一个变量，因此约定只是使用参数名称作为变量名称，只需附加$，但变量名称可以是您想要的任何名称。

总而言之，您的查询应该如下所示：

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

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

Apollo查询返回错误＆＃34;预期字符串，找到String＆＃34;

1 个答案: