Build a simple blog with GraphQL, Node.js, SQLite and (VUE, Angular Or ReactJS) - Part 2

What we gonna do?

In this tutorial, we will show you how to create a simple client with VUE, to connect to graphql api we created in this previous tutorial

Prerequisites

• Knowledge of JavaScript and Vue.
• You must have seen the previous tutorial: this previous tutorial

Time to play the game! Hahaha

• Set up the project on previous directory created, run this on your favorite terminal:
  • cd micro-blog
  • mkdir micro-blog-clients
  • cd micro-blog-clients
  • vue create vue-micro-blog-client

  • cd vue-micro-blog-client
• Install the following dependencies:
  • npm install --save vue-apollo graphql apollo-boost moment

Configurate Apollo Client

Apollo Client is a complete state management library for JavaScript apps. Simply write a GraphQL query, and Apollo Client will take care of requesting and caching your data, as well as updating your UI. Read More

• Config Apollo Client
  • Open src/main.js and paste this code:

Here we define const apolloClient to set graphql api url and add vueApollo plugin to global method

• Consuming micro-blog API
  • Edit Home.vue in src/views and paste this code:

In this file we write a code to get post like a select query but with gql query

• Add new File AddPost.vue in src/views and paste this:

Then we create a method to call by save button to add new post and another to format the create date. As you can notice here we define the mutate to call mutation to create a post and finally the method to clean the model

• Edit src/router/index.js with this:
  

• edit src/App.vue and edit router line with this:
  

Testing!

see video