Book Image

Building Vue.js Applications with GraphQL

By : Heitor Ramon Ribeiro

Book Image

Building Vue.js Applications with GraphQL

By: Heitor Ramon Ribeiro

Overview of this book

Since its release by Facebook in 2012, GraphQL has taken the internet by storm. Huge companies such as Airbnb and Audi have started to adopt it, while small to medium-sized companies are now recognizing the potential of this query-based API. GraphQL may seem strange at first, but as you start to read about and experience more of it, you won’t want to use REST APIs anymore. With the recipes in this book, you will learn how to build a complete real-time chat app from scratch. Starting by creating an AWS Amplify environment, you will delve into developing your first GraphQL Schema. You will then learn how to add the AppSync GraphQL client and create your first GraphQL mutation. The book also helps you to discover the simplicity and data fetching capabilities of GraphQL that make it easy for front-end developers to communicate with the server. You will later understand how to use Quasar Framework to create application components and layouts. Finally, you will find out how to create Vuex modules in your application to manage the app state, fetch data using the GraphQL client, and deploy your application to the web. By the end of this book, you’ll be well versed in proof-of-concept full-stack applications that explore the power of GraphQL with AWS Amplify, and you'll be able to use Quasar Framework to create your Vue applications.

Preface

Who this book is for

What this book covers

To get the most out of this book

Data Binding, Events, and Computed Properties

Data Binding, Events, and Computed Properties

Technical requirements

Creating your first project with the Vue CLI

Creating the hello world component

Creating an input form with two-way data binding

Adding an event listener to an element

Removing the v-model directive from the input

Creating a dynamic to-do list

Creating computed properties and understanding how they work

Displaying cleaner data and text with custom filters

Creating filters and sorters for a list

Creating conditional filters to sort list data

Adding custom styles and transitions

Using vue-devtools to debug your application

Free Chapter

Components, Mixins, and Functional Components

Components, Mixins, and Functional Components

Technical requirements

Creating a visual template component

Using slots and named slots to place data inside your components

Passing data to your component and validating the data

Creating functional components

Accessing your children component's data

Creating a dynamically injected component

Creating a dependency injection component

Creating a component mixin

Lazy loading your components

Setting Up Our Chat App - AWS Amplify Environment and GraphQL

Setting Up Our Chat App - AWS Amplify Environment and GraphQL

Technical requirements

Creating your AWS Amplify environment

Creating your first GraphQL API

Adding the GraphQL client to your application

Creating the AWS Amplify driver for your application

Creating Custom Application Components and Layouts

Creating Custom Application Components and Layouts

Technical requirements

Creating custom inputs for the application

Creating the application layouts

Creating the User Vuex Module, Pages, and Routes

Creating the User Vuex Module, Pages, and Routes

Technical requirements

Creating the User Vuex module in your application

Creating User pages and routes for your application

Creating Chat and Message Vuex, Pages, and Routes

Creating Chat and Message Vuex, Pages, and Routes

Technical requirements

Creating GraphQL queries and fragments

Creating the Chat Vuex module on your application

Creating the Contacts page of your application

Creating the Messages page of your application

Transforming Your App into a PWA and Deploying to the Web

Transforming Your App into a PWA and Deploying to the Web

Technical requirements

Transforming the application into a PWA

Creating the application update notification

Adding a custom PWA installation notification on iOS

Creating the production environment and deploying

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Creating the Messages page of your application

What is a chat application without messages? Just a simple contact list. In this final recipe, we will finish the whole cycle of our application, creating the possibility for the user to communicate with other users directly.

In this recipe, we will create the Chat page, the ChatInput component, and the Messages layout.

Getting ready

The prerequisites for this recipe are as follows:

The project from the previous recipe
Node.js 12+

The Node.js global objects that are required are as follows:

@aws-amplify/cli
@quasar/cli

To start our user messages pages, we will continue with the project that was created in the Creating the Contacts page of your application recipe.

How to do it...

In this recipe, we need to split it into three parts: the creation of the ChatInput component, the creation of the Messages layout, and finally, the creation of the Chat page.

Creating the ChatInput component

Here we will create the ChatInput component. This component...