反应 ApolloClient 突变答案

【问题标题】：React ApolloClient mutations反应 ApolloClient 突变
【发布时间】：2020-11-27 14:44:38
【问题描述】：

我正在尝试制作一个表格来创建一个新公告，但我收到错误：

Invariant Violation: Argument of undefined passed to parser was not a valid GraphQL DocumentNode. You may need to use 'graphql-tag' or another method to convert your operation into a document

这是我第一次使用 GraphQL 和 Apollo，所以我不知道我到底应该做什么。

CreateAnnouncement 组件：

import { compose, graphql } from 'react-apollo';
import { addAnnouncement as addAnnouncementMutation } from '../../../mutations/Announcements.gql';
import { announcement as announcementQuery } from '../../../queries/Announcements.gql';

class CreateAnnouncement extends React.Component {
...
}

export default compose(
  graphql(announcementQuery, {
    options: ({ match }) => ({
      variables: {
        _id: match.params._id,
      },
    }),
  }),

  ***THE ERROR POINTS NEXT LINE***

  graphql(addAnnouncementMutation, {
    name: 'addAnnouncement',
  }),
)(CreateAnnouncement);

'../../../mutations/Announcements.gql'

#import "../fragments/Announcements.gql"

mutation addAnnouncement($title: String!, $description: String, $date: String!) {
  addAnnouncement(title: $title, description: $description, date: $date) {
    ...AnnouncementAttributes
  }
}

"../fragments/Announcements.gql"

fragment AnnouncementAttributes on Announcement {
  _id
  title
  description
  date
  createdAt
  updatedAt
}

【问题讨论】：

你使用什么 babel 插件或 webpack 加载器来导入.gql 文件？

标签： reactjs graphql react-apollo apollo-client

【解决方案1】：

我发现了这个问题。原因是文件中只有一个“添加”突变。

我添加了一个新的突变并且它起作用了。

#import "../fragments/Announcements.gql"

mutation addAnnouncement($title: String!, $description: String, $date: String!) {
  addAnnouncement(title: $title, description: $description, date: $date) {
    ...AnnouncementAttributes
  }
}

mutation updateAnnouncement($_id: String!, $title: String, $description: String, $date: String) {
  updateAnnouncement(_id: $_id, title: $title, description: $description, date: $date) {
    ...AnnouncementAttributes
  }
}

您还需要在解析器和架构中定义此突变。

【讨论】：