Yash
Yash

Reputation: 33

Not able to mutate data on the front end with Apollo

I'm trying to build a reservations app on React-Native using Apollo client with GraphQl

I'm not able to call a mutation on the front end.

Below is some code with schema and what my mutation looks like.

What am I doing wrong?

Schema:

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

My mutation:

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

   {
     name
  }
`;

Button wrapped in Mutation component

<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>

Error:

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!

Upvotes: 0

Views: 65

Answers (2)

Victor Jimenez
Victor Jimenez

Reputation: 179

Use input types when you need composited fields on the mutations, please check

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

Your schema, mutation and code should look something similar to this with the input types.

Schema:

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

Mutation:

mutation createReservation($data: ReservationInput ){
     name
}

Component:

<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>

Upvotes: 1

Gh05d
Gh05d

Reputation: 8982

Your mutation looks wrong to me. Shouldn't it be more like this:

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

Upvotes: 0

Related Questions