Apollo-server: WebSocket connection to 'ws://localhost:4000/' failed: Error during WebSocket handshake: Unexpected response code: 400

[ghost]

I can't figure out what is the problem?

server:

const {ApolloServer, gql, PubSub} = require("apollo-server");
const pubsub = new PubSub();

const typeDefs = gql`
    type Subscription {
        postHello: String!
    }

    type Query {
        hello(id: Int!): String!
    }

    type Mutation {
        addHello(hello: String!): String!
    }
`;

const POST_ADDED = 'POST_ADDED';

const resolvers = {
    Subscription: {
        postHello: {
            subscribe: () => pubsub.asyncIterator([POST_ADDED])
        }
    },

    Query: {
        hello (obj, args) {
            const arr = ["aaaaaa", "bbbbb", "cccccccc"];
            return arr[args.id]
        }
    },

    Mutation: {
        async addHello (obj, args) {
            await pubsub.publish(POST_ADDED, {postHello: args.hello})

            return args.hello
        }
    }
};

const server = new ApolloServer({typeDefs, resolvers});

server.listen().then(({ url }) => {
    console.log(`🚀  Server ready at ${url}`);
});

client:

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider, Query } from 'react-apollo';
import gql from 'graphql-tag'
import { ApolloClient } from 'apollo-client';
import { getMainDefinition } from 'apollo-utilities';
import { ApolloLink, split } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { WebSocketLink } from 'apollo-link-ws';
import { InMemoryCache } from 'apollo-cache-inmemory';

import App from './components/App';

const httpLink = new HttpLink({
    uri: 'http://localhost:4000',
});

const wsLink = new WebSocketLink({
    uri: `ws://localhost:4000`,
    options: {
        reconnect: true,
    },
});

const terminatingLink = split(
    ({ query }) => {
        const { kind, operation } = getMainDefinition(query);
        return (
            kind === 'OperationDefinition' && operation === 'subscription'
        );
    },
    wsLink,
    httpLink,
);

const link = ApolloLink.from([terminatingLink]);

const cache = new InMemoryCache();

const client = new ApolloClient({
    link,
    cache,
});

ReactDOM.render(
    <ApolloProvider client={client}>
        <App />
        <Query query={
            gql`
                {
                hello(id: 1)
                }           
`
        }>

            {({ loading, error, data }) => {
                if (loading) return <p>Loading...</p>;
                if (error) return <p>Error :(</p>;

                return <p>{data.hello}</p>
            }}

        </Query>
    </ApolloProvider>,
    document.getElementById('root'),
);

[trevor-scheer]

Hey @mounaim-dev, it's been quite some time since you opened this, but if you haven't already figured this out, I'd recommend taking this question to the Apollo Server channel within the Apollo community on Spectrum.chat to discuss it further. Thanks!

[RyannGalea]

Was there any fix for this issue?

[Xapphire13]

~@trevor-scheer, can we re-open the issue? I and other people are hitting it (I found this on Spectrum, which doesn't help solve the issue for me: https://spectrum.chat/apollo/react-apollo/websocket-handshake-error-400~6b2e74da-5ddb-4b3d-ae2d-9695cd4082cf)~

Update: This solved my problem:

// ⚠️ Pay attention to the fact that we are calling `listen` on the http server variable, and not on `app`.

from: https://www.apollographql.com/docs/apollo-server/data/subscriptions/#subscriptions-with-additional-middleware