Graphql 突变返回 Post 400 错误，不确定如何解决

Question

我试图在 React 中使用输入表单来执行 graphql 突变并将团队添加到数据库，这将导致我的 React FrontEnd 上出现团队卡片。我可以使用 GraphQL playground 手动执行突变，但不确定如何使用输入表单执行相同的操作。我已经从功能转移到类并再次回到功能组件，但无法正确处理..

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

您的架构 'claims' createTeam 突变需要 data 个参数（CreateTeamInput 形状）：

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

在 graphiql 查询变量中可能如下所示：

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

...并且您不能“重新定义”（在客户端）突变（后端）要求，因此定义突变 'in sync' 与 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"]
  })

Graphql 突变返回 Post 400 错误，不确定如何解决

Graphql mutation returning a Post 400 Error, not sure how to resolve

mutation

apollo

reactjs

graphql

apollo-client