How do I set up GraphQL for my vuejs 3 app

Question

I am new to VueJS and I have been trying to setup graphql with my vuejs but I can't seem to get it right. Funny thing is there's no error on my console apart from a [Vue warn]: A plugin must either be a function or an object with an "install" function. error.

And this only comes up when I instantiate vueapollo to the use method.

Here's my main.js file

import { createApp } from 'vue';
import ElementUI from 'element-plus';

import ApolloClient from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import VueApollo from 'vue-apollo';

import App from './App.vue';
import router from './router';
import store from './store';
import './assets/style/theme/index.css';

// HTTP connection to the API
const httpLink = createHttpLink({
  // You should use an absolute URL here
  uri: 'http://localhost:4999/graphql',
});

// Cache implementation
const cache = new InMemoryCache();

// Create the apollo client
const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
});

/* The provider holds the Apollo client instances 
that can then be used by all the child components. */
// eslint-disable-next-line
const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
});

createApp(App)
  .use(ElementUI)
  .use(apolloClient)
  .use(store)
  .use(router)
  .mount('#app');

I have a page file where presently, I want to reach the "Hello" endpoint I created earlier

<template>
  <div>
    <h1>Hello</h1>
    <h1>{{ hello }}</h1>
  </div>
</template>

<script>
import gql from 'graphql-tag';

export default {
  data() {
    return {
      hello: '',
    };
  },
  apollo: {
    // Simple query that will update the 'hello' vue property
    hello: gql`
      query {
        hello
      }
    `,
  },
};
</script>

Answer 1

I also struggled with it a couple of weeks ago.
I don't remember how, but I got it to work.
I post my code here, in case it helps anyone in the future.

The difference between the question author and my code is how I pass the Apollo client to the create-app setup function. I don't know if it is correct, but it works.

PS: I am also using TypeScript on top of everything.

My apollo-client.ts file

import { ApolloError } from '@apollo/client';
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client/core';
import { ErrorResponse } from '@apollo/client/link/error';
import { onError } from '@apollo/client/link/error';
import { logErrorMessages } from '@vue/apollo-util';

function getHeaders() {
    const headers = {
        'content-type': 'application/json',
    };
    /*  const token = window.localStorage.getItem('apollo-token');
    if (token) {
        headers['Authorization'] = `Bearer ${token}`;
    } */
    return headers;
}

// Create an http link:
const httpLink = new HttpLink({
    uri: 'http://localhost:3000/query',
    fetch: (uri: RequestInfo, options: RequestInit) => {
        options.headers = getHeaders();
        return fetch(uri, options);
    },
});

const errorLink = onError((error: ErrorResponse | ApolloError) => {
    if (process.env.NODE_ENV !== 'production') {
        logErrorMessages(error);
    }
});

// Create the apollo client
export const apolloClient = new ApolloClient({
    cache: new InMemoryCache(),
    connectToDevTools: true,
    link: errorLink.concat(httpLink),
});

My main.ts file:

import { apolloClient } from './apollo-client';
import { createApp, provide, h } from 'vue';
import { DefaultApolloClient } from '@vue/apollo-composable';
import { createApolloProvider } from '@vue/apollo-option';
import { loadFonts } from './plugins/webfontloader';
import App from './App.vue';
import router from './router';
import store from './store';
import vuetify from './plugins/vuetify';

// TODO: Auth
// import authPlugin from "./auth/authPlugin"

// Create a provider
const apolloProvider = createApolloProvider({
    defaultClient: apolloClient,
});

loadFonts();

const app = createApp({
    setup() {
        provide(DefaultApolloClient, apolloClient);
    },
    render: () => h(App),
});

app.use(router).use(store).use(vuetify).use(apolloProvider).mount('#app');