模板文字-从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} ){
  # ... 
}
`

我收到两种类型的错误响应，第一种是搜索字符串包含多个用空格隔开的单词时出现的错误-“语法错误：期望：，找到）”

第二，当我搜索单个单词时-“字段”媒体”自变量“搜索”需要类型String，找到火影忍者。

这里有什么问题？

你可以在这里看到完整的代码- https://github.com/red4211/react-anime-
search
，应用程序部署到GitHub的页面，搜索API响应去安慰- https://red4211.github.io/react-anime-
搜索/

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文档内部带有前缀，但在变量外部则不这样做。