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和RANGE_ADD的viewableRequests(state: approved)連接上了，我應該怎麼塑造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。我剛剛拿到了它具有下列CONFIGS工作：

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)應該努力！