Apollo Angular 中的直接缓存访问

Question

我有以下服务等级：

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 部分哪里出了问题。

Answer 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。