Apollo GraphQL订阅在Vuejs中不工作

本文是小编为大家收集整理的关于Apollo GraphQL订阅在Vuejs中不工作的处理/解决方法，可以参考本文帮助大家快速定位并解决问题，中文翻译不准确的可切换到English标签页查看源文。

中文
English

问题描述

我正在使用Prisma和Vuejs + Apollo客户端订阅GraphQl

在本地系统中，我正在通过 http://localhost:8080 和 http://localhost:4000 .

我想在仪表板中显示最近添加的记录.

我已经在本地系统中实施了订阅，并且正常工作.

我将所有服务器端和客户端代码推向服务器，但订阅在那里不起作用.

我正在使用AWS服务器.除了订阅外，一切都正常工作.我设置了Websocket，它也可以正常工作.

有时候我要低于错误: WebSocket连接到'wss://url:4000/graphql'失败:Websocket在建立连接之前已关闭

我在下面遵循Docuemnt a>

我有不同的方法，但没有取得成功.断开自身后的连接是稳定/重新连接的.

在服务器端，我添加了Web插座的侦听器，并且正在连接.

这是我的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;

推荐答案

最后，我得到了问题.实际上，我正在使用Classical load balancer不支持WebSocket请求.

我配置了应用程序负载平衡器，并将其连接到我的服务器实例.它现在正常工作.

我的代码适当.

本文地址：https://www.itbaoku.cn/post/1938131.html

百度翻译此文有道翻译此文

问题描述

I am using GraphQL Subscription with Prisma and vuejs + apollo client

In local system, I am running vuejs at http://localhost:8080 and server at http://localhost:4000.

I want to display recently added and updated records in dashboard.

I have implemented subscription in my local system and it's working proper.

I push all server side and client side code to server but subscription is not working there.

I am using AWS server. Everything is working proper except subscription. I set up websockets and it's also working proper.

Sometime I am getting below error: WebSocket connection to 'wss://URL:4000/graphql' failed: WebSocket is closed before the connection is established

I am following below docuemnt https://www.apollographql.com/docs/react/data/subscriptions/

I have a tried a different ways but didn't get success. The connection is stable/ reconnects after disconnecting itself.

At server side, I added listener for web socket and it's connecting.

This is my code of vue-apollo.js file

    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;