RANGE_DELETE 和 RANGE_ADD 与参数的连接

Question

我正在尝试在连接上实现一个 RANGE_DELETE 突变，但仅限于指定的参数。

场景：登录用户Viewer可以看到其他用户的请求并批准它们。

User 类型有一个字段viewableRequests，它是一个中继连接，并带有一个额外的可选参数state，它将过滤请求并只保留具有相应状态的请求。

架构：

type User {
  id: ID
  viewableRequests(first: Int, [...], state: RequestStateEnum): ViewableRequestsConnection
}

type ViewableRequestsConnection {
  edges: [RequestEdge]
  ...
}

type RequestEdge {
  cursor: GraphQLString
  node: Request
}

type Request {
  id: ID
  user_id: Int
  state: RequestStateEnum
}

enum RequestStateEnum {
  pending
  approved
}

所以如果我调用viewableRequests(state: pending)，我只会收到处于待处理状态的请求，如果我调用viewableRequests(state: approved)，我只会收到处于已批准状态的请求。

我如何编写一个ApproveRequest 突变，它将在viewableRequests(state: pending) 连接上执行RANGE_DELETE，并在viewableRequests(state: approved) 连接上执行RANGE_ADD，以及我应该如何塑造getOptimisticResponse() 方法？

这是我的变异模式：

type ApproveRequestInput {
  requestId: ID
}

type ApproveRequestPayload {
  viewer: User
  approvedRequest: Request
}

mutation {
  approveRequest($input: ApproveRequestInput): ApproveRequestPayload
}

这是我当前的代码：

import Relay, {
  Mutation,
} from 'react-relay';

export default class ApproveRequestMutation extends Mutation {
  static fragments = {
    viewer: () => Relay.QL`
      fragment on User {
        id
      }
    `,
    request: () => Relay.QL`
      fragment on Request {
        id
      }
    `,
  };

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

  getVariables() {
    return {
      requestId: this.props.request.id,
    };
  }

  getFatQuery() {
    return Relay.QL`
      fragment on ApproveRequestPayload @relay(pattern: true) {
        viewer {
          pendingRequests: viewableRequests(state: pending)
          approvedRequests: viewableRequests(state: approved)
        }
        approvedRequest
      }
    `;
  }

  getOptimisticResponse() {
    return {
      // What should I write here ?
    };
  }

  getConfigs() {
    // The RANGE_DELETE config is not working ; how can I make it work ?
    return [{
      type: 'RANGE_DELETE',
      parentName: 'viewer',
      parentID: this.props.viewer.id,
      connectionName: 'pendingRequests',
      deletedIDFieldName: ['approvedRequest'],
      pathToConnection: ['viewer', 'pendingRequests'],
    }];
    // How can I can add here a RANGE_ADD config for the `approvedRequests` connection ?
    // I guess I must add an `approvedRequestEdge` on the mutation payload, but what is the config then ?
  }

}

Answer 1

我有一个非常相似的设置。一位用户在提交之前看到处于IN_PROGRESS 状态的案例。当他这样做时，我希望它从IN_PROGRESS 移动到WAITING。我刚刚通过以下配置让它工作：

return [
  {
    type: "FIELDS_CHANGE",
    fieldIDs: {
      case: this.props.caseId
    }
  },
  {
    type: "RANGE_ADD",
    parentName: "viewer",
    parentID: this.props.viewer.__dataID__, // eslint-disable-line
    connectionName: "cases",
    edgeName: "case",
    rangeBehaviors: {
      "": "refetch",
      "type(IN_PROGRESS)": "remove",
      "type(WAITING)": "prepend"
    }
  }
];

我猜想用你的 state(pending) 替换 type(IN_PROGRESS) 应该可以！