RANGE_DELETE et RANGE_ADD sur les connexions avec les arguments

Question

J'essaie d'obtenir une mutation qui est un RANGE_DELETE sur une connexion, mais seulement sur les arguments spécifiés.

Scénario: l'utilisateur connecté, Viewer peut voir les demandes des autres utilisateurs et les approuver.

Le type User a un champ viewableRequests, qui est une connexion de relais, et avec un argument supplémentaire en option state, qui va filtrer les demandes et ne garder que l'une avec l'état correspondant.

Schéma:

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 
} 

Donc, si je l'appelle viewableRequests(state: pending), je reçois uniquement les demandes avec l'état d'attente, et si je l'appelle viewableRequests(state: approved), je reçois seulement les demandes avec l'état approuvé.

Comment puis-je écrire une mutation ApproveRequest qui fera une RANGE_DELETE sur la connexion viewableRequests(state: pending) et un RANGE_ADD sur la connexion viewableRequests(state: approved), et comment dois-je façonner la méthode getOptimisticResponse()?

Voici mon schéma de mutation:

type ApproveRequestInput { 
    requestId: ID 
} 

type ApproveRequestPayload { 
    viewer: User 
    approvedRequest: Request 
} 

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

Voici mon code actuel:

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

J'ai une configuration très similaire. Un utilisateur voit des cas dans l'état IN_PROGRESS jusqu'à ce qu'il les soumette. Quand il le fait, je veux qu'il passe de IN_PROGRESS à WAITING. Je viens à travailler en ayant les configs suivantes:

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

Je devine que le remplacement type(IN_PROGRESS) par votre state(pending) devrait fonctionner!