Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@apollo/client-integration-react-router

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@apollo/client-integration-react-router

This package provides integrations between Apollo Client and React Router 7 to support modern streaming SSR.

Source
npmnpm
Version
0.14.0-alpha.0
Version published
Weekly downloads
1.5K
140.56%
Maintainers
1
Weekly downloads
 
Created
Source

@apollo/client-integration-react-router

This package provides integrations between Apollo Client and React Router 7 to support modern streaming SSR.

Setup

Install dependencies:

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

Create an app/apollo.ts with that exports a makeClient function and an apolloLoader created with 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);

[!IMPORTANT]
ApolloClient needs to be imported from @apollo/client-integration-react-router, not from @apollo/client.

Run yarn react-router reveal. This will create the files app/entry.client.tsx and app/entry.server.tsx.

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

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

Add <ApolloHydrationHelper> to 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>
  );
}

Usage

Using apolloLoader with useReadQuery

You can now use the apolloLoader function to create Apollo-enabled loaders:

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

[!IMPORTANT]
To provide you with better TypeScript support, this is a method that you need to call twice: apolloLoader<LoaderArgs>()(loader)

Then you can consume this myQueryRef object with useReadQuery in your component:

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

  const { data } = useReadQuery(myQueryRef);

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

Keywords

apollo
react-router
apollo-client
graphql
ssr

FAQs

Package last updated on 13 Oct 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

CVE Volume Surges Past 48,000 in 2025 as WordPress Plugin Ecosystem Drives Growth

Security News

CVE Volume Surges Past 48,000 in 2025 as WordPress Plugin Ecosystem Drives Growth

CVE disclosures hit a record 48,185 in 2025, driven largely by vulnerabilities in third-party WordPress plugins.

By Sarah Gooding  -  Jan 09, 2026