Calling GraphQL API with Vue.JS

In Creating Reference Data API with Strapi and using GraphQL we created an API that would be supplying our a Front-End Application with Reference data it will need to enable users to perform certain actions in our Sourcelink - Software Developers Community Web & Mobile Application.

In this post, we are going to take a look at how we can make use of the GraphQL API within our Vue.JS based application. The complete source code for this project is available in the branch - GraphQL

https://github.com/threenine/sourcelink-web
2 forks.
6 stars.
11 open issues.

Recent commits:

• flexible layout patch, Gary Woodfine
• changed logo size, Gary Woodfine
• upgraded depedencies, Gary Woodfine
• some firebase bug, Gary Woodfine
• fixed array pop, Gary Woodfine

Add Apollo Client to Vue.JS project

In order for our app to communicate with our Strapi GraphQL API, we are going to add some additional packages to our Vue.JS Application. The package we are going to is the Apollo client and the Additional Vue-Apollo

What is Apollo ?

Apollo is a set of tools and community effort to help you use GraphQL in your apps. It's well known for its client and its server

Apollo Client brings a tool to front-end development to make GraphQL queries/mutations easier. It acts as an HTTP client that connects to a GraphQL API and provides caching, error handling, and even state management capabilities.

We need to install a number of packages to our application, so using whichever package manager you prefer install the following dependencies. In my case I will use npm

We are making use of environment variables in our Vue.JS application, so we are going to add an additional variable to both our env.development and env.production files which will contain the link to our Development and Production URL's to our API.

Our Development environment will look something similar too

We can start to implement our Apollo configuration, in order to do so we will create a new folder in ~/src folder and call it graphql, you can name this folder whatever you want, but I am going to call it graphql as it just defines what it's purpose is.

In the folder we'll create a new JavaScript file and cunningly name it apollo.js , then we'll add the following code

There is quite a bit to explain in the code, but essentially HttpLink is an object that requires a uri property, which refers to the GraphQL endpoint from the API being used. Ex: localhost:1337/graphql

A new ApolloClient instance needs to be created, where the link, cache instance, and further options can be set.

We wrap our ApolloClient inside a VueApollo instance so we can use its hooks inside our Vue components.

We have started to add the capability to introduce some error handling and logging using the errorLink , for now we are simply going to log this to console window, but in future will implement a more robust set of utilities.

We will also now need edit our main.js to import our ApolloProvider and add it to our Vue instance.

Create your GraphQL queries

We are now going to create a folder to contain all our GraphQL queries. In our particular application we will not be using mutations and our app will only be using our GraphQL API to access read-only reference data at this stage. Therefore we will only be adding one folder name queries.

In the queries folder we'll create a new JavaScript file name skillQueries.js which will use to add all our Skill Specific queries. Add the following code

You may notice the query from Creating Reference Data API with Strapi and using GraphQL, we have deliberately kept it simple at this stage, so we don't get bogged down in the complexities of GraphQL and we are just interested in getting this example to work.

Edit Skills View

All our configuration work is now done and we are now ready to consume our API in our application. In our Application we have created Skill.vue file which will be used to enable users to select their appropriate skills.

This is where we are going contact the API when the view loads and populate an Autocomplete text box with the values. We make use of MDB Vue Pro Material Component Framework to help to quickly create good looking UI. For a detailed discussion on how to configure your Vue App to make use of it check out How to start a new project using Vue.js

In our example we are going to keep the UI as simple as possible so as not to distract from the implementation. We will use a Select List to display the items from the API and enable the user to select items to add to another List Item.

Our application will look similar to this, with just enough to illustrate the functionality.

Populate Languages Select Box

We are going to make a call to our Reference Data API to get the values to populate our List box with making use of our Apollo implementation we defined earlier.

We are going to mark our mounted method as async so we don't slow down view loading.

If you start the application now, and ensure that your API is available. Your page will now load and the values will now be loaded in the select box.

Enable selection

We will now complete our example, with an implementation to select items from the list to populate our list of selected programming skills.

This is just rudimentary code, to implement an initial set of functionality. In forthcoming tutorials we are going to completely refactor this code, to enable other Vue.JS specific functionality and neaten up the UI a lot more.

For the purpose of our Demonstration and topic of this specific tutorial we are now complete.

Summary

In this tutorial, we have focused on how to configure our Vue.JS application to start to access a Strapi Reference Data API using GraphQL and the Apollo client.

This is a very basic implementation and we will now continue to build on this implementation over the course of a number of tutorials detailing how we will be building an Web and Mobile application for a software developer community website.