时间戳

首页 > 解决方案 > 模板文字 - 从 API 获取错误

reactjs - 模板文字 - 从 API 获取错误

问题描述

所以我有一种按名称搜索动漫的方法，API 是 graphQL。这是查询的重要部分

const searchQuery = this.state.searchString;

var query = `query Search{
  # the rest of the query omitted for brevity
    media(type:ANIME, search: ${searchQuery} ){
  # ... 
}
`

我收到两种类型的错误响应，第一种是搜索字符串由多个用空格分隔的单词组成 - “语法错误：预期：，找到）”

其次，当我搜索单个单词时 - “字段“媒体”参数“搜索”需要类型字符串，找到火影忍者。”

这里有什么问题？

您可以在此处查看完整代码 - https://github.com/red4211/react-anime-search，应用程序部署到 github 页面，搜索 API 响应转到控制台 - https://red4211.github.io/react-anime-搜索/

标签： reactjsgraphql

解决方案

问题是，给定一些像“火影忍者”这样的查询，您当前的代码会产生以下文本：

media(type:ANIME, search: naruto ) {

这不是有效的语法，因为字符串文字应该用双引号 ( ") 括起来。

不要使用字符串插值来为查询提供动态值。这些应始终表示为变量，并作为单独的对象包含在您的请求中query。

您需要将变量定义为操作的一部分，并提供适当的类型

var query = `query Search ($searchQuery: String!) {

然后您可以在操作中的任何位置使用该变量：

media(type:ANIME, search: $searchQuery) {

现在只需将变量值与您的请求一起传递。

body: JSON.stringify({
  query,
  variables: {
    searchQuery,
  }
})

请注意，变量名称$在 GraphQL 文档内部以 a 为前缀，但在外部，我们不这样做。

推荐阅读