Up and running with GraphQL, Laravel and Vue.js
In this article, I aim at giving you an overview of how, and why, we integrated GraphQL with Vue.js and Laravel for a new application we have recently set out. Although this article will bring a lot of technical terms, we will only give a clear view and swift introduction to these concepts.
Let’s get started by running through the backdrop, and the reasons which contribute to help us make our call. As for every new projects, the team has to cope with the spate of languages and frameworks available.
As Javascript lovers, and worldly Laravel developers, we opted for a full-stack Javascript application using Vue.js — and Laravel as a backend.
Context — updated March 2018
The application we are covering in this article is now available in beta. We are talking about the brand new Alkaweb’s SaaS product: Feedier.com
In a nutshell, Feedier lets you collect valuable Feedback from your customers. We challenge you to understand your customers and engage with them through our reward and engagement programs. Brand unique & enjoyable surveys. Value, engage, respect & reward your customers! 🚀
Enough sales talk, let’s dive right in.
Why such an application ?
You may be wondering why did we opt for an headless app where we would have on one side the front-end rendered using Vue.js, and on the other side our server side dealt with Laravel — and it may sounds like an overhead.
Therefore, I want to give you a few arguments:
- It offers us a non-negligeable flexibility over time as we do have the ability to easily flip around server-side language for instance.
- We set up an additional layer of security
- We can run distinct tests on the server-side and client-side by implementing different testing tools and automations.
- Last but not least, we are reliant on a full code base: we have 2 well-defined app. Therefore, we could easily bring forth to a Mobile application using Native Script or whatever tool we want.
Where to start our API?
While building our UML, we quickly realised that a standard Rest API approach to make the requests to our backend would be really painful and cumbersome: given the size of our model, we would have a substantial number of API routes, and it would quickly get messy. That’s when we started to dig around and promptly started to be interested in GraphQL.
What the hell is GraphQL?
By definition, “GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn’t tied to any specific database or storage engine and is instead backed by your existing code and data.”
(Source: GraphQL.org).
GraphQL was initially made up by Facebook in 2012 for in-house use, and disclosed in 2015 to the public.
This definition may, or may not, help you grasp the concept behind it.
In a nutshell, GraphQL tackles the same problem as Rest API: get data from your back-end on the client-side by sending an HTTP request. However, instead of working with stiff server-defined endpoints, you can get all the data you need in a single request.
As a matter of fact, we are not reinventing the wheel here — just leveraging fitted technologies which provide a nice interface and allow us to build a sustainable application, ie it enables both sides to collaborate more smoothly than ever before.
In order to get your things up and running, and basically connect your GraphQL server with your client-side, you will need a client. The main ones are Relay and Apollo. We opted for Apollo and more precisely the nice integration built by the Vue.js team : Vue Apollo.
On the other side, you will also need to connect your GraphQL server to your database — and we opted for this Laravel/GraphQL integration, which was nicely built, but you could technically integrate with any server-side language or framework (Node.js, Python, Java, etc.).
More upsides
Let’s drill down through the benefits of GraphQL and the what it implies.
First of all, as mentioned previously, with GraphQL, you can get all the data you need in a single shot — as long as your Schema — which is the type system described on your GraphQL server — has been properly defined. Therefore, you’re avoiding the large number of queries- and so alleviating your server.
In other words, while standard Rest APIs require us to query as many data as we need individually, GraphQL allows us to get all the data we need in a single request. Does it ring a bell?
Enough talking, let’s give a real-life example. Let’s say you have a random application with a list of companies and users. You want to get the list of all your companies, with their creator and information about them, as well as the details of their pricing plan and Stripe id.
Using a Rest API, you would had to create — at least — the following endpoints, and their dedicated Controllers:
- /companies
- user/{id}
- billing/{id}
Nevertheless, with GraphQL, provided that you have defined the relationships accordingly (eg. a company belong to a creator), you can get all these intel using the following query:
query AllCompanies {
companies {
id,
name,
creator_id {
id
name
email
role
}
billing_profile_id {
id
stripe_id
active
meta
plan_id
}
}
}Even if we do love our Postman app, we can’t help saying that the GraphiQL interface provided by GraphQL is lovely, and we are already seeing the benefits in terms of productivity: testing one query against 3 requests is way quicker, isn’t it?
Besides this lightweight — slash productivity — advantage, this query language also offers better performance and thus improved the speed of your app. On top of that, you leverage catching features — ie. the client can use HTTP caching to easily avoid refetching resources as he is able to identify when two resources are the same.
“ Send a GraphQL query to your API and get exactly what you need, nothing more and nothing less. GraphQL queries always return predictable results. Apps using GraphQL are fast and stable because they control the data they get, not the server.”
In this example, we are using our own database, but we could also have used it as a wrapper for a backwards-compatible Rest API.
Conclusion
Even if GraphQL is not on the cusp of mainstream yet, there are plenty of available resources and documentation out there, from the Github repositories, to the official websites and third-party tutorials, so you can’t help to learn it.
We hope that this article will have convinced you about the usability and benefits of GraphQL, and so, that you will now fancy trying out these technologies.
Any question or feedback? Please leave a comment, we will be delighted!
Don’t forget to clap our article and subscribe to get more amazing articles👏.
By the way, we are currently in beta mode, join our crew and make your customers feel valued now at feedier.com
