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

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

阿波罗客户端技能

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

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

设置

安装依赖性 :

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

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

+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

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

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直接进入组件而无需加载器:

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>;
}