Unable to find native implementation, or alternative implementation for WebSocket!

[saadbinsaeed]

I have extended the with-apollo-redux example of next and using subscriptions-transport-ws for the web sockets. But sockets are not working and getting this error

Error: Unable to find native implementation, or alternative implementation for WebSocket!
    at new SubscriptionClient (/home/user/Documents/projects/next-os/node_modules/subscriptions-transport-ws/src/client.ts:95:13)
    at create (/home/user/Documents/projects/next-os/.next/dist/lib/initApollo.js:21:18)
    at initApollo (/home/user/Documents/projects/next-os/.next/dist/lib/initApollo.js:56:12)
    at new WithData (/home/user/Documents/projects/next-os/.next/dist/lib/withData.js:165:47)
    at /home/user/Documents/projects/next-os/node_modules/react-dom/lib/ReactCompositeComponent.js:294:18
    at measureLifeCyclePerf (/home/user/Documents/projects/next-os/node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (/home/user/Documents/projects/next-os/node_modules/react-dom/lib/ReactCompositeComponent.js:293:16)
    at ReactCompositeComponentWrapper._constructComponent (/home/user/Documents/projects/next-os/node_modules/react-dom/lib/ReactCompositeComponent.js:279:21)
    at ReactCompositeComponentWrapper.mountComponent (/home/user/Documents/projects/next-os/node_modules/react-dom/lib/ReactCompositeComponent.js:187:21)
    at Object.mountComponent (/home/user/Documents/projects/next-os/node_modules/react-dom/lib/ReactReconciler.js:45:35)

This is my initApollo.js

import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws';
import { GRAPHQL_PATH, WS_PATH } from '../server/config';

let apolloClient = null;

function create() {
  const wsClient = new SubscriptionClient(WS_PATH, {
    reconnect: true,
  });
  const networkInterface = createNetworkInterface({
    uri: GRAPHQL_PATH,
    opts: {
      credentials: 'same-origin',
    },
  });
  const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
    networkInterface,
    wsClient
  );
  const client = new ApolloClient({
    dataIdFromObject: o => o.id,
    networkInterface: networkInterfaceWithSubscriptions,
  });
  networkInterface.use([
    {
      applyMiddleware(req, next) {
        if (!req.options.headers) {
          req.options.headers = {};  // Create the header object if needed.
        }

        // get the authentication token from local storage if it exists
        const token = localStorage.getItem('sessionToken');
        req.options.headers.Authorization = token ? `${token}` : null;
        next();
      },
    },
  ]);
  return client;
}

export default function initApollo() {
  // Make sure to create a new client for every server-side request so that data
  // isn't shared between connections (which would be bad)
  if (!process.browser) {
    return create();
  }

  // Reuse client on the client-side
  if (!apolloClient) {
    apolloClient = create();
  }

  return apolloClient;
}

Your Environment

Tech	Version
next	latest
node	7.10.0
OS	Ubuntu 16.0.4
browser	Chrome

[timneutkens]

Most likely on SSR I guess?

[saadbinsaeed]

Yes, But as per my understanding all the configurations will combine to make a Higher Order Component which renders on client side?

[timneutkens]

@ads1018 any ideas 🤔

[adamsoffer]

Hey @saadbinsaeed. @detrohutt managed to get subscriptions working with the next-apollo example. Here's the gist he shared of the changes he made to support subscriptions. Hope this helps. https://gist.github.com/detrohutt/3bddfe943a2f3ef2a797a6f7870049e8

[adamsoffer]

Looks like you're enabling subscriptions on the server. You want to make sure to only enable on the client.

[timneutkens]

Thanks @ads1018 ❤️