apollographql / apollographql/apollo-client-integrations
Support for Vercel's edge runtime
- Dominant language
- TypeScript
- Stars
- 556
- Forks
- 53
- PR merge metrics
- No merged PRs in 30d
Description
Hi, is there any chance to add support for Vercel's edge runtime? I had my application working perfectly fine until I moved to edge runtime, now I'm getting an error that comes from `@apollo/client-integration-nextjs`, this is the error:
```
Error: A Node.js API is used (MessageChannel) which is not supported in the Edge Runtime.
```
And some parts of the stack trace:
```
[project]/node_modules/@apollo/client-react-streaming/dist/stream-utils.ssr.js [app-edge-ssr] (ecmascript)
[project]/node_modules/@apollo/client-react-streaming/dist/index.ssr.js [app-edge-ssr] (ecmascript)
[project]/node_modules/@apollo/client-integration-nextjs/dist/index.ssr.js [app-edge-ssr] (ecmascript)
[project]/src/graphql/apollo.client.tsx [app-edge-ssr] (ecmascript)
```
And this is my `apollo.client.tsx`:
```typescript
"use client";
import { ApolloLink, HttpLink } from "@apollo/client";
import { SetContextLink } from "@apollo/client/link/context";
import {
ApolloClient,
ApolloNextAppProvider,
InMemoryCache,
} from "@apollo/client-integration-nextjs";
import { PropsWithChildren, useCallback, useEffect, useRef } from "react";
const getCookie = (name: string): string | undefined => {
if (typeof document === "undefined") return undefined;
const cookieValue = document.cookie
.split("; ")
.find((row) => row.startsWith(`${name}=`))
?.split("=")[1];
return cookieValue;
};
interface ApolloWrapperProps {
session?: string;
organization?: string;
}
export const ApolloWrapper = ({
children,
organization,
session,
}: PropsWithChildren) => {
const sessionRef = useRef(session);
const organizationRef = useRef(organization);
useEffect(() => {
sessionRef.current = getCookie("session");
organizationRef.current = getCookie("organization");
}, []);
const makeClient = useCallback(() => {
const httpLink = new HttpLink({
uri: process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000/graphql",
});
const authorizationLink = new SetContextLink(({ headers = {} }) => {
const token = sessionRef.current;
const organization = organizationRef.current;
return {
headers: {
...headers,
authorization: token ? `Bearer ${token}` : undefined,
"x-organization-id": organization ?? undefined,
},
};
});
return new ApolloClient({
cache: new InMemoryCache(),
link: ApolloLink.from([authorizationLink, httpLink]),
});
}, []);
return (
{children}
);
};
```
And in my root layout I'm rendering the `ApolloWrapper` component. I believe my setup is correct and the issue comes from the nextjs integration library.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by tracing the @apollo/client-integration-nextjs and @apollo/client-react-streaming entry points shown in the stack trace, especially stream-utils.ssr.js, and reproduce the failure in a Vercel Edge Runtime environment. Done means the integration no longer invokes the unsupported MessageChannel Node.js API and the reported Apollo setup works under the Edge Runtime.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, typescript
- Domain
- web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100