npmpackage.info

Gathering detailed insights and metrics for @apollo/client-integration-react-router

@apollo/client-integration-react-router - 0.12.0-alpha.4 | npmpackage.info

@apollo/client-integration-react-router

Apollo Client support for the Next.js App Router

0.12.0-alpha.4

536

MIT

TypeScript

38.37 kB

Installations

npm install @apollo/client-integration-react-router

Developer Guide

BETA

Typescript

No

Module System

ESM

Node Version

20.11.0

NPM Version

10.2.4 Pull Requests

Open

19

Total

253

Closed

65

Merged

169

Issues

Open

70

Total

231

Closed

161

Releases

@apollo/client-react-streaming@0.12.2

Updated on Apr 22, 2025

@apollo/experimental-nextjs-app-support@0.12.2

Updated on Apr 22, 2025

@apollo/client-integration-nextjs@0.12.2

Updated on Apr 22, 2025

@apollo/client-integration-nextjs@0.12.1

Updated on Apr 07, 2025

@apollo/client-react-streaming@0.12.1

Updated on Apr 07, 2025

@apollo/experimental-nextjs-app-support@0.12.1

Updated on Apr 07, 2025

View All 75 releases

Languages

TypeScript

JavaScript

CSS

HTML

TypeScript (87.21%)

JavaScript (12.27%)

CSS (0.45%)

HTML (0.07%)

Developer

apollographql

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

536 Stars

413 Commits

42 Forks

19 Watchers

59 Branches

33 Contributors

Updated on Jul 12, 2025

Maintainers

View All 33 Contributors

Package Meta Information

Latest Version

0.12.0-alpha.4

Package Id

@apollo/client-integration-react-router@0.12.0-alpha.4

Unpacked Size

38.37 kB

Size

7.86 kB

File Count

NPM Version

10.2.4

Node Version

20.11.0

Published on

Mar 28, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

@apollo/client-integration-react-router

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

Setup

Install dependencies:

1npm 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:

1import { ApolloLink, HttpLink, InMemoryCache } from "@apollo/client/index.js";
2import {
3  createApolloLoaderHandler,
4  ApolloClient,
5} from "@apollo/client-integration-react-router";
6
7// `request` will be available on the server during SSR or in loaders, but not in the browser
8export const makeClient = (request?: Request) => {
9  return new ApolloClient({
10    cache: new InMemoryCache(),
11    link: new HttpLink({ uri: "https://your.graphql.api" }),
12  });
13};
14export 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:

1+import { makeClient } from "./apollo";
2+import { ApolloProvider } from "@apollo/client/index.js";
3
4startTransition(() => {
5+ const client = makeClient();
6  hydrateRoot(
7  document,
8  <StrictMode>
9+    <ApolloProvider client={client}>
10       <HydratedRouter />
11+    </ApolloProvider>
12  </StrictMode>
13  );
14});

Adjust app/entry.server.tsx:

1+import { makeClient } from "./apollo";
2+import { ApolloProvider } from "@apollo/client/index.js";
3
4export default function handleRequest(
5  // ...
6) {
7  return new Promise((resolve, reject) => {
8  // ...
9+ const client = makeClient(request);
10  const { pipe, abort } = renderToPipeableStream(
11+   <ApolloProvider client={client}>
12      <ServerRouter
13        context={routerContext}
14        url={request.url}
15        abortDelay={ABORT_DELAY}
16      />,
17+   </ApolloProvider>,
18    {
19      [readyOption]() {
20        shellRendered = true;

Add <ApolloHydrationHelper> to app/root.tsx

1+ import { ApolloHydrationHelper } from "@apollo/client-integration-react-router";
2
3export function Layout({ children }: { children: React.ReactNode }) {
4  return (
5    <html lang="en">
6      // ...
7      <body>
8-        {children}
9+        <ApolloHydrationHelper>{children}</ApolloHydrationHelper>
10        <ScrollRestoration />
11        <Scripts />
12      </body>
13    </html>
14  );
15}

Usage

Using `apolloLoader` with `useReadQuery`

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

1export const loader = apolloLoader<Route.LoaderArgs>()(({ preloadQuery }) => {
2  const myQueryRef = preloadQuery(MY_QUERY, {
3    variables: { someVariable: 1 },
4  });
5  return {
6    myQueryRef,
7  };
8});

[!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:

1export default function Home() {
2  const { myQueryRef } = useLoaderData<typeof loader>();
3
4  const { data } = useReadQuery(myQueryRef);
5
6  return (
7    <div> do something with `data` here </div>
8  )

No vulnerabilities found.

No security vulnerabilities found.

npmpackage.info

@apollo/client-integration-react-router

Installations

Developer Guide

No

ESM

20.11.0

10.2.4

Pull Requests

19

253

65

169

Issues

70

231

161

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

@apollo/client-integration-react-router

Setup

Usage

Using `apolloLoader` with `useReadQuery`

@apollo/client-integration-react-router

Installations

Developer Guide

No

ESM

20.11.0

10.2.4

Pull Requests

19

253

65

169

Issues

70

231

161

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

@apollo/client-integration-react-router

Setup

Usage

Using apolloLoader with useReadQuery

Using `apolloLoader` with `useReadQuery`