This package provides integrations between Apollo Client and React Router 7 to support modern streaming SSR.
npm install @apollo/client-integration-react-routerThis package provides integrations between Apollo Client and React Router 7 to support modern streaming SSR.
Install dependencies:
``sh`
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:
`ts
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:
`diff
+import { makeClient } from "./apollo";
+import { ApolloProvider } from "@apollo/client";
startTransition(() => {
+ const client = makeClient();
hydrateRoot(
document,
+
+
);
});
`
Adjust app/entry.server.tsx:
`diff
+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(
+
url={request.url}
abortDelay={ABORT_DELAY}
/>,
+
{
[readyOption]() {
shellRendered = true;
`
Add to app/root.tsx
`diff
+ import { ApolloHydrationHelper } from "@apollo/client-integration-react-router";
export function Layout({ children }: { children: React.ReactNode }) {
return (
// ...
Usage
$3
You can now use the
apolloLoader function to create Apollo-enabled loaders:`ts
export const loader = apolloLoader()(({ 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:
apolloLoaderThen you can consume this
myQueryRef object with useReadQuery in your component:`ts
export default function Home() {
const { myQueryRef } = useLoaderData(); const { data } = useReadQuery(myQueryRef);
return (
do something with data here
)
``