Apollo Angular 中的直接缓存访问

Posted 2023-03-08

【中文标题】Apollo Angular 中的直接缓存访问

【英文标题】：Direct Cache Access in Apollo Angular

【发布时间】：2017-12-08 10:06:48

【问题描述】：

我有以下服务等级：

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, mutationResult) => 
        proxy.writeQuery(
          query: DeleteUserMutation,
          data: 
            deleteUser: 
              id: userId,
              __typename: 'User'
            
          ,
          variables: 
            user_id: userId
          
        );
      ,
    )
  

我试图从我的服务器中删除一个用户。突变实际上在服务器上成功运行并执行，但缓存永远不会更新。我不确定上面的update 部分哪里出了问题。

【参考方案1】：

当此用户存在时，您尝试更新 Mutation 而不是 Query。

假设您有以下查询：

query allUsers 
  users: [User]

要更新缓存，您需要执行以下操作：

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
          
        );
      ,
    )
  

查看"Updating the Store" 章节，react-angular 文档中带有update() 函数的部分。这些规则也适用于 Angular。

【讨论】：

谢谢，我试试这个。但是，即使 allUsers 查询不是导致该用户列表首先出现在商店中的原始查询，这是否有效？

所以我试过了，答案是否定的……我想我需要的可以通过writeFragment解决呢？