GraphQL - 语法错误 GraphQL 请求 (5:15) 预期名称 [英] GraphQL - Syntax Error GraphQL request (5:15) Expected Name

问题描述

我正在尝试实现一个 graphQL API，它在查询方面表现良好，但在突变方面表现不佳:

I am trying to implement a graphQL API, it went well with queries but it's going not that well with mutations:

这是我使用 apollo-client 和 graphql-tag 的基本修改:

Here is my basic mutation using apollo-client and graphql-tag:

import gql from 'graphql-tag'
const addNewPlace = (place) => {
    return client.mutate({
        mutation: gql`
        mutation {
          addNewPlace(
          input: {
            $title: String!
          }
          ) {
            place { title }
          }
        }
        `,
        variables: {
          title: place.title
        }
      })
  }

在这里我试图使用变量.当把mutation改成下面这样的时候，虽然很顺利，但是这不是id的正确方式.

Here I was trying to use variables. When changing the mutation to look like that one below, it is going smoothly however, it's not the right way to do id.

const addNewPlace = (place) => {
    return client.mutate({
        mutation: gql`
        mutation {
          addNewPlace(
          input: {
            title: "${place.title}"
          }
          ) {
            place { title }
          }
        }
        `
    })
}

知道我的错误在哪里吗?

Any idea where I made my mistake?

推荐答案

在使用变量时，您需要采取三个步骤:

When using variables, there's three steps you need to take:

1. 将变量添加到正在发送的请求中.在 Apollo 中，它是通过在传递给 mutate 的对象内指定一个 variables 属性来完成的.你写道:

1. Add the variables to the request being sent. In Apollo, it's done by specifying a variables property inside the object you pass to mutate. You wrote:

变量:{ title: place.title }

variables: { title: place.title }

这很好.我们正在向我们的服务器发送一些名为 title 的变量，带有任何值，以及对我们的服务器的请求.此时，GraphQL 甚至不知道变量.

This is fine. We are sending some variable, called title, with whatever value, along with the request to our server. At this point, GraphQL doesn't even know about the variables.

在操作中声明变量.您不必为您的操作命名，但这样做是一种很好的做法:

Declare your variables inside your operation. You don't have to name your operation, but it's good practice to do so:

mutation AddNewPlace($title: String) {

mutation AddNewPlace($title: String) {

在这里，我们告诉 GraphQL 我们已经包含了一个名为 title 的变量.您可以将其命名为任何名称(例如 foo)，只要它与您传递给 #1 中的变量 prop 的内容匹配即可.这一步很重要，因为 A) GraphQL 需要知道变量，B) 它需要知道你传入的什么类型的变量.

Here, we are telling GraphQL we've included a variable called title. You could call it anything (foo for example), as long as it matched what you passed to the variables prop in #1. This step is important because A) GraphQL needs to know about the variable and B) it needs to know what type of variable you are passing in.

最后，将变量包含在您的变更中，如下所示:

Finally, include the variable in your mutation, like this:

addNewPlace(input: { title: $title }) {

addNewPlace(input: { title: $title }) {

注意不要将第 2 步中的变量定义与第 3 步中的输入定义混淆.此外，我假设您的 typeDefs 包括某种 input 类型，如 AddNewPlaceInput.您可以像这样传入一个对象，而不是仅仅传入标题:

Be careful not to mix up your variable definition in step #2 with your input definition in step #3. Also, I'm assuming your typeDefs include some kind of input type like AddNewPlaceInput. Rather than passing in just title, you can pass in an object like this:

variables: { input: { title: place.title } }

那么你的突变看起来像这样:

Then your mutation looks like this:

mutation AddNewPlace($input: AddNewPlaceInput) {
  addNewPlace(input: $input) {
    # fields returned by the mutation

我强烈建议启用 GraphiQL 端点，这样您就可以在客户端实施之前轻松测试查询和更改.

I would highly recommend enabling a GraphiQL endpoint so you can easily test your queries and mutations before implementing them on the client side.

最后，您可能需要检查并确保您在变更中要求的字段与您的类型定义相匹配.我只是在这里猜测，但是如果您的突变解析为 Place 类型，则不需要放置 place { title }，只需 title，除非您的 Place 类型实际上有一个 place 字段.

Lastly, you may want to check and make sure the fields you are asking for in the mutation match your type definition. I'm just guessing here, but if your mutation resolves to a Place type, you wouldn't need to put place { title }, just title, unless your Place type actually has a place field.

这篇关于GraphQL - 语法错误 GraphQL 请求 (5:15) 预期名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！