Apollo查询返回错误“Expected String, found String" [英] Apollo query returns error "Expected String, found String"

问题描述

我正在尝试从 DB 获取单个产品，但一直收到错误消息:来自 GraphQL 的预期字符串，找到的字符串".

代码如下:

class ProductDetail extends React.Component {构造函数(道具){超级(道具)；}使成为() {console.log(JSON.stringify(this.props.id));return <Query query={GET_PRODUCT} variables={{_id: JSON.stringify(this.props.id)}}>{({ 加载，错误，数据 }) =>{if (loading) return <ReactLoading type="spin" className="spinner" color={"black"}></ReactLoading>if (error) return {error.message}返回 (<div>{data.products.map(p => (控制台日志(数据)))}

)}}</查询>}}const GET_PRODUCT = gql`{产品(_id:字符串){牌}}`导出默认的ProductDetail;

我注意到 $ sign in 查询定义，尝试使用它但它返回:预期的字符串，找到 $".

解决方案

看起来您将操作签名和字段签名混为一谈.GraphQL 查询的第一行具有以下格式:

<块引用>

[operationType] [operationName] [(variableDefinitions)]

如果省略操作类型，则假定为query(相对于mutation 或subscription).操作名称也是可选的.在编写查询时始终包括两者是一种很好的做法.

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

<块引用>

名称:类型 [= defaultValue]

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

<块引用>

argumentName:值

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

query SomeArbitraryName ($foo: String, $bar: Int!) {getSomething(名称:$foo){姓名quxs(最大值:$bar)}}

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

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

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

查询WhateverNameYouLike ($_id: String) {产品(_id:$_id​​){牌}}

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

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

Here is the code:

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 $".

解决方案

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

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:

name: type [= 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: value

So, a query can look like this:

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

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

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查询返回错误“Expected String, found String"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！