# @apollo/client-integration-tanstack-start 中文文档

规范地址：https://npmcn.com/package/%40apollo/client-integration-tanstack-start/

版本：0\.14\.5-rc\.0
npm 元数据更新时间：2026-04-09T15:19:57.677Z
中文译文更新时间：2026-11-06T11:00:47.759Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40apollo/client-integration-tanstack-start
原文对照：https://npmcn.com/package/%40apollo/client-integration-tanstack-start/?lang=original
项目主页：https://github.com/apollographql/apollo-client-integrations#readme
源码仓库：https://github.com/apollographql/apollo-client-integrations

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：65 kB，9 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@apollo/client ^4\.0\.0，@tanstack/react-router ^1\.132\.47，@tanstack/react-start ^1\.132\.48，@tanstack/router-core ^1\.132\.47，graphql ^16 \|\| \>=17\.0\.0-alpha\.2，react ^19，react-dom ^19，rxjs ^7\.3\.0
- 首次发布：2025-02-12T17:36:43.880Z
- 最新版本发布：2026-04-09T15:19:57.052Z
- 近 30 天下载量：68678（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 4 个）

## 中文简介

这个软件包提供阿波罗客户端和TanStack Start之间的集成,支持现代流传的SS.

## 安装

```sh
npm install @apollo/client-integration-tanstack-start
```

也可以使用：`pnpm add @apollo/client-integration-tanstack-start`、`yarn add @apollo/client-integration-tanstack-start`、`bun add @apollo/client-integration-tanstack-start`

## README

# @ apollo/ 客户端- 整合- tanstack- start

这个软件包提供阿波罗客户端和TanStack Start之间的集成,支持现代流传的SS.

## 阿波罗客户端技能

给予你的AI特工阿波罗专业客户端知识和设置指导:

```sh
npx skills add apollographql/skills --skill apollo-client
```

## 设置

安装依赖性 :

```sh
npm i @apollo/client-integration-tanstack-start @apollo/client graphql
```

在你身边 `routes/__root.tsx`,从 `createRootRoute` 改为 `createRootRouteWithContext` 为您的应用程序提供正确的上下文类型.

```diff
+import type { ApolloClientIntegration } from "@apollo/client-integration-tanstack-start";
import {
-   createRootRoute
+   createRootRouteWithContext
} from "@tanstack/react-router";

-export const Route = createRootRoute({
+export const Route = createRootRouteWithContext<ApolloClientIntegration.RouterContext>()({
```

在你身边 `router.tsx`,设置您的阿波罗客户端实例并运行 `routerWithApolloClient`

```ts
import {
  routerWithApolloClient,
  ApolloClient,
  InMemoryCache,
} from "@apollo/client-integration-tanstack-start";
import { HttpLink } from "@apollo/client";
import { createRouter } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";

export function getRouter() {
  const apolloClient = new ApolloClient({
    cache: new InMemoryCache(),
    link: new HttpLink({ uri: "https://your.graphql.api" }),
  });
  const router = createTanStackRouter({
    routeTree,
    context: {
      ...routerWithApolloClient.defaultContext,
    },
  });

  return routerWithApolloClient(router, apolloClient);
}
```

> \[大  
> `ApolloClient` 财务报告和审定财务报表 `InMemoryCache` 需要从 `@apollo/client-integration-tanstack-start`,而不是从 `@apollo/client`。 。 。 .

## 使用量

### `loader` 与 `preloadQuery` 财务报告和审定财务报表 `useReadQuery`

```ts
import { useReadQuery } from "@apollo/client";
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/loader-defer")({
  component: RouteComponent,
  loader: ({ context: { preloadQuery } }) => {
    const queryRef = preloadQuery(QUERY, {
      variables: { myVariable: "myValue" },
    });
    return {
      queryRef,
    };
  },
});

function RouteComponent() {
  const { queryRef } = Route.useLoaderData();
  const { data } = useReadQuery(queryRef);

  return (
    <div> do something with `data` here </div>
  )
}
```

### `useSuspenseQuery`

也可以使用悬念的阿波罗客户端 api `useSuspenseQuery` (或 `useQueryRef` 财务报告和审定财务报表 `useReadQuery`直接进入组件而无需加载器:

```tsx
import { useSuspenseQuery } from "@apollo/client";
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/myPage")({
  component: RouteComponent,
});

function RouteComponent() {
  const { data } = useSuspenseQuery(QUERY);

  return <div> do something with `data` here </div>;
}
```

## 常见问题

### @apollo/client-integration-tanstack-start 是什么？

这个软件包提供阿波罗客户端和TanStack Start之间的集成,支持现代流传的SS\.

### 如何安装 @apollo/client-integration-tanstack-start？

在项目目录运行 npm install @apollo/client-integration-tanstack-start，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@apollo/client（^4\.0\.0）、@tanstack/react-router（^1\.132\.47）、@tanstack/react-start（^1\.132\.48）、@tanstack/router-core（^1\.132\.47）、graphql（^16 \|\| \>=17\.0\.0-alpha\.2）、react（^19）、react-dom（^19）、rxjs（^7\.3\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @apollo/client-integration-tanstack-start 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @apollo/client-integration-tanstack-start 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @apollo/client-integration-tanstack-start 可以商用吗？

@apollo/client-integration-tanstack-start 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @apollo/client-integration-tanstack-start 的下载量有多少？

根据 npm 官方下载统计，@apollo/client-integration-tanstack-start 在 2026/10/07 – 2026/11/05 这 30 天内被下载 68,678 次，日均约 2,289 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @apollo/client-integration-tanstack-start 还在维护吗？

最新版本 0\.14\.5-rc\.0 发布于 2026/04/09（6 个月前）；至今共发布 11 个版本，其中过去 12 个月发布了 4 个；首次发布于 2025/02/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。