如何在 apollo 客户端策略中使用 readField 来选择具有参数的查询

Posted 2023-03-08

【中文标题】如何在 apollo 客户端策略中使用 readField 来选择具有参数的查询

【英文标题】：How to use readField in apollo client polices for sub selecting a query that has arguments

【发布时间】：2021-10-16 01:22:39

【问题描述】：

使用@apollo/client 3.4.7

我一直在关注 Dan Reynolds https://www.apollographql.com/blog/apollo-client/architecture/redux-to-apollo-data-access-patterns/ 的这篇很棒的博客，它解释了从 Redux 世界到 Apollo GraphQL 世界的转变。 Redux 的一个不错的部分是能够使用选择器从您的状态中选择部分数据。在 Apollo 领域，您可以运行查询，但有时您已经拥有数据并且只需要其中的一个子集。该博客详细介绍了您可以执行以下操作：

const schema: TypePoliciesSchema = 
  typeDefs: gql`
    extend type Query 
      readManagers: [Employee!]!
    
  `,
  typePolicies: 
    Query: 
      fields: 
        readManagers: 
          read(employees, context) 
            const employees = readField<Query, 'readEmployees'>(context, 'readEmployees');

            return employees.filter(employeeRef => 
              const employeeRole = readField<Employee, 'role'>(context, 'role', employeeRef);
              return employeeRole === EmployeeRole.Manager;
            );
          ,
        
      
    
  

这是基于一个简单的 GraphQL 查询：

query GetEmployees 
  employees 
    id
    name
    role
    team
  

我的问题是，当您的查询有参数时，如何获得查询结果：

query GetEmployees($companyId: ID!) 
  employees(companyId: $companyId) 
    id
    name
    role
    team
  

您突然无法访问 readEmployees，因为缓存键现在类似于 readEmployees("companyId": "uuid")？

我很感激您可能还必须设置 readManagers 查询以使用参数，以获得相同的 ID 才能进行子选择。我尝试手动伪造查询键以匹配，但没有成功。

我目前的工作是使用上下文中的缓存并运行相同的查询，并且许多使用 toReference 将它们转换为引用：

const schema: TypePoliciesSchema = 
  typeDefs: gql`
    extend type Query 
      readManagers: [Employee!]!
    
  `,
  typePolicies: 
    Query: 
      fields: 
        readManagers: 
          read(employees, context) 
            const employees = context.cache.readQuery('readEmployees',  variables:  companyId: context.args.companyId || context.variables.companyId   );
            return employees.filter(employeeRef => 
              const employeeRole = readField<Employee, 'role'>(context, 'role', employeeRef);
              return employeeRole === EmployeeRole.Manager;
            );
          ,
        
      
    
  

这感觉不是最好的解决方案，而且感觉像是读取缓存的子选择的大量样板。

【问题讨论】：

将参数添加到扩展查询 (readManagers) ?

我在工作中，我已经使用上下文中的 args 将变量提供给内部 readQuery。我的问题是关于如何使用 readField，但我的印象是，除非您使用基本的 graphql 查询，否则这是不可能的。

【参考方案1】：

根据github issue 的回答，您可以使用另一种形式的 readField 函数，它接受对象。 然后你可以在你的类型策略定义中使用它来读取带有参数的数据

 users: 
        read(users,  args, readField ) 
             const  where:  id   = args;

             const users = readField(
                fieldName: 'Users',
                args:  where:  id  ,
              );

             return users;
        ,