GraphQL - 语法错误GraphQL请求(5:15)预期名称

Question

我正在尝试实现一个graphQL API,它在查询方面做得很好,但对于突变来说效果不是很好:

这是我使用的基本突变apollo-client和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
        }
      })
  }

在这里,我试图使用变量.当将突变改变为下面的突变时,它会顺利进行,但这不是正确的方法.

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

知道我弄错了吗？

Answer 1

使用变量时,需要采取三个步骤:

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

   变量:{title:place.title}

   这可以.我们发送一些变量,称为title,具有任何值,以及对我们服务器的请求.此时,GraphQL甚至不知道变量.

2. 在您的操作中声明您的变量.您不必为操作命名,但最好这样做:

   变异AddNewPlace($ title:String) {

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

3. 最后,在变异中包含变量,如下所示:

   addNewPlace(输入:{title:$ title}){

注意不要将步骤#2中的变量定义与步骤#3中的输入定义混淆.另外,我假设你的typeDefs包含某种类型的inputAddNewPlaceInput.你可以传入一个像这样的对象:

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

然后你的变异看起来像这样:

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

我强烈建议启用Graph i QL端点,这样您就可以在客户端实现查询和突变之前轻松测试它们.

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