Reactjs 普通阵列上的中继变异不工作

我很难弄清楚如何通过中继在普通阵列上进行突变

我正在尝试向帖子添加新标签。 在服务器端成功添加后，它不会在客户端得到更新

我必须手动重新加载才能看到新标签。 我尝试了

必需的\u CHILDREN

和

this.props.relay.forceFetch（）

此外，还尝试更改post的
字段

GraphQL模式：

Post {
  id: ID!
  text: String!
  tags: [Tag!]!
}

Tag {
  id: ID!
  name: String!
}

AddTagToPostMutation：

  static fragments = {
    post: () => Relay.QL`
      fragment on Post {
        id
        tags
      }
    `,
  }

  getMutation() {
    return Relay.QL`mutation { addTagToPost }`;
  }

  getVariables() {
    return {
      name: this.props.tag.name,
    };
  }

  getFatQuery() {
    return Relay.QL`
      fragment on AddTagToPostMutationPayload {
        tag {
          id
          name
        }
        post {
          id
          tags
        }
      }
    `;
  }

  getConfigs() {
    return [{
      type: 'REQUIRED_CHILDREN',
      children: [Relay.QL`
        fragment on AddTagToPostMutationPayload {
          tag {
            id
            name
          }
          post {
            id
            tags
          }
        }
      `],
    }];
  }

  getOptimisticResponse() {
    return {
      tag: {
        name: this.props.tag.name,
      },
      post: {
        id: this.props.post.id,
      },
    };
  }

我认为在这种情况下，你应该使用字段

  getConfigs() {
    return [{
      type: 'FIELDS_CHANGE',
      fieldIDs: {post: this.props.post.id},
    }];
  }

  getOptimisticResponse() {
    return {
      post: {
        id: this.props.post.id,
        tags: [...this.props.post.tags, this.props.tag],
      },
    };
  }

我认为在这种情况下，你应该使用字段

  getConfigs() {
    return [{
      type: 'FIELDS_CHANGE',
      fieldIDs: {post: this.props.post.id},
    }];
  }

  getOptimisticResponse() {
    return {
      post: {
        id: this.props.post.id,
        tags: [...this.props.post.tags, this.props.tag],
      },
    };
  }

正如freiksenet已经指出的那样，
FIELDS\u CHANGE
应该在
getConfigs（）函数中使用。我采用了您的模式，实现了GraphQL类型、服务器端和客户端变异，以向帖子添加标记。客户端已成功更新。我将在回答中详细说明解决方案

首先，检查您的服务器端。我的实现使用和库，如下所示。请注意，服务器端变体的输出是添加了标记的post。这篇文章的ID是作为输入提供的

const AddTagToPostMutation = mutationWithClientMutationId({
  name: 'AddTagToPost',
  inputFields: {
    postId: { type: new GraphQLNonNull(GraphQLID) },
    name: { type: new GraphQLNonNull(GraphQLString) },
  },
  outputFields: {
    post: {
      type: PostType,
      resolve: ({id}) => getPost(id),
    },
  },
  mutateAndGetPayload: ({postId, name}) => {
    const id = fromGlobalId(postId).id;
    addTagToPost(id, name);
    return {id};
  },
});

使用，您可以测试您的突变：

mutation {
  addTagToPost(input:{
      postId: "UG9zdDpwb3N0Mg==" 
      name:"a new tag name" 
      clientMutationId:"123244"}) {
    post {
      id
      text
      tags {
        id
        name
      }
    }
  }
}

我为根查询中的所有帖子添加了一个字段
posts
。使用，我首先检查了post ID并使用了上面的一个ID

使用，客户端变异代码如下所示。它被传递一个prop
post
，其ID用作
getVariables（）
函数中的输入变量。在
getConfigs（）
函数中，我们指定必须更新
post
字段。有效载荷字段
post
和传递的属性
post
之间的关联是使用
FIELDS\u CHANGE
突变类型建立的

export default class AddTagToPostMutation extends Relay.Mutation {
  getMutation() {
    return Relay.QL`mutation{addTagToPost}`;
  }

  getVariables() {
    return {
      postId: this.props.post.id,
      name: this.props.name,
    };
  }

  getFatQuery() {
    return Relay.QL`
      fragment on AddTagToPostPayload {
        post {
          id,
          tags {
            id,
            name,
          }
        }
      }
    `;
  }

  getConfigs() {
    return [{
      type: 'FIELDS_CHANGE',
      fieldIDs: {
        post: this.props.post.id,
      },
    }];
  }

  static fragments = {
    post: () => Relay.QL`
      fragment on Post {
        id,
      }
    `,
  };
}

客户端变异的调用方式如下：

Relay.Store.commitUpdate(new AddTagToPostMutation({
      post: postToModify,
      name: tagName,
    }));

正如freiksenet已经指出的那样，
FIELDS\u CHANGE
应该在
getConfigs（）函数中使用。我采用了您的模式，实现了GraphQL类型、服务器端和客户端变异，以向帖子添加标记。客户端已成功更新。我将在回答中详细说明解决方案

首先，检查您的服务器端。我的实现使用和库，如下所示。请注意，服务器端变体的输出是添加了标记的post。这篇文章的ID是作为输入提供的

const AddTagToPostMutation = mutationWithClientMutationId({
  name: 'AddTagToPost',
  inputFields: {
    postId: { type: new GraphQLNonNull(GraphQLID) },
    name: { type: new GraphQLNonNull(GraphQLString) },
  },
  outputFields: {
    post: {
      type: PostType,
      resolve: ({id}) => getPost(id),
    },
  },
  mutateAndGetPayload: ({postId, name}) => {
    const id = fromGlobalId(postId).id;
    addTagToPost(id, name);
    return {id};
  },
});

使用，您可以测试您的突变：

mutation {
  addTagToPost(input:{
      postId: "UG9zdDpwb3N0Mg==" 
      name:"a new tag name" 
      clientMutationId:"123244"}) {
    post {
      id
      text
      tags {
        id
        name
      }
    }
  }
}

我为根查询中的所有帖子添加了一个字段
posts
。使用，我首先检查了post ID并使用了上面的一个ID

使用，客户端变异代码如下所示。它被传递一个prop
post
，其ID用作
getVariables（）
函数中的输入变量。在
getConfigs（）
函数中，我们指定必须更新
post
字段。有效载荷字段
post
和传递的属性
post
之间的关联是使用
FIELDS\u CHANGE
突变类型建立的

export default class AddTagToPostMutation extends Relay.Mutation {
  getMutation() {
    return Relay.QL`mutation{addTagToPost}`;
  }

  getVariables() {
    return {
      postId: this.props.post.id,
      name: this.props.name,
    };
  }

  getFatQuery() {
    return Relay.QL`
      fragment on AddTagToPostPayload {
        post {
          id,
          tags {
            id,
            name,
          }
        }
      }
    `;
  }

  getConfigs() {
    return [{
      type: 'FIELDS_CHANGE',
      fieldIDs: {
        post: this.props.post.id,
      },
    }];
  }

  static fragments = {
    post: () => Relay.QL`
      fragment on Post {
        id,
      }
    `,
  };
}

客户端变异的调用方式如下：

Relay.Store.commitUpdate(new AddTagToPostMutation({
      post: postToModify,
      name: tagName,
    }));

我也尝试过字段更改，但也不起作用。@Joon你能检查一下从变异请求中实际返回到中继的服务器是什么吗（你可以使用React-Dev工具或chrome网络选项卡）？您是否看到乐观的响应开始时会“闪烁”，好像先添加一个标记，然后删除？我也尝试了字段更改，但也不起作用。@Joon您能检查一下从变异请求中实际返回中继的服务器是什么吗（您可以使用React-Dev工具或chrome网络选项卡）？你是否看到乐观的反应开始时会“眨眼”，好像先添加标签，然后删除？