NextJs GraphQL Subscription: How to set up connect api with Apolo

Question

I currently start a project that needs integrate GraphQL subscription with NextJs from client side. So this is the way I set up client for graphQL subscription

Here is with I have done:

client.js

import {
    ApolloClient,
    ApolloLink,
    HttpLink,
    InMemoryCache,
    split,
  } from '@apollo/client';
  import {WebSocketLink} from '@apollo/client/link/ws';
  import {getMainDefinition} from '@apollo/client/utilities';
  import ws from 'ws';

  const httpUrl = 'http://localhost:3000/graphql';
  const wsUrl = 'ws://localhost:3000/graphql';
  
  const httpLink = ApolloLink.from([
    new ApolloLink((operation, forward) => {
      return forward(operation);
    }),
    new HttpLink({uri: httpUrl}),
  ]);
  
  const wsLink = new WebSocketLink({
    uri: wsUrl,
    options: {
      connectionParams: () => {},
      lazy: true,
      reconnect: true,
    },
    ws
  });
  
  function isSubscription(operation) {
    const definition = getMainDefinition(operation.query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  }
  
  const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: split(isSubscription, wsLink, httpLink),
    defaultOptions: {query: {fetchPolicy: 'no-cache'}},
  });
  
  export default client;
  

and I got this error

Error: Unable to find native implementation, or alternative implementation for WebSocket!
    at new SubscriptionClient (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\subscriptions-transport-ws\dist\client.js:75:19)    at new WebSocketLink (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\@apollo\client\link\ws\ws.cjs.js:17:40)
    at Object../api/client.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:174:16)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../api/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:317:65)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:720:68)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/index.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:694:64)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
error - Error: Unable to find native implementation, or alternative implementation for WebSocket!
    at new SubscriptionClient (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\subscriptions-transport-ws\dist\client.js:75:19)    at new WebSocketLink (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\@apollo\client\link\ws\ws.cjs.js:17:40)
    at Object../api/client.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:174:16)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../api/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:317:65)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:720:68)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/index.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:694:64)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42) {
  page: '/'
}
Error: Unable to find native implementation, or alternative implementation for WebSocket!
    at new SubscriptionClient (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\subscriptions-transport-ws\dist\client.js:75:19)    at new WebSocketLink (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\@apollo\client\link\ws\ws.cjs.js:17:40)
    at Object../api/client.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:174:16)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../api/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:317:65)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:720:68)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/index.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:694:64)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
wait  - compiling...
event - build page: /next/dist/pages/_error
event - compiled successfully
Error: Unable to find native implementation, or alternative implementation for WebSocket!
    at new SubscriptionClient (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\subscriptions-transport-ws\dist\client.js:75:19)    at new WebSocketLink (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\@apollo\client\link\ws\ws.cjs.js:17:40)
    at Object../api/client.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:174:16)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../api/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:317:65)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:720:68)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/index.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:694:64)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
Error: Unable to find native implementation, or alternative implementation for WebSocket!
    at new SubscriptionClient (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\subscriptions-transport-ws\dist\client.js:75:19)    at new WebSocketLink (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\@apollo\client\link\ws\ws.cjs.js:17:40)
    at Object../api/client.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:174:16)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../api/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:317:65)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:720:68)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/index.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:694:64)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
error - Error: Unable to find native implementation, or alternative implementation for WebSocket!
    at new SubscriptionClient (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\subscriptions-transport-ws\dist\client.js:75:19)    at new WebSocketLink (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\@apollo\client\link\ws\ws.cjs.js:17:40)
    at Object../api/client.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:174:16)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../api/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:317:65)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:720:68)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/index.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:694:64)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42) {
  page: '/'
}
Error: Unable to find native implementation, or alternative implementation for WebSocket!
    at new SubscriptionClient (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\subscriptions-transport-ws\dist\client.js:75:19)    at new WebSocketLink (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\@apollo\client\link\ws\ws.cjs.js:17:40)
    at Object../api/client.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:174:16)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../api/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:317:65)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:720:68)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/index.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:694:64)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
wait  - compiling...
event - build page: /next/dist/pages/_error
event - compiled successfully
Error: Unable to find native implementation, or alternative implementation for WebSocket!
    at new SubscriptionClient (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\subscriptions-transport-ws\dist\client.js:75:19)    at new WebSocketLink (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\@apollo\client\link\ws\ws.cjs.js:17:40)
    at Object../api/client.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:174:16)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../api/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:317:65)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:720:68)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/index.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:694:64)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
Error: Unable to find native implementation, or alternative implementation for WebSocket!
    at new SubscriptionClient (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\subscriptions-transport-ws\dist\client.js:75:19)    at new WebSocketLink (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\@apollo\client\link\ws\ws.cjs.js:17:40)
    at Object../api/client.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:174:16)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../api/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:317:65)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:720:68)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/index.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:694:64)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
error - Error: Unable to find native implementation, or alternative implementation for WebSocket!
    at new SubscriptionClient (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\subscriptions-transport-ws\dist\client.js:75:19)    at new WebSocketLink (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\@apollo\client\link\ws\ws.cjs.js:17:40)
    at Object../api/client.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:174:16)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../api/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:317:65)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:720:68)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/index.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:694:64)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42) {
  page: '/'
}
Error: Unable to find native implementation, or alternative implementation for WebSocket!
    at new SubscriptionClient (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\subscriptions-transport-ws\dist\client.js:75:19)    at new WebSocketLink (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\@apollo\client\link\ws\ws.cjs.js:17:40)
    at Object../api/client.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:174:16)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../api/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:317:65)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:720:68)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/index.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:694:64)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully
Error: Unable to find native implementation, or alternative implementation for WebSocket!
    at new SubscriptionClient (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\subscriptions-transport-ws\dist\client.js:75:19)    at new WebSocketLink (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\@apollo\client\link\ws\ws.cjs.js:17:40)
    at Object../api/client.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:174:16)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../api/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:317:65)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:720:68)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/index.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:694:64)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
Error: Unable to find native implementation, or alternative implementation for WebSocket!
    at new SubscriptionClient (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\subscriptions-transport-ws\dist\client.js:75:19)    at new WebSocketLink (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\@apollo\client\link\ws\ws.cjs.js:17:40)
    at Object../api/client.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:174:16)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../api/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:317:65)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:720:68)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/index.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:694:64)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
error - Error: Unable to find native implementation, or alternative implementation for WebSocket!
    at new SubscriptionClient (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\subscriptions-transport-ws\dist\client.js:75:19)    at new WebSocketLink (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\@apollo\client\link\ws\ws.cjs.js:17:40)
    at Object../api/client.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:174:16)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../api/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:317:65)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:720:68)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/index.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:694:64)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42) {
  page: '/'
}
Error: Unable to find native implementation, or alternative implementation for WebSocket!
    at new SubscriptionClient (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\subscriptions-transport-ws\dist\client.js:75:19)    at new WebSocketLink (C:\Users\ASUS\OneDrive\Desktop\next-itg\node_modules\@apollo\client\link\ws\ws.cjs.js:17:40)
    at Object../api/client.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:174:16)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../api/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:317:65)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/story.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:720:68)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)
    at Object../saga/index.js (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\pages\_app.js:694:64)
    at __webpack_require__ (C:\Users\ASUS\OneDrive\Desktop\next-itg\.next\server\webpack-runtime.js:25:42)

Thanks for help me out. I am newbie and that is meant very much for me, have a good day