Query A GraphQL API With Vue.js And Axios

I’ve written quite a bit of content around developing a GraphQL API with various programming technologies such as Node.js, Golang, and Java. Heck, I even wrote an eBook on the subject titled, Web Services for the JavaScript Developer. However, I haven’t really produced any content around interacting with those APIs using modern frameworks and client facing technologies, only cURL and Postman.

So how do you interact with a GraphQL API using something like Angular, React, or Vue.js?

There are a lot of frameworks to cover, but in this particular tutorial we’re going to see how to use Vue.js and simple JavaScript to interact with a GraphQL API.

Going into this, the assumption is that you’ve already got an API available for use, whether that be one that you’ve created or one that someone else has created and made public. If you’d like something basic to fiddle around with, you might check out my tutorial titled, Getting Started with GraphQL Development Using Node.js. While not as involved as my book, it is enough to play around with.

Creating a Simple Vue.js Application with the Vue CLI

We’re going to start things off by creating a fresh project to work with. To make this possible, while not required, we are going to use the Vue CLI.

With the Vue CLI available, execute the following commands:

vue create graphql-project
cd graphql-project
npm install axios --save

When prompted, make sure to choose the defaults for this project. Remember, the goal here isn’t to do something complicated. We just want to get something that will allow us to execute GraphQL queries.

After creating the project you’ll notice that we are installing the axios package. There are many ways to make HTTP requests with Vue.js and there are many packages available for executing GraphQL queries with Vue.js, but we’re going to keep it simple. You’ll remember that I had previously written about axios in a tutorial titled, Consume Remote API Data via HTTP in a Vue.js Web Application. Of course we’re focusing on GraphQL this time around rather than REST.

Executing GraphQL Queries with Vue.js using Axios

With the project created and our appropriate HTTP package available, we’re going to execute some GraphQL queries within our code. Remember, with GraphQL we are sending queries to a single API endpoint using HTTP.

Open the project’s src/components/HelloWorld.vue file and include the following code:

<template>
    <div>
        <ul>
            <li v-for="person in people">{{ person.firstname }} {{ person.lastname }}</li>
        </ul>
    </div>
</template>

<script>
    import axios from "axios";
    export default {
        name: "HelloWorld",
        data() {
            return {
                people: []
            };
        },
        async mounted() {
            try {
                var result = await axios({
                    method: "POST",
                    url: "http://localhost:3000/graphql",
                    data: {
                        query: `
                            {
                                people {
                                    firstname,
                                    lastname
                                }
                            }
                        `
                    }
                });
                this.people = result.data.data.people;
            } catch (error) {
                console.error(error);
            }
        }
    }
</script>

<style scoped></style>

You’ll notice that I’ve included the full component code above. In reality you’d probably want to rename your component or create a different component as the naming of HelloWorld isn’t particularly useful.

So what is happening in the above code?

My particular GraphQL API has a single data model which is for people. Each person has an id, a firstname, and a lastname. When the component mounts, we are using axios to issue a POST request to our GraphQL API, which in my case is running locally. What matters the most to us is the data property which has our GraphQL query. I am doing a multiple line string using the back-tick character to create my query. When executing the people query I am asking for only the firstname and lastname properties back. I do not want the id to be returned in this example.

With the result of the HTTP request, I am looping through the people returned and rendering them on the screen.

Conclusion

You just saw how to communicate with a GraphQL API using Vue.js in a similar fashion to that of a RESTful API. The real focus of this tutorial, while not completely obvious, is the fact that we are able to construct our GraphQL query request by making use of the data property in an axios request. The query can be significantly more complex even though our example was not.

If you want to see more examples of using axios with Vue.js, check out this tutorial titled, A Vue.js App Using Axios with Vuex, by Siegfried Grimbeek.

A video version of this tutorial can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.