模板文字 - 从 API 获取错误

Question

所以我有一个按名称搜索动漫的方法，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-search/

Answer 1

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

media(type:ANIME, search: naruto ) {

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

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

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

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

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

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

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

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

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

Answer 2

media((看起来像一个函数，所以在这种情况下，正确的语法是：

media(type="ANIME", search=searchQuery)

或者如果 media(( 的参数是一个对象

media({type: "ANIME", search: searchQuery})

此外，您不需要在 searchQuery 周围使用 ${}，因为 searchQuery 已经是一个字符串。它的用法是这样的

`${searchString}` or `foo${searchString}bar`

使用 ${} 实用程序周围的 '' 来表示字符串文本中的字符串及其变量。

希望对您有所帮助！