当这些变量被删除时，如何停止获取所需导出变量的 Apollo GraphQL 查询答案

【问题标题】：How can I stop an Apollo GraphQL query with required exported variables from fetching when those variables are removed当这些变量被删除时，如何停止获取所需导出变量的 Apollo GraphQL 查询
【发布时间】：2021-02-04 01:23:09
【问题描述】：

问题

当导航离开使用应用程序路由的状态作为必需变量的查询组件时，我得到了 GraphQL 的排序错误：

所需类型“ID！”的变量“$analysisId”没有提供。

“导航离开”意味着，例如，去

来自：/analysis/analysis-1/analyse/
至：/user-profile/

背景

我正在使用 Apollo GraphQL 构建一个 SPA，并且我有一些遵循这种模式的查询：

query Analyse($analysisId: ID!) {
  location @client {
    params {
      analysisId @export(as: "analysisId")
    }
  }

  analysis(analysisId: $analysisId) {
    id
    # ... etc
  }
}

location 字段表示 SPA 路由器的状态。该状态保存在 Apollo 客户端“反应变量”中。查询组件被编程为不会开始订阅查询，除非该反应变量存在并且具有所需的内容。

shouldSubscribe(): boolean {
  return !!(locationVar()?.params?.analysisId);
}

Params 表示 express 样式的 URL 参数，所以路由路径为/analysis/:analysisId/analyse。

如果用户导航到/analysis/analysis-1/analyse，则查询组件的variables 变为：{ analysisId: "analysis-1" }`。这在加载组件时工作正常。

我认为正在发生的事情

当组件连接到 DOM 时，它会检查路由器状态中是否存在所需的变量，如果存在，它会创建一个 ObservableQuery 并订阅。

后来，当用户离开时，ObservableQuery 仍然订阅更新，而客户端字段 location.params.analysisId 导出的所需 analysisId 变量突然无效。

我认为由于ObservableQuery 仍然被订阅，它发送带有空analysisId 变量的查询，即使它是必需的。

我的尝试

通过中断我的query component base class 中的每个方法，我有理由确定组件基类没有错误 - 没有证据表明它在路由更改时重新获取组件。相反，我认为这发生在 apollo 客户端内部。

我或许可以将查询的架构从 analysis(analysisId: ID!): Analysis 更改为 analysis(analysisId: ID): Analysis，但这似乎是迂回的，因为我可能无法控制服务器。

当 apollo 客户端有所需的变量但它们不存在时，如何防止它尝试获取查询？

【问题讨论】：

标签： graphql single-page-application apollo-client

【解决方案1】：

到目前为止，这似乎工作正常，在我的 HttpLink 中，src/apollo/link/http.ts：

import { ApolloLink, from } from '@apollo/client/link/core';
import { HttpLink } from '@apollo/client/link/http';
import { hasAllVariables } from '@apollo-elements/lib/has-all-variables';

const uri =
  'GRAPHQL_HOST/graphql';

export const httpLink = from([
  new ApolloLink((operation, forward) => {
    if (!hasAllVariables(operation))
      return;
    else
      return forward(operation);
  }),
  new HttpLink({ uri }),
]);

【讨论】：