Skip to content

Instantly share code, notes, and snippets.

@malgamves

malgamves/main.js

Created May 4, 2019
Embed
What would you like to do?
Main.js file for a Realtime Vue App using GraphQL
import { ApolloClient } from 'apollo-client'
import { WebSocketLink } from 'apollo-link-ws';
import { HttpLink } from 'apollo-link-http';
import { split } from 'apollo-link';
import { getMainDefinition } from 'apollo-utilities';
import { InMemoryCache } from 'apollo-cache-inmemory';
import Vue from 'vue'
import VueApollo from 'vue-apollo'
import App from './App'
Vue.config.productionTip = false
const httpLink = new HttpLink({
// You should use an absolute URL here
uri: 'https://<your-app-name>/v1alpha1/graphql'
});
const wsLink = new WebSocketLink({
uri: "wss://<your-app-name>.herokuapp.com/v1alpha1/graphql",
options: {
reconnect: true
}
});
const link = split(
// split based on operation type
({ query }) => {
const { kind, operation } = getMainDefinition(query);
return kind === 'OperationDefinition' && operation === 'subscription';
},
wsLink,
httpLink,
);
const apolloClient = new ApolloClient({
link,
cache: new InMemoryCache(),
connectToDevTools: true
})
Vue.use(VueApollo)
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
defaultOptions: {
$loadingKey: 'loading'
}
})
/* eslint-disable no-new */
new Vue({
el: '#app',
apolloProvider,
render: h => h(App)
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.