Как сделать пример мутации в GraphQL Relay

Question

Я только начал работать над GraphQL Relay в том, что я хочу выполнить мутацию, но она выдает такую ​​ошибку в моей консоли

Uncaught 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. Вы можете иметь только один экспорт по умолчанию для каждого модуля. Попробуйте удалить "экспорт по умолчанию" из "класса экспорта по умолчанию. Комментарий extends React.Component {". Relay.createContainer() должен быть вашим экспортом по умолчанию, это обертка вокруг класса 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,
      }
    `,
  },
});