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.

A long time ago when I had been exploring session management in Node.js, I had written a tutorial titled, Session Management in Your Express.js Web Application. This was a basic tutorial that is still very functional today, however little things have changed since then when it comes to how the web works. For example, in 2015 HTTPS was never a requirement and we weren’t exposed to all the frontend web frameworks that exist today.

When you start introducing things into your web applications such as HTTPS or micro-services that operate on different origins or ports, or frontend frameworks, session management can get a little more complicated. We’re going to see how to maintain a session for a user using Node.js with Express.js on our backend and Vue.js on our frontend, in this tutorial.

In this tutorial we will build a simple Vue.js application which will demonstrate the power of using Vuex as a central data store, where the data will be asynchronously retrieved using Axios for the API requests.

A basic level of HTML, CSS and JavaScript will be beneficial but is not required.

When building a modern web application, chances are that you’ll need to consume data from some remote resource, whether it be one that you’ve built or something someone else built. Sending HTTP requests is one of the more popular ways to send data from client facing applications to RESTful API backends.

We’re going to see how to send HTTP requests within a Vue.js web application, using a variety of techniques such as those found in the popular axios and vue-resource libraries.