What is the correct way to connect to a graphql-yoga server via apollo for subscriptions?

Question

apollo-client: 2.6.3
apollo-link-http: 1.5.15
apollo-link-ws: 1.0.18
subscriptions-transport-ws: 0.9.16

So I have a front-end (node) server which connects to a back-end (graphql-yoga) server as follows:

  const httpLink = createHttpLink({
    uri: 'https://localhost:4444',
    credentials: 'include',
  });

  const wsLink = process.browser ? new WebSocketLink({
    uri: 'wss://eu1.prisma.sh/MyID/MyProject/dev',
    options: {
      reconnect: true,
      timeout: 3000,
    }
  }) : null;

  const authLink = setContext(() => {
    return {
      headers: {
        ...headers,
      }
    }
  });

  const link = process.browser ? split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink,
  ) : httpLink;

  const client = new ApolloClient({
    link: authLink.concat(link),
    ...
  });

Query and mutation resolvers are being triggered correctly, but the subscription resolver is not being triggered. I'm assuming that's because I'm not connecting directly to graphql-yoga. But if I change the WebSocketLink uri to ws://localhost:4000 this causes an:

failed: Error during WebSocket handshake: Unexpected response code: 200

error message to be issued.

The graphql-yoga server itself makes a subscription connection to prisma as follows:

const options = {
  subscriptions: 'https://eu1.prisma.sh/MyID/MyProject/dev',
};

// start it!!
server.start(options, ({ port }) =>
    console.log(`Server is now running on port http://localhost:${port}`),
);

And my subscription resolver is as follows:

  const Subscription = {
      order: {
        async subscribe(parent, args, ctx, info) {
            return ctx.db.subscription.order(
              {
                where: {
                    mutation_in: ['CREATED', 'UPDATED'],
                },
              },
              info
            ).catch(handleSubmitError);
        },
      }
  };

If I run the following subscription in playground:

subscription {
  order {
    mutation
    node {
      id
      total
      createdAt
      items {
        id
        title
        price
        description
        mainDescription
        quantity
        image
      }
    }
  }
}

and trigger an order mutation via my site, the correct data resultset is shown:

But the subscription resolver is not being actioned from the subscription call:

const USER_ORDERS_SUBSCRIPTION = gql`
  subscription {
    order {
      mutation
      node {
        id
        total
        createdAt
        items {
          id
          title
          price
          description
          mainDescription
          quantity
          image
        }
      }
    }
  }
`;

        <Query query={USER_ORDERS_QUERY}>
          {({ subscribeToMore, data: { orders }, loading, error }) => {
            if (loading) return <p>loading...</p>;
            if (error) return <Error erorr={error} />;
            return (
              <div>
                <h2>You have {orders.length === 0 ? 'no' : orders.length} order{orders.length > 1 || orders.length === 0 ? 's' : ''}.</h2>
                <OrderListItem 
                  orders={orders}
                  urlReferer={urlReferer} 
                  subscribeToNewOrders={() =>
                    subscribeToMore({
                      document: USER_ORDERS_SUBSCRIPTION,
                      variables: {},
                      updateQuery: (prev, { subscriptionData }) => {
                        if (!subscriptionData.data) return prev;
                        const newOrdertem = subscriptionData.data.order.node;
          
                        return Object.assign({}, prev, {
                          orders: [newOrdertem, ...prev.orders]
                        });
                      }
                    })
                  } 
                />
              </div>
            );
          }}
        </Query>

How do I resolve this?

Answer 1

So it turns out the solution was to:

const options = {
  subscriptions: '/subscriptions',
};

and then call the server as:

  const wsLink = process.browser ? new WebSocketLink({
    uri: 'ws://localhost:4444/subscriptions',
  })