gpt4 book ai didi

vue.js - Apollo GraphQL 订阅在 Vuejs 中不起作用

转载 作者:行者123 更新时间:2023-12-01 17:33:23 26 4
gpt4 key购买 nike

我正在使用带有 Prisma 和 vuejs + apollo 客户端的 GraphQL 订阅

在本地系统中,我正在 http://localhost:8080 运行 vuejs和服务器 http://localhost:4000 .

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

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

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

我正在使用AWS服务器。除了订阅之外,一切正常。我设置了 websockets 并且它也工作正常。

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

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

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

在服务器端,我添加了 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;

最佳答案

我终于明白了这个问题。实际上,我使用的是不支持 WebSocket 请求的经典负载均衡器。

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

我的代码是正确的。

关于vue.js - Apollo GraphQL 订阅在 Vuejs 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58659204/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com