Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@apollo/client-integration-react-router

Package Overview
Dependencies
Maintainers
4
Versions
10
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.

latest
Source
npmnpm
Version
0.14.3-alpha.0
Version published
Weekly downloads
511
-23.04%
Maintainers
4
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 18 Dec 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

2025 Report: Destructive Malware in Open Source Packages

Research

2025 Report: Destructive Malware in Open Source Packages

Destructive malware is rising across open source registries, using delays and kill switches to wipe code, break builds, and disrupt CI/CD.

By Kush Pandya  -  Dec 24, 2025
Spearphishing Campaign Abuses npm Registry to Target U.S. and Allied Manufacturing and Healthcare Organizations

Research

/

Security News

Spearphishing Campaign Abuses npm Registry to Target U.S. and Allied Manufacturing and Healthcare Organizations

A five-month operation turned 27 npm packages into durable hosting for browser-run lures that mimic document-sharing portals and Microsoft sign-in, targeting 25 organizations across manufacturing, industrial automation, plastics, and healthcare for credential theft.

By Nicholas Anderson, Kirill Boychenko  -  Dec 23, 2025