Apollo GraphQL подписки не работает в Vuejs - PullRequest
Новая
       66

Apollo GraphQL подписки не работает в Vuejs

5 голосов
/ 01 ноября 2019

Я использую подписку GraphQL с Prisma и vuejs + клиент apollo

В локальной системе я запускаю vuejs на http://localhost:8080 и сервер на http://localhost:4000.

Я хочудля отображения недавно добавленных и обновленных записей на панели инструментов.

Я реализовал подписку в своей локальной системе, и она работает нормально.

Я передаю весь серверный и клиентский код на сервер, но подписка не выполняетсяработаю там.

Я использую сервер AWS. Все работает нормально, кроме подписки. Я установил websockets, и он также работает правильно.

Иногда я получаю сообщение об ошибке ниже: сбой подключения WebSocket к 'wss: // URL: 4000 / graphql': WebSocket закрывается до того, как соединение установлено

Я следую ниже документа https://www.apollographql.com/docs/react/data/subscriptions/

Я пробовал другие способы, но не добился успеха. Соединение стабильно / восстанавливается после отключения.

На стороне сервера я добавил прослушиватель для веб-сокета, и он подключается.

Это мой код файла vue-apollo.js 

    import Vue from 'vue';
    import VueApollo from 'vue-apollo';
    import { ApolloClient } from 'apollo-client';
    import { HttpLink } from 'apollo-link-http';
    import { InMemoryCache } from 'apollo-cache-inmemory';

    // imports for subscription
    import { split } from 'apollo-link';
    import { WebSocketLink } from 'apollo-link-ws';
    import { getMainDefinition } from 'apollo-utilities';

    const uriHttp = process.env.VUE_APP_SERVER_URL;
    const uriWs = process.env.VUE_APP_WS_SERVER_URL;

    const headers = { authorization: localStorage.getItem('token') };

    const httpLink = new HttpLink({ uri: uriHttp, headers });
    const wsLink = new WebSocketLink({
      uri: uriWs,
      options: {
        reconnect: true,
        connectionParams() {
           return { headers };
         },
      },
    });

    wsLink.subscriptionClient.on('connecting', () => {
      console.log('connecting');
    });

    wsLink.subscriptionClient.on('connected', () => {
      console.log('connected');
    });

    wsLink.subscriptionClient.on('reconnecting', () => {
      console.log('reconnecting');
    });

    wsLink.subscriptionClient.on('reconnected', () => {
      console.log('reconnected');
    });

    wsLink.subscriptionClient.on('disconnected', () => {
      console.log('disconnected');
    });

    wsLink.subscriptionClient.maxConnectTimeGenerator.duration = () => wsLink.subscriptionClient.maxConnectTimeGenerator.max;

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

    export const defaultClient = new ApolloClient({
      link,
      cache: new InMemoryCache(),
      connectToDevTools: true,
    });

    const apolloProvider = new VueApollo({
      defaultClient,
      defaultOptions: {
        $loadingKey: 'loading',
      },
    });

    Vue.use(VueApollo);

    export default apolloProvider;

1 Ответ

2 голосов
/ 13 ноября 2019

Наконец я получил вопрос. На самом деле я использовал классический балансировщик нагрузки, а классический балансировщик нагрузки не поддерживает запросы веб-сокетов.

Я настроил балансировщик нагрузки приложения и подключил его к своему экземпляру сервера. Теперь он работает правильно.

Мой код был верным.

...