GraphQLError when sending mutation

0
votes

I'm getting the following Syntax error when trying to use Apollo client

GraphQLError: Syntax Error: Expected Name, found $

The query i'm sending is like so 

const CREATE_AUTHOR = gql`
  {
    mutation createAuthor($firstName: String, $lastName: String) {
      createAuthor(firstName: $firstName, lastName: $lastName) {
        firstName
        lastName
      }
    }
  }
`;

My type definitions on the server are defined like this 

//...
  type Mutation {
    createAuthor(firstName: String! lastName: String!): Author
    updateAuthor(_id: String firstName: String lastName: String): Author
    deleteAuthor(_id: String): Author
  }

//...

My question is what is in correct with my useage of gql looking at the apollo docs

https://www.apollographql.com/docs/react/essentials/mutations.html#calling-mutations

Their example matches my implementation I believe or I maybe misunderstanding the usage

const ADD_TODO = gql`
  mutation addTodo($type: String!) {
    addTodo(type: $type) {
      id
      type
    }
  }
`;
3
javascriptgraphqlapolloreact-apollo
What does your this.onSubmit function look like? It looks like this line this.onSubmit(e, createAuthor, firstName, lastName) might be the discrepancy... – Chris Forrette
@ChrisForrette this is a compile-time error I highly doubt it's related to the onSubmit function as it doesn't have a chance to fire – Joe Warner
@ChrisForrette I can add it if you'd like though – Joe Warner
@ChrisForrette I've updated :) – Joe Warner
Gotcha—I assumed the error was occurring on submit. – Chris Forrette

3 Answers

2
votes

I figured it out—it's a simple one! Don't put brackets around your mutation—it should look like this instead:

const CREATE_AUTHOR = gql`
  mutation createAuthor($firstName: String, $lastName: String) {
    createAuthor(firstName: $firstName, lastName: $lastName) {
      firstName
      lastName
    }
  }
`;
0
votes

I think you're missing a comma here: mutation createAuthor($firstName: String $lastName: String) {

Should be mutation createAuthor($firstName: String, $lastName: String) {

0
votes

You may need to send variables to the mutation component, e.g.:

<Mutation mutation ={CREATE_AUTHOR} variables={{"firstName": firstName, "lastName": lastName}}>

UPDATE

Although this isn't exactly what you're looking for, here's how I do Apollo mutations at this time.

A function belonging to the React component class:

sendInstantMsg(createIM) {
    const textToSendElem = document.getElementById("textToSend");
    const textToSend = textToSendElem.value;

    const {toID} = this.props;
    const fromID = Meteor.userId();
    const msgText = trimInput(textToSend);

    createIM({
        variables: {
            "fromID": fromID,
            "toID": toID,
            "msgText": msgText
        },
        optimisticResponse: {
            __typename: 'Mutation',
            createIM: {
                __typename: 'instant_message',
                id: -1, 
                fromID: fromID,
                toID: toID,
                msgText: msgText,
                createdAt: +new Date
            },
        },
        update: (cache, {data: {createIM}}) => {
            let cacheData = cache.readQuery({query: GETIMS_QUERY, variables: {"fromID": fromID, "toID": toID}});
            let instant_message = cacheData.instant_message;
            if (!isDuplicateObject(createIM, instant_message)) {
                instant_message.push(createIM);

                cache.writeQuery({
                    query: GETIMS_QUERY,
                    data: {instant_message},
                    variables: {"fromID": fromID, "toID": toID}
                });
            }
            textToSendElem.value = "";
            scrollToBottomOfTextMsgs();
        }
    })
}

In the render function:

<Mutation
    mutation={CREATE_IM_MUTATION}
>
    {(createIM, {data}) => (
        <RaisedButton
            id="sendMsgButton"
            label="SEND"
            style={styles.makeApptButton}
            secondary={true}
            onClick={() => this.sendInstantMsg(createIM)}
        />
    )}
</Mutation>