import {
 ApolloClient,
 createHttpLink,
 InMemoryCache,
 split,
} from '@apollo/client/core';
import { createApolloProvider } from '@vue/apollo-option';
import { getMainDefinition } from '@apollo/client/utilities';
import { useLoginStore } from '@/stores/login';
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { createClient } from 'graphql-ws';
// Call this in the Vue app file
export function registerApollo({ url, websocket }, app) {
 const loginStore = useLoginStore();
 const httpLink = createHttpLink({
 uri: url,
 credentials: 'include',
 });
 const wsLink = new GraphQLWsLink(
 createClient({
 url: websocket,
 })
 );
 const link = split(
 ({ query }) => {
 const definition = getMainDefinition(query);
 return (
 definition.kind === 'OperationDefinition' &&
 definition.operation === 'subscription'
 );
 },
 wsLink,
 httpLink
 );
 const cache = new InMemoryCache();
 const apolloClient = new ApolloClient({
 link,
 cache,
 connectToDevTools: true,
 });
 const apolloProvider = createApolloProvider({
 defaultClient: apolloClient,
 errorHandler: async (error) => { /* do stuff */ },
 });
 app.use(apolloProvider);
}

import { createApp } from 'vue';
import App from './App.vue';
import { registerApollo } from './registerApollo';
import { graphql } from './config';
const app = createApp(App);
registerApollo({ url: graphql.url, websocket: graphql.websocket }, app);
app.mount('#app');