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模块的多个默认导出。每个模块只能有一个默认导出。尝试从“导出默认类注释extends React.Component {”中删除“export default”。 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,
      }
    `,
  },
});

如何进行示例GraphQL Relay变异

1 个答案: