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
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.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.
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:
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.
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.
A Modern Introduction to Programming
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.
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.
- How to add Fathom Analytics to Nuxt 3 - May 19, 2023
- How to use Azure Blob Storage - May 8, 2023
- How to use Azure Key Vault to manage secrets - April 30, 2023