apollographql / apollographql/apollo-client-integrations

Support for Vercel's edge runtime

Open
#511 3 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.