A view on GraphQL in Vue

While REST still holds the top spot in terms of popularity GraphQL has been on the rise for quite a while and 2021 looks to be another year where this will be the case. It has become a big trend in web development by focusing on making development more efficient and improving performance. Another big trend is Vue, it has also become really popular and now makes up the big trio of frameworks with React and Angular. Since both are so big in app development now the obvious question is why not use both?

What can GraphQL do for me?

Before we get to that let's take a brief look at what GraphQL is and what it can help us with. GraphQL is a data query language for APIs and its main aim is to fix over and under fetching as, unlike REST, it lets you define exactly what you need to avoid unoptimized API calls:

1. Over-fetching is getting too much data. This happens when the client downloads more data than is actually needed by the app. As GraphQL lets you define in the query exactly what is needed this stops being a problem, with each request you get exactly what you need and nothing else. This has a significant effect on performance and bandwidth.

2. Under-fetching is not getting enough data. This happens when the client does not get everything it needs in a single request and so needs multiple to get all the needed data. Again GraphQL solves this problem by letting you define exactly what you need in the query and again the effects in terms of performance and bandwidth saved are significant.

Default or Apollo?

After the why naturally comes the how. By default you can simply use GraphQL.js, the official GraphQL JavaScript implementation. Then there are some solutions made by the community, the most popular being Apollo. Each has its own advantages and is more suited towards working on a particular type of project.

• GraphQL.js is a library that can help you set up a basic server with minimal effort. It's a simple, straightforward and barebones solution for those who want to start simple and dont need more complex tools.

• Apollo is the well-rounded, go to solution for most and for good reason. The platform is well suited for simple as well as more complex projects and provides tons of versatility. Apollo can be dropped into any JavaScript project without issues and is universally compatible. Basically it's a set of tools which let you convert your backend into a GraphQL API and interact with it from the frontend.

Where’s the Vue?

Okay, but where’s Vue in all this? GraphQL is primarily a server-side technology, however as mentioned before it lets you query whatever data you need which makes it really flexible. As mentioned before Apollo is a platform and will help you with both the server and the client side of the app (via Apollo Client and Apollo Server respectively) and more importantly is both library and framework agnostic. This lets you combine all three, GraphQL handles queries in your Vue components while Apollo works under the hood. As I’ve written before Vue is big on simplicity, reactivity and user friendliness and while GraphQL might take a bit to get a hang of, the performance boost and quality of life improvements will quickly make up the time used on that. Using all three lets you take advantage of all the features of GraphQL and Apollo mentioned above as well as utilize Vue’s full potential. Hopefully if you’re using Vue already this helped highlight a bit how GraphQL can be useful to smooth out the development process. On the other hand if you’re already working with GraphQL you might want to get familiar with Vue as it's gaining popularity and is touted as the framework with the easiest learning curve which should make getting a hang of it a breeze.