graphql - 带参数的连接上的 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:ending)，我只会收到处于待处理状态的请求，如果我调用 viewableRequests(state:approved)，我只会收到处于挂起状态的请求。获取状态已批准的请求。

如何编写一个 ApproveRequest 突变，对 viewableRequests(state:ending) 连接执行 RANGE_DELETE，并在 viewableRequests(state) 上执行 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) 应该可以!