Graphql 突变返回 Post 400 错误，不知道如何解决

Question

我尝试在 React 中使用输入表单来执行 graphql 突变并将团队添加到数据库中，这将导致我的 React 前端出现团队卡。我可以使用 GraphQL 游乐场手动执行突变，但不确定如何使用输入表单来执行相同的操作。我已经从函数转移到了类，然后又回到了函数组件，只是无法做到这一点..

解析器中的 Mutation.js 文件

createTeam(parent, args, { prisma }, info) {
            
        return prisma.mutation.createTeam({ 
            data: {
                title: args.data.title,
                agegroup: args.data.agegroup,
                published: args.data.published,
                coachcreator: {
                    connect: {
                        id: userId
                    }
                }
            }
        }, info)
    },

Schema.graphql 文件

type Mutation {
    createTeam(data: CreateTeamInput!): Team!
} 

input CreateTeamInput {
    title: String!
    agegroup: String!
    published: Boolean!
}


type Team {
    id: ID!
    title: String!
    agegroup: String!
    published: Boolean!
    coachcreator: User!
    players: [Player!]!
    updatedAt: String!
    createdAt: String!
}

Form.jsx 文件

const ADD_TEAM = gql`
mutation AddTeam($title: String!, $agegroup: String!, $published: String!, $coachcreator: String!){
    createTeam(title: $title, agegroup: $agegroup, published: $published, coachcreator: $coachcreators,
    ){
        id
        title
        agegroup
        coachcreator {
            name
        }
    }
}
`


function AddTeamForm() {
  const [title, setTitle] = useState('')
  const [agegroup, setAgeGroup] = useState('')
  const [coachcreator, setCoachCreator] = useState('')
  const [createTeam, { error }] = useMutation(ADD_TEAM, {
    variables: { title, agegroup, coachcreator }, refetchQueries: ["GET_TEAMS"]
  })
  if (error) {
    console.log('error: ', error)
  }

  return (
    <div className="AddForm">

    <MDBRow>
      <MDBCol md="3">
        <MDBInput label="Title:" name="title" type="text" onChange={e => setTitle(e.target.value)}>
        </MDBInput>
      </MDBCol>
      
      <MDBCol md="3">
        <MDBInput label="Age Group:" name="agegroup" type="text" onChange={e => setAgeGroup(e.target.value)}>
        </MDBInput>
      </MDBCol>
      
      <MDBCol md="3">
        <MDBInput label="CoachCreator"  name="coachcreator" type="text" onChange={e => setCoachCreator(e.target.value)}>
        </MDBInput>
      </MDBCol>
    </MDBRow>

    <MDBBtn color="success" type="submit" onClick={createTeam}>
      Submit Form
    </MDBBtn>
</div>
    );
  }

  export default AddTeamForm

我收到 400 错误请求错误，但无法确定问题所在。我还研究了 Graphql 和 Apollo Docs 几个小时，但仍然不确定解决方案。

有任何想法或推动正确方向吗？谢谢。

Answer 1

您的架构“声称”createTeam 突变需要 data 参数（CreateTeamInput 形）：

类型突变 { createTeam（数据：CreateTeamInput！）：团队！ }

在 graphiql 查询变量可能看起来像：

{
  data: {
    title: "some title", 
    agegroup: "some group", 
    published: "some date"
  }
}

...而且您不能“重新定义”（在客户端）突变（后端）要求，因此定义突变“同步”与 API 形状：

const ADD_TEAM = gql`
  mutation AddTeam($data: CreateTeamInput!){
    createTeam(data: $data){
        id
        title
        agegroup
        coachcreator {
            name
        }
    }
  }
`

...并将data 对象作为变量传递，而不是单独的值：

function AddTeamForm() {
  const [title, setTitle] = useState('')
  const [agegroup, setAgeGroup] = useState('')
  const [coachcreator, setCoachCreator] = useState('')
  const [createTeam, { error }] = useMutation(ADD_TEAM, {
    variables: { 
      data: {
        title, 
        agegroup, 
        published: "some date"
      }
    }, refetchQueries: ["GET_TEAMS"]
  })