GraphQLError: синтаксическая ошибка: неожиданное имя «undefined»

Question

Я сохранил все свои запросы на странице:

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

На своей странице формы я импортировал мутацию createStory, и я пытаюсь связать ее с Компонентом, вот так:

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)

Однако я постоянно получаю сообщение об ошибке.

GraphQLError: Syntax Error: Unexpected Name "undefined"

Сначала я подозревал, что это была проблема с упаковкой, поэтому один из способов, которыми я пытался ее решить, - чередование между graphql-tag и react-apollo. У меня есть, но когда я возился с теми, кто постоянно получает Object(...) is not a function, я знаю, что это связано с тем, заключены ли импортированные функции в {скобки} или нет.

Я пробовал практически все, что мне известно, чтобы заставить этот код работать, но пока безрезультатно. Я знаю, что моя пост-мутация также слишком длинная (то есть она должна быть обернута во входной объект), но я просто пыталась сделать вещи функциональными, прежде чем очистить.

Как говорится, заранее спасибо.

Answer 1

Обратите внимание, что вы делаете import graphql from 'graphql-tag' в верхней части файла компонента Form. Я полагаю, что вы на самом деле пытаетесь сделать import { graphql } from 'react-apollo'; в зависимости от того, как вы используете graphql в качестве HOC в коде, который вы разместили.

Ваш импорт / экспорт также неверен. У вас не должно быть экспорта по умолчанию, а вместо этого ставьте ключевое слово export перед каждым определением запроса. Затем вам нужно изменить import createStory from '../../Queries/Queries' на import {createStory} from '../../Queries/Queries'. В настоящее время вы устанавливаете createStory равным { getStories, updateStory, createStory }.