Graphql 如何做样本图

我刚开始研究GraphQL中继，因为我想执行变异，但在我的控制台中会出现类似这样的错误

未捕获的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')
);

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

---

请任何人给我建议如何解决它，以及如何处理突变。非常感谢您的帮助。

我假设您已经将每个组件都包含在自己的文件中，并且您刚刚将它们连接在一起，用于上面的示例？我无法尝试此操作，但您似乎已经为注释模块提供了多个默认导出。每个模块只能有一个默认导出。尝试从“export default class Comment extends React.Component{”中删除“export default”。Relay.createContainer（）应该是您的默认导出，它是Comment类的包装器

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

从“React”导入React；
从“反应继电器”导入继电器；
类注释扩展了React.Component{
render（）{
log（“hai:+this.props.comment）
var{id，text}=this.props.comment；
返回
{text}
；
}
}
导出默认中继.createContainer（注释{
片段：{
注释：（）=>Relay.QL`
评论片段{
身份证件
文本，
}
`,
},
})；