Apollo-module: Custom network interface / subscription strategy with nuxt

[dfee]

I'm in the process of porting an old React project to Vue, and noticed nuxt. My custom network-interface is a websocket interface that supports subscriptions. When the websocket is terminated, the network-interface re-sends subscriptions to the server.

With the apollo-module is it (in-)appropriate to set up a websocket connection to the server where components can subscribeToMore?

Should I somehow limit my components to not create subscriptions if they're running on the server? And then, would I somehow scan my application when in a browser to create these subscriptions?

_{This question is available on Nuxt.js community (#c27)}

[dohomi]

@dfee when I used subscriptions, I simply added the websocket only on the client. So for your usecase you could do that or you add another websocket based interface. Do you have any example code?

[Nainterceptor]

Hello,

I'm looking for a way to work with subscription strategy of vue-apollo & nuxt too.

Code sample :

import { createNetworkInterface } from 'apollo-client';
import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws'

export default ({ store }) => {
  const networkInterface = createNetworkInterface({
    uri: `${process.env.API_URL}/graphql`,
  });


  const wsClient = new SubscriptionClient('ws://localhost:3000/subscriptions', {
    reconnect: true,
  });

  const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
    networkInterface,
    wsClient,
  );

  return {
    networkInterface: networkInterfaceWithSubscriptions,
    dataIdFromObject: o => o.id
  }
};

Here, when SSR is loading the network interface, error message is triggered ("Unable to find native implementation, or alternative implementation for WebSocket! "), because WebSocket is not available server-side. I've tried to use third parameter of "SubscriptionClient" with alternative websocket client but without success for now. I've tried to use "isClient" to switch networkInterface following if it's SSR or client-side rendering, but without any success for now.

If you've an example or any suggestion, you're welcome !

Thanks,
Gaël

[dohomi]

@Nainterceptor change your code that networkInterfaceWithSubscription only runs on client side:

    networkInterface: isServer ? networkInterface : networkInterfaceWithSubscriptions

You can also try adding ws and import it, but for me this did not work. I only use subscriptions after the client loads

[Nainterceptor]

It's not working here, because when SubscriptionClient is instanciated, I've the error "Unable to find native implementation, or alternative implementation for WebSocket!"

Seems to be better with something like following

import { createNetworkInterface } from 'apollo-client';
import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws'

export default ({ store, isServer }) => {
  let networkInterface = createNetworkInterface({
    uri: `${process.env.API_URL}/graphql`,
  });

  if (!isServer) {
    const wsClient = new SubscriptionClient('ws://localhost:3000/subscriptions', {
      reconnect: true,
    });
    networkInterface = addGraphQLSubscriptions(
      networkInterface,
      wsClient,
    );
  }

  return {
    networkInterface,
    dataIdFromObject: o => o.id,
  };
};

But at this step I'm reminding that I've another issue, I will continue my investigation

[Nainterceptor]

With the previous snippet, I've an error that I've not successfully solved : [nuxt] Error while initializing app TypeError: Object(...) is not a function

:'(

[dohomi]

@Nainterceptor could you solve the issue yet?

[Nainterceptor]

Hello, I don't understood the origin of this issue, so I've not fixed this one for now. Then I've some other issues with apollo itself (to handle role-based subscriptions). So... I'm in standby...

As a reference, I'm talking about https://github.com/apollographql/subscriptions-transport-ws/issues/270

[dohomi]

We just published v3 of this module. I will close this issue due to inactivity, a lot has changed in apollo-client please open a new issue if there are still issues.

[dfee]

@dohomi great work pushing this forward to apollo v2 support. Cheers!

[JasherIO]

As far as I can tell, this is still an issue. I pulled the dev branch today and I'm receiving the same error that @Nainterceptor received [nuxt] Error while initializing app TypeError: Object(...) is not a function