title: What is the correct way to connect to a graphql-yoga server via apollo for subscriptions?
body: <p>apollo-client: 2.6.3<br>
  apollo-link-http: 1.5.15<br>
  apollo-link-ws: 1.0.18<br>
  subscriptions-transport-ws:  0.9.16   </p>
  
  <p>So I have a front-end (node) server which connects to a back-end (graphql-yoga) server as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  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(() =&gt; {
      return {
        headers: {
          ...headers,
        }
      }
    });
  
    const link = process.browser ? split(
    ({ query }) =&gt; {
      const definition = getMainDefinition(query);
      return (
        definition.kind === 'OperationDefinition' &amp;&amp;
        definition.operation === 'subscription'
      );
    },
    wsLink,
    httpLink,
    ) : httpLink;
  
    const client = new ApolloClient({
      link: authLink.concat(link),
      ...
    });</code></pre>
  </div>
  </div>
  </p>
  
  <p>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 <code>ws://localhost:4000</code> this causes an: </p>
  
  <p><code>failed: Error during WebSocket handshake: Unexpected response code: 200</code></p>
  
  <p>error message to be issued.</p>
  
  <p>The graphql-yoga server itself makes a subscription connection to prisma as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>const options = {
    subscriptions: 'https://eu1.prisma.sh/MyID/MyProject/dev',
  };
  
  // start it!!
  server.start(options, ({ port }) =&gt;
      console.log(`Server is now running on port http://localhost:${port}`),
  );</code></pre>
  </div>
  </div>
  </p>
  
  <p>And my subscription resolver is as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  const Subscription = {
        order: {
          async subscribe(parent, args, ctx, info) {
              return ctx.db.subscription.order(
                {
                  where: {
                      mutation_in: ['CREATED', 'UPDATED'],
                  },
                },
                info
              ).catch(handleSubmitError);
          },
        }
    };</code></pre>
  </div>
  </div>
  </p>
  
  <p>If I run the following subscription in playground:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>subscription {
    order {
      mutation
      node {
        id
        total
        createdAt
        items {
          id
          title
          price
          description
          mainDescription
          quantity
          image
        }
      }
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>and trigger an order mutation via my site, the correct
  data resultset is shown: </p>
  
  <p><a href="https://i.stack.imgur.com/4lA5K.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4lA5K.jpg" alt="enter image description here"></a></p>
  
  <p>But the subscription resolver is not being actioned from the subscription call: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>const USER_ORDERS_SUBSCRIPTION = gql`
    subscription {
      order {
        mutation
        node {
          id
          total
          createdAt
          items {
            id
            title
            price
            description
            mainDescription
            quantity
            image
          }
        }
      }
    }
  `;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;Query query={USER_ORDERS_QUERY}&gt;
            {({ subscribeToMore, data: { orders }, loading, error }) =&gt; {
              if (loading) return &lt;p&gt;loading...&lt;/p&gt;;
              if (error) return &lt;Error erorr={error} /&gt;;
              return (
                &lt;div&gt;
                  &lt;h2&gt;You have {orders.length === 0 ? 'no' : orders.length} order{orders.length &gt; 1 || orders.length === 0 ? 's' : ''}.&lt;/h2&gt;
                  &lt;OrderListItem 
                    orders={orders}
                    urlReferer={urlReferer} 
                    subscribeToNewOrders={() =&gt;
                      subscribeToMore({
                        document: USER_ORDERS_SUBSCRIPTION,
                        variables: {},
                        updateQuery: (prev, { subscriptionData }) =&gt; {
                          if (!subscriptionData.data) return prev;
                          const newOrdertem = subscriptionData.data.order.node;
            
                          return Object.assign({}, prev, {
                            orders: [newOrdertem, ...prev.orders]
                          });
                        }
                      })
                    } 
                  /&gt;
                &lt;/div&gt;
              );
            }}
          &lt;/Query&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do I resolve this?</p>