Apollo Client+Angular5+Graphcool创建项目后列表不显示问题

嘿，咱们一步步来搞定这个问题！首先你遇到的在(ROOT_QUERY)对象上找不到字段allProjects({"first":5,"skip":0,"orderBy":"updatedAt_DESC"})错误是核心问题，得先把这个解决掉，再处理订阅相关的逻辑。

第一步：修复GraphQL查询字段错误 #

这个错误说明你的查询里的allProjects字段在Graphcool的Schema中不存在，或者参数不匹配：

• 先打开Graphcool的Playground，手动执行这个查询，看看是否能正常返回结果。如果Playground也报错，那肯定是Schema的问题：
  • 检查Schema里的查询字段名，是不是叫projects而不是allProjects？很多Graphcool项目默认的列表查询字段是模型的复数形式，比如你的模型是Project，那查询字段可能是projects而非allProjects。
  • 确认orderBy的枚举值是否正确，比如updatedAt_DESC是不是在Schema的枚举定义里，有没有拼写错误（比如大小写、下划线格式）。
• 调整你的查询字段和参数，确保和Graphcool Schema完全匹配，这是列表能正常加载的基础。

第二步：确保订阅能正确更新缓存 #

即使订阅了createProject事件，Apollo Client可能不会自动把新数据合并到现有缓存里，你需要手动处理缓存更新：

• 先确认订阅是否真的触发了：打开浏览器的Network面板，切换到WebSocket标签，看看有没有收到createProject的消息。如果没收到，检查订阅的Query是否正确，Graphcool的订阅权限有没有配置好。
• 在订阅的回调里，手动更新allProjects的缓存。示例代码如下：

// 假设你的订阅Query是CREATE_PROJECT_SUBSCRIPTION，列表查询是ALL_PROJECTS_QUERY
this.apollo.subscribe({
  query: CREATE_PROJECT_SUBSCRIPTION
}).subscribe(({ data }) => {
  const newProject = data.createProject;
  // 读取当前缓存中的项目列表
  const currentProjects = this.apollo.getClient().readQuery({
    query: ALL_PROJECTS_QUERY,
    variables: { first: 5, skip: 0, orderBy: 'updatedAt_DESC' }
  });
  // 把新项目添加到列表开头（因为是按updatedAt降序排列）
  currentProjects.allProjects.unshift(newProject);
  // 将更新后的数据写回缓存
  this.apollo.getClient().writeQuery({
    query: ALL_PROJECTS_QUERY,
    variables: { first: 5, skip: 0, orderBy: 'updatedAt_DESC' },
    data: currentProjects
  });
}, (error) => {
  console.error('订阅失败:', error);
});

• 你也可以在创建项目的Mutation里，通过update函数直接更新缓存，这样不用依赖订阅也能立即更新列表：

this.apollo.mutate({
  mutation: CREATE_PROJECT_MUTATION,
  variables: { /* 你的项目参数 */ },
  update: (cache, { data: { createProject } }) => {
    // 读取当前缓存
    const data = cache.readQuery({
      query: ALL_PROJECTS_QUERY,
      variables: { first: 5, skip: 0, orderBy: 'updatedAt_DESC' }
    });
    // 添加新项目到列表
    data.allProjects.unshift(createProject);
    // 写回缓存
    cache.writeQuery({
      query: ALL_PROJECTS_QUERY,
      variables: { first: 5, skip: 0, orderBy: 'updatedAt_DESC' },
      data
    });
  }
}).subscribe(() => {
  this.router.navigate(['/projects']);
});

第三步：确认重定向时机正确 #

要确保创建项目的Mutation完全成功后，再重定向到列表页。如果在Mutation还没完成就跳转，缓存还没更新，自然看不到新项目。所以一定要把重定向逻辑放在Mutation的成功回调里，就像上面代码里那样。

按照这个步骤一步步排查，应该就能解决新项目不显示的问题啦！

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