问题
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;
回答1:
Finally I got issue. Actually I was using classical load balancer and classical load balancer is not supporting websocket requests.
I configured application load balancer and attached to my server instance. It's working proper now.
My code was proper.
来源:https://stackoverflow.com/questions/58659204/apollo-graphql-subscriptions-is-not-working-in-vuejs