Uncaught TypeError: Cannot read property 'id' of undefined in getConfigs()

[dsdharam91]

schema file:

var GraphQL = require('graphql')
var GraphQLRelay = require('graphql-relay')

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

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

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

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

module.exports = new GraphQL.GraphQLSchema({
  query: new GraphQL.GraphQLObjectType({
    name: 'Query',
    fields: () => ({
      story: {
        type: StoryType,
        resolve: () => STORY,
      },
    }),
  }),
  mutation: new GraphQL.GraphQLObjectType({
    name: 'Mutation',
    fields: () => ({
      createComment: CreateCommentMutation,
    }),
  }),
});

compoent file

var React = require('react') // eslint-disable-line no-unused-vars
var ReactDOM = require('react-dom')
var Relay = require('react-relay') // eslint-disable-line no-unused-vars

Relay.injectNetworkLayer(
  new Relay.DefaultNetworkLayer('http://localhost:3000/graphql', {
    headers: {
      'Content-Type': 'application/json',
    },
  })
);

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

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

class Story extends React.Component {
      constructor(props) {
        super(props);
        this._handleSubmit = this._handleSubmit.bind(this);
  }

  _handleSubmit(e){
    e.preventDefault();
      Relay.Store.commitUpdate(
      new CreateCommentMutation({
        story: this.props.story,
        text: this.refs.newCommentInput.value,
      })
    );
    this.refs.newCommentInput.value = '';
  }

  render() {
    var {comments} = this.props.story;
    return (
      <form id="myform" action="" onSubmit={this._handleSubmit}>
        <h1>Breaking News</h1>
        <p>The peanut is neither a pea nor a nut.</p>
        <strong>Discuss:</strong>
        <ul>

         { comments.map(function(comment,index) {

                    return <Comment key ={index} 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')},
        },
        ${CreateCommentMutation.getFragment('story')},
      }
    `,
  },
});

[dsdharam91]

trying to add comment by using mutation.comment added but does not reflect on the client store

[denvned]

I suggest to ask this question on StackOverflow. Also this question doesn't seem directly related to isomorphic-relay, but rather to Relay in general.

[jkettmann]

I also had this problem. I use isomorphic-relay together with isomorphic-relay-router. For me using this.props.relay.commitUpdate(...) instead of Relay.Store.commitUpdate(...) solved the problem.