GraphQLError：语法错误：意外名称“未定义”

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，我知道这与导入的函数是否包含在 {brackets} 中有关。

我已经尝试了我所知道的几乎所有方法来使此代码正常工作，但无济于事。我知道我的后期突变也很长（即它应该被包装在一个输入对象中），但我只是想在清理之前让事情变得正常。

话虽如此，提前谢谢你。

Answer 1

在关注 merng 堆栈 (https://www.youtube.com/watch?v=C_2Eo72cL2k) 上的 youtube 项目时，我遇到了类似的错误。对我来说，问题是我没有在查询前加上“查询”，也没有用花括号括起来。这样做会导致错误消失，但前者会导致控制台中出现 400 bad request 错误。

Answer 2

请注意，您在表单组件文件的顶部执行import graphql from 'graphql-tag'。我想您实际上是在尝试根据您在发布的代码中使用 graphql 作为 HOC 的方式来执行 import { graphql } from 'react-apollo';。

您的导入/导出也不正确。您不应该有默认导出，而是将 export 关键字放在每个查询定义的前面。然后您需要将import createStory from '../../Queries/Queries' 更改为import {createStory} from '../../Queries/Queries'。目前您将createStory 设置为等于{ getStories, updateStory, createStory }。