GraphQLError: Syntax Error: Unexpected Name "undefined"

Question

I have stored all of my queries on their on page:

import gql from "graphql-tag";

const getStories = gql`
  query getStories {
      stories {
        id
        title
        author
        tagline
        summary
        rating
        you
        need
        go
        search
        find
        take
        returned
        changed
    }
  }
`

const createStory = gql`
  mutation($title: String!, $author: String!) {
    create (title: $title, author: $author) {
      id
      title
      author
      tagline
      summary
      rating
      you
      need
      go
      search
      find
      take
      returned
      changed
     }
    }
   `
  const updateStory = gql`
   mutation($id: ID!) {
    update(id: $id) {
     id
     title
     author
     tagline
     summary
     rating
     you
     need
     go
     search
     find
     take
     returned
     changed
   }
  }
 `

  export default { getStories, updateStory, createStory };

On my form page I have imported the createStory mutation and I am trying to bind it with the Component, like so:

import React, { Component } from "react"
import { withRouter } from 'react-router-dom'
import  graphql  from 'graphql-tag'
import createStory from '../../Queries/Queries'

class Form extends Component {
  constructor(props) {
    super(props);
      this.state = {
         story: {}
      };
   }

  onChange = e => {
   const storyState = this.state.story;
    storyState[e.target.name] = e.target.value;
    console.log(this.props.createStory)
    console.log(storyState)
    this.setState(storyState);
  };

 onSubmit = e => {
   e.preventDefault();
   console.log(this.state.story)
   this.props.createStory({
   variables: {
    story: this.state.story
   }
 })
this.props.history.replace('/')
};

render() {
 return (
  <div className="card">
    <h1>Write A Story</h1>
    <form onSubmit={this.onSubmit}>
        // Cut out my form details for space
      <input type="submit" value="Write Story" />
    </form>
  </div>
   );
  } 
 }

 const createStoryMutation = graphql(createStory, {
   name: 'createStory'})(Form)

export default withRouter(createStoryMutation)

However, I have continually been running receiving the error.

GraphQLError: Syntax Error: Unexpected Name "undefined"

At first I suspected it was a packaging issue, so one of the ways I've been trying to solve it is by alternating between graphql-tag and react-apollo. I've but when messing with those I am constantly getting Object(...) is not a function, which I know has to do with whether or not the imported functions are wrapped in {brackets} or not.

I have tried just about everything that I am aware of to get this code to work, yet to no avail. I know that my post mutation is to long as well(i.e. it should be wrapped in an input object), but I was just trying to make things functional before I clean up.

That being said, thank you in advance.

Solution 1

Notice that you are doing import graphql from 'graphql-tag' at the top of the Form component file. I'd imagine that you are actually trying to do import { graphql } from 'react-apollo'; based on the way that you are using graphql as a HOC in the code you posted.

Your import/export is also incorrect. You shouldn't have a default export but rather put the export keyword in front of each query definition. Then you need to change import createStory from '../../Queries/Queries' to import {createStory} from '../../Queries/Queries'. Currently you are setting createStory equal to { getStories, updateStory, createStory }.

Solution 2

I got a similar error when following along with a youtube project on the merng stack (https://www.youtube.com/watch?v=C_2Eo72cL2k). The issue for me was that I wasn't prefacing the query with "query" nor wrapping it in curly braces. Doing either caused the error to go away, but the former caused a 400 bad request error in the console.

Comments

[Lullaby]

Wow! Thanks it work! I tried to upvote you but I don't have enough contributions yet

[Jclangst]

No problem. Glad it worked. You should be able to accept the answer to close out the question.

[nkhil]

Thanks so much - this is the mistake I was making as well. Your query should look like so: const QUERY = gql'query { users { firstName } }'