如何进行示例 GraphQL Relay 突变

Posted 2023-03-08

【中文标题】如何进行示例 GraphQL Relay 突变

【英文标题】：How to do the sample GraphQL Relay mutation

【发布时间】：2016-05-30 12:21:38

【问题描述】：

我刚刚开始使用 GraphQL Relay，因为我想执行突变，但它在我的控制台中给出了这样的错误

未捕获的类型错误：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,
    ),
  ),
);

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

【参考方案1】：

我假设您已经将每个组件都放在了它自己的文件中，并且您刚刚将它们全部连接到了上面的示例中？我无法尝试此操作，但看起来您为 Comment 模块提供了多个默认导出。每个模块只能有一个默认导出。尝试从“export default class 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,
      
    `,
  ,
);