Quasar and Apollo - Client State without Vuex - Part 1

Part 1 - Getting Started

This tutorial will get you introduced to the process of managing local state by using GraphQL and integrating the vue-apollo package with Quasar via the newly beta-released Quasar Apollo App Extension.

As we go, we'll take a look at using the different methods of "hooking" data into your components and how to manipulate data with vue-apollo. We'll also be demonstrating how to avoid Vuex to manage your app's global state with Apollo's internal "client state" system (its caching system and its formerly known "link-state" package).

Lastly, we'll show you a big key advantage of GraphQL for frontend development. It is the one often overlooked advantage in articles where GraphQL is compared to using a REST API.

This tutorial has 4 parts:

• Part 1 - Getting Started (You are here now)
• Part 2 - Vue-Apollo and its Working Parts - Queries
• Part 3 - Vue-Apollo and its Working Parts - Mutations
• Part 4 - The Trick and the Rest of (Vue-)Apollo

Prerequisites

This article series will assume you have a fair understanding of Vue, Quasar and GraphQL. Nonetheless, we'll give you a small introduction to them all. We'll also link to other resources on these subjects, where appropriate.

The aim of these articles is to get you familiar with working with Quasar/Vue and Apollo and, more importantly, to understand client state management within Apollo Client.

Introductions to GraphQL, Vue, (Vue-)Apollo and Quasar

tl;dr; If you are familiar with all of these technologies, jump down to "Getting Started".

If you aren't familiar with one or all of these great technologies, you should be. They are all being worked on at fever pitch and are really good at what they do.

GraphQL

The GraphQL specification and its JavaScript implementation were created and are being maintained by a dev team at Facebook. In the past, Facebook was running into scaling and development collaboration issues with its REST API. To fix this, they came up with GraphQL. GraphQL is a query language for frontend developers to meet their API needs. It allows them to request the data they need as they need it from the API. And, it also allows them to manipulate the data too. On the server-side, it is just a gateway layer to bind any number of data sources, APIs and business logic layers. It is a smart alternative to REST APIs, especially for reactive component based frontend frameworks like Vue or React.

Vue and Vue-Apollo

Vue JS is a pragmatic, versatile and progressive front-end framework aimed at bringing a new look to reactive programming in frontend development. Contrary to Angular or React, it finds a middle-ground between complexity and flexibility, which many developers find refreshing and thus, it has gained a lot of popularity over the past few years. Vue is being built and maintained by a group of developers and led by Evan You, the founder of Vue.

Vue also has a very good plugin system, which we'll also be taking advantage of, by integrating vue-apollo into our Quasar app. Vue-Apollo allows us to use the Apollo Client package within our app, giving us a full featured and powerful GraphQL client. Vue-Apollo was written and is being maintained by Gulliaume Chau, who is also a VueJS core developer.

Apollo GraphQL

Apollo GraphQL is a JavaScript project built to support GraphQL both on the client and on the server. It is also a highly versatile and yet flexible system and is constantly being improved. Its version 3 is currently in beta and the final release is just around the corner. Apollo's client package has become the defacto-standard to use to build front-end apps for a GraphQL API and its server implementation is in use in a lot of more powerful GraphQL backends. Apollo is built by a team of developers from Meteor.

Quasar

Quasar is a front-end framework which wraps around Vue but in a very unique way. On the one side, it has a fantastic set of components, directives, plugins and utilities to simplify developing Vue applications. On the other side, it has its own very powerful CLI, which allows you to develop and build for multiple platforms with a single JavaScript/ Vue code base. Those platforms include the web, via SPAs, SPAs with Server Side Rendering(SSR), PWAs and PWAs with SSR. Also, hybrid mobile apps via Cordova or Capacitor, desktop apps via Electron and lastly, Browser Extensions for Chrome and Firefox (soon to be released). Quasar is developed by a team of developers led by Razvan Stoenescu

Ok. Now that we've gotten you familiar with the technologies we'll be using, let's get into the nitty gritty.

Getting Started

Before we begin, you can follow the code in this tutorial via our codesandbox example To-do app or git cloning this repo and running yarn install and then quasar dev (of course with the great Quasar CLI).

Please have a look at the code and play around with the app's functionality.

Now, let's learn how to get going with your own project with the above technologies. You'll see, it's quite easy. After this tutorial, you should be able to transition to your own app and then only your imagination is the limit.

Setting up Quasar and a new Project to use Vue-Apollo

If you have never used Quasar, please install its CLI globally.

$ yarn global add @quasar/cli
# or
$ npm install -g @quasar/cli

Once installed, move ("cd") into the parent folder of where you'd like to develop your new app.

Now use the Quasar CLI to create a project.

$ quasar create my-new-app

Naturally, replace "my-new-app" with the name of your app.

Follow the instructions during Quasar's project setup process carefully. Once done, you'll be asked by the final CLI output to cd down into your app's folder and run the project...so with our example above:

$ cd my-new-app

then...

$ quasar dev

This should get your new Quasar app running in dev mode. Simple and awesome, isn't it?

Setting up Apollo and vue-apollo via Quasar's App Extensions

Through Quasar's unique and powerful App Extension system, developers can build a ton of automation for other devlopers and at the same time, offer code to use within Quasar (the ulitimate in code reuse). We've done this too with the App Extension (also known as "AE") quasar-app-extension-apollo. This AE will install Apollo and vue-apollo for you. It will also offer a basic setup to work with those packages within Quasar.

To install the Apollo AE, once more we turn to the great Quasar CLI. Enter this command.

$ quasar ext add @quasar/apollo

ext stands for "extension".

Again, follow the instructions (answer the one question about your GraphQL API's endpoint URL). If you don't have the URL, no worries, you can add it later.

If, at any point later, you want to remove/ uninstall the AE, you can do that too.

$ quasar ext remove @quasar/apollo

Last Step

In order to get the vue-apollo components' gql tag and following template string to work in the templates, we need to set up the vue compiler to accept "dangerous tagged template strings". Don't worry, this isn't a security issue. It sounds worse than it is.

To get the tag template strings working, go to your quasar.conf.js file and enter the following under the build property.

chainWebpack (chain, { isServer, isClient }) {
  chain.module.rule('vue')
    .use('vue-loader')
    .loader('vue-loader')
    .tap(options => {
      options.transpileOptions = {
        transforms: {
          dangerousTaggedTemplateString: true
        }
      }
      return options
    })
  }

If you intend to use .gql or .graphql files in your project, you'll need to add another rule to chainWebpack as below. Note, we'll discuss this more in Part 2.

chain.module.rule('gql')
   .test(/\.(graphql|gql)$/)
   .use('graphql-tag/loader')
   .loader('graphql-tag/loader')

Once that is in the config, you should be ready to go with Quasar and (Vue-)Apollo!

What did we just do with the AE installation?

If you now look at your project's folder, you should see a couple of new files.

In the root, you should see quasar.extensions.json. This tells Quasar you have installed the Apollo AE (and for the future) and it holds the input of your GraphQL API endpoint URI.

{
  "@quasar/apollo": {
    "graphql_uri": "http://api.example.com"
  }
}

If this is wrong, you can change it here. For this tutorial, we won't be needing an endpoint/ server.

In your project you should also see a new folder quasar-app-extension-apollo. This holds two files. apollo-client-config.js and apollo-client-hooks.js.

With the config file, you can add Apollo Client configuration options as you need them.

With the hooks file, you can also add your custom code for processing before or after the client is initialized. For instance, you might want to add code for auhorization after the client in created.

The actually "boot" code is found within your node_modules and tucked away, so you don't need to worry about it. Thus why we have the two files exposed for you.

Conclusion

Again, if you wish to follow this article's code, please just clone the repo or go to the codesandbox offered above. This won't be a step by step of building the Todo app. It is more an explanation of what is happening within it..

In Part 2, we'll take a deeper look into (Vue-)Apollo and some of its working parts, namely queries.

Let us know in the comments below what your interests are in either GraphQL, Quasar/ Vue and/ or Apollo. Are you using them already? Would you like to use them? What are your thoughts on the technologies? We'd like to know.

Comments

[Jim Bruno Goldberg]

This is the first time I found the information really organized and updated about quasar+vuejs+graphlql+apollo. Thank you VERY much. This is a life-saver. :P
I found a lot of "pieces of the puzzle", but nothing that to-the-point and with logic progression.
Yeph, I am using the stack for a project. I am really enjoying it.
I trying to figure out yet the best practices.. but I will get there, at some point.