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

Posted 2023-03-10

【中文标题】Apollo 查询返回错误“预期字符串，找到字符串”

【英文标题】：Apollo query returns error "Expected String, found String"

【发布时间】：2018-10-19 04:35:36

【问题描述】：

我正在尝试从 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;

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

【问题讨论】：

附带说明，您不需要对this.props.id 进行字符串化。看起来您的查询旨在返回单个产品，但在您的 Query 组件中，您实际上是在映射多个产品。但这与您的实际问题无关。

【参考方案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 组件中引用它的方式

【讨论】：

太棒了！如果您发现它有帮助，也请点赞这个答案:)