@apollo/ 客户端- 整合- 反应- 路由器

这个软件包提供阿波罗客户端和React Router 7之间的集成,以支持现代流式SSSR.

阿波罗客户端技能

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

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

设置

安装依赖性 :

npm i @apollo/client-integration-react-router @apollo/client graphql

创建一个 app/apollo.ts 出口额a makeClient 函数和一个 apolloLoader 创建于 createApolloLoaderHandler数字 :

import { ApolloLink, HttpLink, InMemoryCache } from "@apollo/client";
import {
  createApolloLoaderHandler,
  ApolloClient,
} from "@apollo/client-integration-react-router";

// `request` will be available on the server during SSR or in loaders, but not in the browser
export const makeClient = (request?: Request) => {
  return new ApolloClient({
    cache: new InMemoryCache(),
    link: new HttpLink({ uri: "https://your.graphql.api" }),
  });
};
export const apolloLoader = createApolloLoaderHandler(makeClient);

[大
ApolloClient 需要从 @apollo/client-integration-react-router,而不是从 @apollo/client。 。 。 .

运行 yarn react-router reveal创建文件 app/entry.client.tsx 财务报告和审定财务报表 app/entry.server.tsx。 。 。 .

调整 app/entry.client.tsx数字 :

+import { makeClient } from "./apollo";
+import { ApolloProvider } from "@apollo/client";

startTransition(() => {
+ const client = makeClient();
  hydrateRoot(
  document,
  <StrictMode>
+    <ApolloProvider client={client}>
       <HydratedRouter />
+    </ApolloProvider>
  </StrictMode>
  );
});

调整 app/entry.server.tsx数字 :

+import { makeClient } from "./apollo";
+import { ApolloProvider } from "@apollo/client";

export default function handleRequest(
  // ...
) {
  return new Promise((resolve, reject) => {
  // ...
+ const client = makeClient(request);
  const { pipe, abort } = renderToPipeableStream(
+   <ApolloProvider client={client}>
      <ServerRouter
        context={routerContext}
        url={request.url}
        abortDelay={ABORT_DELAY}
      />,
+   </ApolloProvider>,
    {
      [readyOption]() {
        shellRendered = true;

添加 <ApolloHydrationHelper> 改为 app/root.tsx

+ import { ApolloHydrationHelper } from "@apollo/client-integration-react-router";

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      // ...
      <body>
-        {children}
+        <ApolloHydrationHelper>{children}</ApolloHydrationHelper>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

使用量

使用 apolloLoader 与 useReadQuery

你现在可以使用 apolloLoader 函数以创建阿波罗启用的加载器:

export const loader = apolloLoader<Route.LoaderArgs>()(({ preloadQuery }) => {
  const myQueryRef = preloadQuery(MY_QUERY, {
    variables: { someVariable: 1 },
  });
  return {
    myQueryRef,
  };
});

[大
要向您提供更好的类型脚本支持, 您需要两次调用此方法 : apolloLoader<LoaderArgs>()(loader)

那你可以吃这个 myQueryRef 对象为 useReadQuery 在组件中:

export default function Home() {
  const { myQueryRef } = useLoaderData<typeof loader>();

  const { data } = useReadQuery(myQueryRef);

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