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"
    }
  }
];

我猜你的type(IN_PROGRESS)取代state(pending)应该有效！

与参数的连接上的RANGE_DELETE和RANGE_ADD

1 个答案: