Subscriptions not working in Next JS

Client SDKs
,
2

Solution: Make wsLink a function variable like the code below.

// src/apollo.ts

import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
import { GraphQLWsLink } from "@apollo/client/link/subscriptions";
import { createClient } from "graphql-ws";


const httpLink = new HttpLink({
  uri: 'http://localhost:3000/graphql'
});

const wsLink = () => {
  return new GraphQLWsLink(createClient({
    url: 'ws://localhost:3000/graphql'
  }));
}

export const apolloClient = new ApolloClient({
    link: typeof window === 'undefined' ? httpLink : wsLink(),
    cache: new InMemoryCache(),
  });


// pages/_app.tsx

import { ApolloProvider } from "@apollo/client";
import { apolloClient } from "./apollo";

function MyApp({ Component, pageProps }) {
  return (
    <ApolloProvider client={apolloClient}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}
1 Like