Direkt Cache Access in Apollo Angular

Question

Ich habe die folgende Service-Klasse:

const DeleteUserMutation = gql ` 
 
\t mutation($user_id: ID!) { 
 
\t \t deleteUser(id: $user_id) { 
 
\t \t \t id 
 
\t \t } 
 
\t } 
 
`; 
 

 
@Injectable() 
 
export class UserService { 
 
    constructor(private apollo: Apollo) {} 
 

 
    deleteUser(userId: string) { 
 
    return this.apollo.mutate({ 
 
     mutation: DeleteUserMutation, 
 
     variables: { 
 
     user_id: userId 
 
     }, 
 
     update: (proxy, mutationResult) => { 
 
     proxy.writeQuery({ 
 
      query: DeleteUserMutation, 
 
      data: { 
 
      deleteUser: { 
 
       id: userId, 
 
       __typename: 'User' 
 
      } 
 
      }, 
 
      variables: { 
 
      user_id: userId 
 
      } 
 
     }); 
 
     }, 
 
    }) 
 
    } 
 
}

wobei ich versuche, einen Benutzer von meinem Server zu löschen. Die Mutation funktioniert tatsächlich und wird erfolgreich auf dem Server ausgeführt, aber der Cache wird nie aktualisiert. Ich bin mir nicht sicher, wo ich mit meinem update Teil oben falsch liege.

Answer 1

Sie versuchen, eine Mutation anstelle einer Query zu aktualisieren, wenn dieser Benutzer lebt.

Angenommen, Sie haben diese Anfrage:

query allUsers { 
    users: [User] 
} 

den Cache aktualisieren Sie so etwas wie dies tun möchte:

const DeleteUserMutation = gql ` 
    mutation($user_id: ID!) { 
     deleteUser(id: $user_id) { 
      id 
     } 
    } 
`; 

@Injectable() 
export class UserService { 
    constructor(private apollo: Apollo) {} 

    deleteUser(userId: string) { 
    return this.apollo.mutate({ 
     mutation: DeleteUserMutation, 
     variables: { 
     user_id: userId 
     }, 
     update: (proxy, { data: { deleteUser } }) => { 
     // Get data from `allUsers` query 
     const data = proxy.readQuery({ 
      query: AllUsersQuery 
     }); 

     // Logic to remove an item from an array 
     const users = removeUserFromArray(deleteUser.id, data.users); 

     // write new array with users to the store 
     proxy.writeQuery({ 
      query: AllUsersQuery, 
      data: { 
      users 
      } 
     }); 
     }, 
    }) 
    } 
} 

Werfen Sie einen Blick auf die "Updating the Store" Kapitel, das Teil mit update() Funktion in react-angular Dok. Diese Regeln gelten auch für Angular.