GraphQL - vue-apollo package, not outputting query in the front end

Question

I am still learning GraphQL, and in this project i am just trying to get some queries to show up in the front end. I am using the package, GitHub - Akryum/vue-apollo: 🚀 Apollo/GraphQL integration for VueJS but have yet to get anything to show up. I already managed to get it working using React. I'm just trying to do the same with Vue as well.

I can get the queries to work in the backend using graphiql. And I even set up the express server to use CORS so the data should be able to come through. I have an express backend and a Vue front end.

Express: server.js

const https = require('https');
const express = require('express');
const cors = require('cors');
const app = express();
const request = require("request");
const bodyParser = require('body-parser');
const { graphqlExpress, graphiqlExpress } = require('apollo-server-express');
const { makeExecutableSchema } = require('graphql-tools');

app.use(cors())

// Some fake data
const books = [
  {
    title: "Harry Potter and the Sorcerer's stone",
    author: 'J.K. Rowling',
  },
  {
    title: 'Jurassic Park',
    author: 'Michael Crichton',
  },
];

// The GraphQL schema in string form
const typeDefs = `
type Query {
  hello: String
}
`;

// The resolvers
const resolvers = {
  Query: {
    hello(root, args, context) {
      return "Hello world!"
    },
  }
};

// Put together a schema
const schema = makeExecutableSchema({
  typeDefs,
  resolvers,
});

// The GraphQL endpoint
app.use('/graphql', bodyParser.json(), graphqlExpress({ schema }));

// GraphiQL, a visual editor for queries
app.use('/graphiql', graphiqlExpress({ endpointURL: '/graphql' }));

// Start the server
app.listen(3000, () => {
  console.log('Go to http://localhost:3000/graphiql to run queries!');
});

Vue: main.js

    import Vue from 'vue'
    import App from './App.vue'
    import { ApolloClient } from 'apollo-client'
    import { HttpLink } from 'apollo-link-http'
    import { InMemoryCache } from 'apollo-cache-inmemory'
    import VueApollo from 'vue-apollo'

    const httpLink = new HttpLink({
      // You should use an absolute URL here
      uri: 'http://localhost:3000/graphql',
    })

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

    // Install the vue plugin
    Vue.use(VueApollo)

    const apolloProvider = new VueApollo({
      defaultClient: apolloClient,
    })

    new Vue({
      el: '#app',
      provide: apolloProvider.provide(),
      render: h => h(App),
    })

    Vue.config.productionTip = false



    new Vue({
      render: h => h(App)
    }).$mount('#app')

Vue: App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <BookList />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
import BookList from './components/BookList.vue';

export default {
  name: 'app',
  components: {
    HelloWorld,
    BookList
  }
};
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Vue: BookList.vue

<template>
<div>
    <h1>
        Book List
    </h1>
    <p>
      {{hello}}
    </p>
    </div>
</template>

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

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

Answer 1

I figured it out. I was mounting Vue twice inside the main.js file. The second vue instance was probably overwriting the first one, and it did not have the provider attached to it.

Deleting this code, from Vue: main.js solves the problem.

new Vue({
  render: h => h(App)
}).$mount('#app')