如何做示例GraphQL Relay突变

Question

我刚开始在GraphQL Relay上工作，因为我想执行突变，但是它在控制台中给出了这样的错误

未捕获的TypeError：Comment.getFragment不是一个函数

这是我的中继代码 ：

import Relay from 'react-relay';
import React from 'react';

export default class CreateCommentMutation extends Relay.Mutation {
  static fragments = {
    story: () => Relay.QL`
      fragment on Story { id }
    `,
  };
  getMutation() {
    return Relay.QL`
      mutation{ createComment }
    `;
  }
  getFatQuery() {
    return Relay.QL`
      fragment on CreateCommentPayload { 
        story { comments },
      }
    `;
  }
  getConfigs() {
    return [{
      type: 'FIELDS_CHANGE',
      fieldIDs: { story: this.props.story.id },
    }];
  }
  getVariables() {
    return { text: this.props.text };
  }
}


export default class Comment extends React.Component {
  render() {
    console.log("hai:"+this.props.comment)
    var {id, text} = this.props.comment;
    return <li key={id}>{text}</li>;
  }
}
export default Relay.createContainer(Comment, {
  fragments: {
    comment: () => Relay.QL`
      fragment on Comment {
        id,
        text,
      }
    `,
  },
});

export default class Story extends React.Component {
  _handleSubmit = (e) => {
    e.preventDefault();
    Relay.Store.update(
      new CreateCommentMutation({
        story: this.props.story,
        text: this.refs.newCommentInput.value,
      })
    );
    this.refs.newCommentInput.value = '';
  }
  render() {
    var {comments} = this.props.story;
    return (
      <form onSubmit={this._handleSubmit}>
        <h1>Breaking News</h1>
        <p>The peanut is neither a pea nor a nut.</p>
        <strong>Discuss:</strong>
        <ul>
          {comments.map(
            comment => <Comment comment={comment} />
          )}
        </ul>
        <input
          placeholder="Weigh in&hellip;"
          ref="newCommentInput"
          type="text"
        />
      </form>
    );
  }
}
export default Relay.createContainer(Story, {
  fragments: {
    story: () => Relay.QL`
      fragment on Story {
        comments {
          ${Comment.getFragment('comment')}, //here getting the error
        },
        ${CreateCommentMutation.getFragment('story')},
      }
    `,
  },
});
export default class StoryHomeRoute extends Relay.Route {
  static routeName = 'StoryHomeRoute';
  static queries = {
    story: (Component) => Relay.QL`
      query StoryQuery {
        story { ${Component.getFragment('story')} },
      }
    `,
  };
}


export class Root extends React.Component {

  render() {
    return (
      <Relay.RootContainer
        Component={ Story }
        route={ new StoryHomeRoute() } />
    );
  }
}

ReactDOM.render(
  <Root />,
  document.getElementById('container')
);

我的GraphQL模式 ：

import {
  GraphQLID,
  GraphQLList,
  GraphQLNonNull,
  GraphQLObjectType,
  GraphQLSchema,
  GraphQLString,
} from 'graphql';
import {
  mutationWithClientMutationId,
} from 'graphql-relay';

const STORY = {
  comments: [],
  id: '42',
};

var CommentType = new GraphQLObjectType({
  name: 'Comment',
  fields: () => ({
    id: {type: GraphQLID},
    text: {type: GraphQLString},
  }),
});

var StoryType = new GraphQLObjectType({
  name: 'Story',
  fields: () => ({
    comments: { type: new GraphQLList(CommentType) },
    id: { type: GraphQLString },
  }),
});

var CreateCommentMutation = mutationWithClientMutationId({
  name: 'CreateComment',
  inputFields: {
    text: { type: new GraphQLNonNull(GraphQLString) },
  },
  outputFields: {
    story: {
      type: StoryType,
      resolve: () => STORY,
    },
  },
  mutateAndGetPayload: ({text}) => {
    var newComment = {
      id: STORY.comments.length,
      text,
    };
    STORY.comments.push(newComment);
    return newComment;
  },
});

export var Schema = new GraphQLSchema({
  query: new GraphQLObjectType({
    name: 'Query',
    fields: () => ({
      story: {
        type: StoryType,
        resolve: () => STORY,
      },
    }),
  }),
  mutation: new GraphQLObjectType({
    name: 'Mutation',
    fields: () => ({
      createComment: CreateCommentMutation,
    }),
  }),
});

请任何人给我建议如何解决它，以及如何处理突变。 任何帮助，不胜感激。

Answer 1

我假设您已经将每个组件包含在自己的文件中，并且已经将它们全部合并在一起用于上面的示例？ 我还没有尝试过，但是看来您已经为Comment模块提供了多个默认导出。 每个模块只能有一个默认导出。 尝试从“导出默认类”中删除“导出默认”评论扩展了React.Component {”。 Relay.createContainer（）应该是您的默认导出，它是Comment类的包装器。

例如，我将有一个comment.js包含以下内容：

 import React from 'react'; import Relay from 'react-relay'; class Comment extends React.Component { render() { console.log("hai:"+this.props.comment) var {id, text} = this.props.comment; return <li key={id}>{text}</li>; } } export default Relay.createContainer(Comment, { fragments: { comment: () => Relay.QL` fragment on Comment { id, text, } `, }, });