Мутация Graphql, возвращающая ошибку Post 400, не знаю, как решить - PullRequest
Новая
       110

Мутация Graphql, возвращающая ошибку Post 400, не знаю, как решить

0 голосов
/ 13 июля 2020

Я пытаюсь использовать форму ввода в React, чтобы выполнить мутацию graphql и добавить команду в базу данных, в результате чего карточка команды появится в моем React FrontEnd. Я могу выполнить мутацию вручную с помощью GraphQL Playground, но не знаю, как использовать форму ввода для выполнения того же действия. Я перешел от функций к классам и снова к функциональным компонентам и просто не могу понять это правильно ..

Мутация. 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, но все еще не уверен в решении.

Есть идеи или толчок в правильном направлении? Спасибо.

1 Ответ

0 голосов
/ 13 июля 2020

Ваша схема «утверждает», что для createTeam мутации требуется data аргумент (в форме CreateTeamInput):

type Mutation {createTeam (data: CreateTeamInput!): Команда! }

В запросе graphiql переменные, вероятно, выглядели так: 

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

... и вы не можете «переопределить» (на клиенте) требования к мутации (бэкэнд), поэтому определите мутацию 'in syn c' с формой 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"]
  })
...