Reputation: 33
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
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
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