Question

我正在尝试使用带有GraphQl的Apollo客户端在React-Native上构建预订应用程序

我无法在前端调用突变。

下面是一些带有模式的代码，以及我的突变情况。

我在做什么错了？

模式：

createReservation(
  data: ReservationCreateInput!
): Reservation!
type Reservation
implements Node {
  id: ID!
  name: String!
  hotelName: String!
  arrivalDate: String!
  departureDate: String!
}

我的突变：

const addReservationMutation = gql`
  mutation createReservation(
    $data: {
      name: String!
      hotelName: String!
      arrivalDate: String!
      departureDate: String!
    })

   {
     name
  }
`;

包装在Mutation组件中的按钮

<Mutation mutation={addReservationMutation}>
      {(addReservation, { data }) => (
        <Button
          title="Reserve your!"
          onPress={() => {
            addReservation({
              variables: {
                name: "Joe",
                hotelName: "LemonTree",
                arrivalDate: "06/05/2019",
                departureDate: "06/12/2019"
              }
            });
          }}
        />
      )}
    </Mutation>

错误：

Syntax Error: Expected Name, found {
74 Requiring module "index.js", which threw an exception: Syntax Error: Expected Name, found {

GraphQL request (3:12)
2:   mutation createReservation(
3:     $data: {
              ^
4:       name: String!


NativeModules @ RNDebuggerWorker.js:1
c @ RNDebuggerWorker.js:1
"index.js", which threw an exception: Syntax Error: Expected Name, found {

GraphQL request (3:12)
2:   mutation createReservation(
3:     $data: {
              ^
4:       name: String!

handleException @ 
c @ RNDebuggerWorker.js:1
…:74 Requiring module "index.js", which threw an exception: Syntax Error: Expected Name, found {

GraphQL request (3:12)
2:   mutation createReservation(
3:     $data: {
              ^
4:       name: String!

Answer 1

当您需要突变的复合字段时，请使用输入类型，请检查

https://graphql.org/graphql-js/mutations-and-input-types/

您的架构，变异和代码应该与输入类型类似。

模式：

clusterApply

突变：

input ReservationInput {
  name: String!
  hotelName: String!
  arrivalDate: String!
  departureDate: String!
}

组件：

mutation createReservation($data: ReservationInput ){
     name
}

Answer 2

您的突变对我来说似乎是错的。应该不是这样的吗？

const addReservationMutation = gql`
  mutation onCreateReservation(
    $data: {
      name: String!
      hotelName: String!
      arrivalDate: String!
      departureDate: String!
    }) {
     createReservation(data: $data) {
       name
    }
  }
`;

无法使用Apollo

2 个答案: