Apollo Link State默认解析器异常：@client查询参数变量未生效

我完全懂你遇到的困扰——你给带@client指令的todos查询传了id变量，但默认解析器根本没把这个参数用上，不管传什么id，返回的都是全部待办项，完全起不到筛选作用。

问题出在哪？ #

Apollo Client的默认本地解析器只会傻愣愣返回缓存里对应字段的所有数据，它没有内置的参数筛选逻辑。也就是说，你定义了带参数的查询，但默认解析器不知道该怎么用这个id去过滤你的todos数组。

搞定它的方法：自定义本地解析器 #

你得手动写一个解析器，告诉Apollo Client怎么根据传入的id参数去筛选本地缓存里的todos。具体步骤如下：

1. 添加自定义解析逻辑到缓存配置
   在创建InMemoryCache的时候，通过typePolicies给Query类型的todos字段指定解析规则：

   const cache = new InMemoryCache({
     typePolicies: {
       Query: {
         fields: {
           todos(_, { args, cache }) {
             // 先从缓存读取全部todos数据
             const allTodos = cache.readQuery({
               query: gql`
                 query GetAllTodos {
                   todos @client {
                     id
                     text
                   }
                 }
               `
             }).todos;
             // 根据传入的id参数做筛选
             return args.id ? allTodos.filter(todo => todo.id === args.id) : allTodos;
           }
         }
       }
     }
   });
   

2. 保留你原有的查询和变量传递
   你之前写的查询语句和<Query>组件的变量传递是没问题的，继续用就行：

   const GET_TODOS = gql`
     query todos($id: Int!) {
       todos(id: $id) @client {
         id
         text
       }
     }
   `;
   

   <Query query={GET_TODOS} variables={{ id: 1 }}>
     {/* 你的渲染逻辑 */}
   </Query>
   

补充说明 #

官方文档说“支持参数”，其实是指Apollo Client允许你在本地查询里定义参数，但不会自动帮你实现筛选逻辑——你得自己告诉它怎么处理这些参数。默认解析器只是直接返回缓存中该字段的全部数据，不会做任何过滤操作。

这样修改之后，你的查询就能根据传入的id参数精准筛选出对应的待办项了。

内容的提问来源于stack exchange，提问作者Webber