How to do the sample GraphQL Relay mutation

Question

I am just started working on GraphQL Relay in that I want to perform the mutation but it gives an error like this in my console

Uncaught TypeError: Comment.getFragment is not a function

Here is my Relay code :

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')
);

my GraphQL schema :

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

Please any one give me suggestions how to resolve it, and how to work on mutations. Any help much appreciated.

Answer 1

I'm assuming you've got each component in it's own file and you've just joined them all together for your sample above? I haven't been able to try this, but it looks like you've got multiple default exports for the Comment module. You can only have one default export per module. Try removing the "export default" from "export default class Comment extends React.Component {". The Relay.createContainer() should be your default export, it's a wrapper around the Comment class.

For example, I'd have a comment.js containing the following:

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