javascript - 无法使用 Apollo 改变前端数据

Question

我正在尝试使用 Apollo 客户端和 GraphQl 在 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/

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

架构:

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

突变:

mutation createReservation($data: ReservationInput ){
     name
}

组件:

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