Apollo GraphQL 订阅在 Vuejs 中不起作用答案

【问题标题】：Apollo GraphQL subscriptions is not working in VuejsApollo GraphQL 订阅在 Vuejs 中不起作用
【发布时间】：2023-03-16 06:35:01
【问题描述】：

我正在将 GraphQL 订阅与 Prisma 和 vuejs + apollo 客户端一起使用

在本地系统中，我在http://localhost:8080 运行vuejs，在http://localhost:4000 运行服务器。

我想在仪表板中显示最近添加和更新的记录。

我已经在我的本地系统中实现了订阅并且它工作正常。

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

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

有时我遇到以下错误： WebSocket 连接到“wss://URL:4000/graphql”失败：在建立连接之前 WebSocket 已关闭

我正在关注以下文档 https://www.apollographql.com/docs/react/data/subscriptions/

我尝试了不同的方法，但没有成功。连接稳定/断开后重新连接。

在服务器端，我为 web socket 添加了监听器，它正在连接。

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

【问题讨论】：

标签： vue.js graphql apollo-client apollo-server prisma

【解决方案1】：

最后，我得到了问题。其实我用的是Classical load balancer，它不支持WebSocket请求。

我配置了应用程序负载平衡器并将其附加到我的服务器实例。现在可以正常使用了。

我的代码是正确的。

【讨论】：