[英]Apollo GraphQL subscriptions is not working in Vuejs
我正在使用带有 Prisma 和 vuejs + apollo 客户端的 GraphQL 订阅
在本地系统中,我在http://localhost:8080运行 vuejs,在http://localhost:4000运行服务器。
我想在仪表板中显示最近添加和更新的记录。
我已经在我的本地系统中实现了订阅并且它工作正常。
我将所有服务器端和客户端代码推送到服务器,但订阅在那里不起作用。
我正在使用 AWS 服务器。 除订阅外,一切正常。 我设置了 websockets,它也可以正常工作。
有时我遇到以下错误: WebSocket 连接到“wss://URL:4000/graphql”失败: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 请求的Classical load balancer
。
我配置了应用程序负载平衡器并将其附加到我的服务器实例。 它现在工作正常。
我的代码是正确的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.