Подписки Apollo не прослушивают новые данные на клиенте

Question

Ранее моя программа установки apollo прослушивала подписки, пока я не добавила socket.io, и теперь моя программа установки клиента больше не прослушивает новые данные. мои серверные коды, кажется, в порядке, основываясь на моем тестировании с использованием GraphQl Playground.

в консоли браузера я получаю следующее сообщение об ошибке

client.js:652 Сбой подключения WebSocket к 'ws://localhost:4000/': ошибка при рукопожатии WebSocket: непредвиденный код ответа: 400

Кажется, есть некоторая проблема с моей настройкой на стороне клиента для использования подписок apollo.

Цените любые указатели? заранее спасибо

import { ApolloClient } from "apollo-client";
import { onError } from "apollo-link-error";
import { ApolloLink, split } from "apollo-link";
import { createUploadLink } from "apollo-upload-client";
import gql from "graphql-tag";
import { withClientState } from "apollo-link-state";
import { InMemoryCache } from "apollo-cache-inmemory";
import { WebSocketLink } from "apollo-link-ws";
import { getMainDefinition } from "apollo-utilities";
import { setContext } from "apollo-link-context";

    const cache = new InMemoryCache();

    const defaultState = {
      currentGame: {
        __typename: "currentGame",
        teamAScore: 0,
        teamBScore: 0,
        teamAName: "EAGLES",
        teamBName: "LOL"
      }
    };

    const stateLink = withClientState({
      cache,
      defaults: defaultState,
      resolvers: {
        Mutation: {
          updateGame: (_, { index, value }, { cache }) => {
            const query = gql`
              query GetCurrentGame {
                currentGame @client {
                  teamAScore
                  teamBScore
                  teamAName
                  teamBName
                }
              }
            `;
            const previous = cache.readQuery({ query });
            const data = {
              currentGame: {
                ...previous.currentGame,
                [index]: value
              }
            };
            cache.writeQuery({ query, data });
            return null;
          },
          resetCurrentGame: (_, d, { cache }) => {
            cache.writeData({ data: defaultState });
          }
        }
      }
    });

    const host = "http://localhost:4000";

    // httpLink
    const httpLink = createUploadLink({
      uri: `${host}/graphql`,
      credentials: "same-origin"
    });

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

    // using the ability to split links, you can send data to each link
    // depending on what kind of operation is being sent
    const webLink = split(
      // split based on operation type
      ({ query }) => {
        const { kind, operation } = getMainDefinition(query);
        return kind === "OperationDefinition" && operation === "subscription";
      },
      wsLink,
      httpLink
    );

    // authMiddleware
    const authLink = setContext(async (req, { headers }) => {
      //  const token = await AsyncStorage.getItem("@token");
      const token = "";

      return {
        headers: {
          ...headers,
          authorization: token ? `${token}` : ""
        }
      };
    });

    const errorLink = onError(({ networkError, graphQLErrors }) => {
      if (graphQLErrors) {
        graphQLErrors.map(({ message, locations, path }) =>
          console.log(
            `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
          )
        );
      }
      if (networkError) console.log(`[Network error]: ${networkError}`);
    });

    export const client = new ApolloClient({
      link: ApolloLink.from([authLink, stateLink, errorLink, webLink]),
      cache
    });

Мой код на стороне сервера, если требуется

//! Using Apollo Server Express
const app = express();
const path = "/graphql";
const schema = genSchema();

export const startServer = async () => {
  const server = new ApolloServer({
    schema,
    context: ({ req }: any) => ({
      req,
      pubsub,
      userLoader: userLoader()
    })
  });

  app.use(cors());

  app.use(authMiddleware);

  app.use("/images", express.static("images"));

  app.use(
    "graphql",
    graphqlUploadExpress({
      uploadDir: "/",
      maxFileSize: 100000000,
      maxFiles: 10
    }),
    graphqlHTTP({ schema }) as any
  );

  server.applyMiddleware({ app, path });

  //! Added Subscription Handler
  const httpServer = createServer(app);
  server.installSubscriptionHandlers(httpServer);

  const port = process.env.PORT || 4000;

  await createConnection();

  await httpServer.listen({
    port
  });

  console.log(`Server is running on localhost:${port}${server.graphqlPath}`);
};

Answer 1

Ректифицированный. Моя установка на стороне клиента должна указывать на ws://localhost:4000/graphql, а не только на ws://localhost:4000/

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