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

Comments

[Adam Farnsworth]

I'm getting a Vue error when trying to run npm run serve it doesn't seem to like the gpl code saying:

24:8   error  'gpl' is defined but never used  no-unused-vars
46:19  error  'gql' is not defined             no-undef

I hand-coded the tutorial first, but when I hit the error, I went back and copy/pasted your exact code. I can't seem to get it to move past it. The first half works like a charm, I'm getting GraphQL interaction just fine, just can't connect Vue to it yet. Any ideas? Thanks!

[Pat Khunachak]

Does a React example of the client exist anywhere? Thanks

[abdelaziz321]

this is very useful👏, but I think this way the component will have much code and get much bigger 🤔

[Jesus Gilbert]

yes, it is only a very basic guide, you can achieve a better refactoring