Currently, I am expanding my knowledge of GraphQL and working on a project where I aim to display queries in the front end. To achieve this, I have incorporated the package GitHub - Akryum/vue-apollo: 🚀 Apollo/GraphQL integration for VueJS. However, I have encountered some difficulties as nothing is showing up yet. Interestingly, I have successfully implemented similar functionality using React, and now I am striving to replicate the same with Vue.
I have managed to execute queries in the backend using graphiql. Additionally, I have configured the express server to utilize CORS to facilitate data transmission. My project architecture consists of an express backend and a Vue frontend.
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>