Vue3中Apollo GraphQL响应式查询报Invalid AST Node如何解决

• 抛出Invalid AST Node错误的直接原因是query()回调返回值不符合配置规则。Apollo Vue 中query配置项如果传入函数，该函数仅需要返回gql编译生成的GraphQL Document节点，你当前将包含query、loadingKey的完整配置对象作为query()的返回值，Apollo会把这个普通对象当成AST节点做合法性校验，自然抛出类型错误——你看到的报错信息里打印的非法节点内容，和你写在query()里的返回结构完全一致。
• 双查询+skip切换不触发请求的原因是skip没有写成响应式函数形式。如果直接给skip传静态布尔值，Apollo只会在组件初始化时计算一次跳过状态，后续不会追踪checked的变更，自然不会在状态切换时重新发起查询。

方案1：单查询配置动态切换语句（推荐） #

这是官方响应式查询定义支持的标准写法，将loadingKey、update等配置和query字段平级放置，query()函数只返回对应状态下的gql文档即可：

apollo: {
  getTags: getTags,
  getPhotos: {
    // 仅返回gql编译后的文档，不要包裹其他配置
    query() {
      return this.checked ? getPhotos : getPhotosByTag
    },
    loadingKey: "loading",
    // 原写法data.getPhotos || data.getPhotos为无效重复判断，直接取值即可
    update: (data) => data.getPhotos,
  }
},

方案2：双查询配置+skip动态切换 #

如果要拆分两个独立查询，必须将skip配置为依赖响应式状态的函数，让Apollo可以追踪到checked的变化，在状态变更时自动重新计算跳过逻辑、发起对应请求：

apollo: {
  getTags: getTags,
  // 全量照片查询
  allPhotos: {
    query: getPhotos,
    loadingKey: "loading",
    skip() {
      // checked为false时跳过该查询
      return !this.checked
    },
    update: (data) => data.getPhotos,
  },
  // 标签筛选照片查询
  tagPhotos: {
    query: getPhotosByTag,
    loadingKey: "loading",
    skip() {
      // checked为true时跳过该查询
      return this.checked
    },
    update: (data) => data.getPhotos,
  }
},

注意：使用双查询方案时，建议通过计算属性统一合并两个查询的返回结果，避免切换时出现数据闪烁；如果切换后仍不触发请求，先检查checked是否已经在data()中声明初始值，确保v-model绑定的是组件实例上的响应式属性，而非未挂载的全局变量。

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