GraphQL & the Vue Composition API with Apollo-Composable

In this post, I am assuming you understand the basics of GraphQL but are interested in how to use the Vue Composition API with GraphQL in VueJS

About GraphQL: This is one of the best places to start to get complete overview of GraphQL The Fullstack Tutorial for GraphQL.

Quickly Spinning Up A GraphQL Server

For this to be helpful, you need a graphql server to work with. In the past, that was always a challenge until I found this great package for quickly spinning up a local server with data based on a json file:

See Documentation for json-graphql-server

npm install -g json-graphql-server

Next create your sample data db.js

// db.js - in project root directory
module.exports = {
    posts: [
        { id: 1, title: "Lorem Ipsum", views: 254, user_id: 123 },
        { id: 2, title: "Sic Dolor amet", views: 65, user_id: 456 },
    ],
    users: [
        { id: 123, name: "John Doe" },
        { id: 456, name: "Jane Doe" }
    ],
    comments: [
        { id: 987, post_id: 1, body: "Consectetur adipiscing elit", date: new Date('2017-07-03') },
        { id: 995, post_id: 1, body: "Nam molestie pellentesque dui", date: new Date('2017-08-17') }
    ]
}

Start the server

$ json-graphql-server db.js
GraphQL server running with your data at http://localhost:3000/

You can now point your browser at the server and get the GraphiQL interface to check your data.

Getting the Setup for the VueJS App

See Documentation for apollo-composable

After setting up your base project using vue-cli, we need to add the required packages for apollo-composable and graphql.

(They are on separate lines for documentation purposes only)

npm install @vue/apollo-composable
npm install @vue/composition-api
npm install apollo-boost
npm install graphql
npm install vue-apollo