Building Vue.js Applications with GraphQL E-Book

Heitor Ramon Ribeiro

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 289

Veröffentlichungsjahr: 2021

Beschreibung

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.

Leseprobe

Building Vue.js Applications with GraphQL

Develop a complete full-stack chat app from scratch using Vue.js, Quasar Framework, and AWS Amplify

Heitor Ramon Ribeiro

BIRMINGHAM - MUMBAI

Building Vue.js Applications with GraphQL

Copyright © 2020 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Ashwin NairPublishing Product Manager: Pavan RamchandaniContent Development Editor: Abhishek JadhavSenior Editor: Hayden EdwardsTechnical Editor: Deepesh PatelCopy Editor:Safis EditingProject Coordinator: Kinjal BariProofreader: Safis EditingIndexer: Priyanka Dhadke Production Designer: Shankar Kalbhor

First published: December 2020

Production reference: 2280121

Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.

ISBN 978-1-80056-507-4

www.packt.com

Packt.com

Subscribe to our online digital library for full access to over 7,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.

Why subscribe?

Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals

Improve your learning with Skill Plans built especially for you

Get a free eBook or video every month

Fully searchable for easy access to vital information

Copy and paste, print, and bookmark content

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.packt.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.

At www.packt.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.

Contributors

About the author

Heitor Ramon Ribeiro has been developing web applications for over 15 years, continually navigating frontend and backend development. By following his passion for UX/UI and programming, he chose to stay in frontend development

Heitor has built enterprise applications for businesses using Vue.js and clean architecture principles, shifting his course from legacy applications to the new world of single-page applications (SPAs) and progressive web applications (PWAs). He thinks that almost anything is possible today with a browser and that JavaScript is the future of programming.

When he's not programming or leading a frontend team, he's with his family having fun, streaming their gaming sessions, or playing some first-person shooter games.

I want to thank my lovely wife, Raquel, for being with me every day, helping and supporting me throughout the process of publishing my second book. To my son, Marco: your father loves you very much and is proud of you.

To my family and friends who helped me develop this book, especially Bruno Ventura, who helped me a lot with AWS Amplify and GraphQL.

To everyone in the Quasar Framework community: team members, key developers, and especially Razvan Stoenescu. None of this would have been possible without his initial spark.

About the reviewer

Brice Chaponneau has worked as a lead developer, technical auditor, and project manager in various sectors, such as e-commerce, industry, banking, and insurance. He has worked for large and medium-sized accounts such as Arcelor Mittal, Société Générale, Natixis, Carrefour, Galeries Lafayette, and KPMG. He wrote a book on Vue.js 2 in French for Éditions Eyrolles in 2019. Today, he specializes in micro frontends, performance, and web architecture.

Packt is searching for authors like you

If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.

Table of Contents

Title Page

Copyright and Credits

Building Vue.js Applications with GraphQL

About Packt

Why subscribe?

Contributors

About the author

About the reviewer

Packt is searching for authors like you

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Conventions used

Sections

Getting ready

How to do it…

How it works…

There's more…

See also

Get in touch

Reviews

Data Binding, Events, and Computed Properties

Technical requirements

Creating your first project with the Vue CLI

Getting ready

How to do it...

There's more...

See also

Creating the hello world component

Getting ready

How to do it...

How it works...

See also

Creating an input form with two-way data binding

Getting ready

How to do it...

How it works...

See also

Adding an event listener to an element

Getting ready

How to do it...

How it works...

See also

Removing the v-model directive from the input

Getting ready

How to do it...

How it works...

See also

Creating a dynamic to-do list

Getting ready

How to do it...

How it works...

See also

Creating computed properties and understanding how they work

Getting ready

How to do it...

How it works...

See also

Displaying cleaner data and text with custom filters

Getting ready

How to do it...

How it works...

See also

Creating filters and sorters for a list

Getting ready

How to do it...

How it works...

See also

Creating conditional filters to sort list data

Getting ready

How to do it...

How it works...

See also

Adding custom styles and transitions

Getting ready

How to do it...

How it works...

See also

Using vue-devtools to debug your application

Getting ready

How to do it...

See also

Components, Mixins, and Functional Components

Technical requirements

Creating a visual template component

Getting ready

How to do it...

How it works...

See also

Using slots and named slots to place data inside your components

Getting ready

How to do it...

How it works...

See also

Passing data to your component and validating the data

Getting ready

How to do it...

How it works...

See also

Creating functional components

Getting ready

How to do it...

How it works...

See also

Accessing your children component's data

Getting ready

How to do it...

Creating the star rating input

Creating the StarRatingDisplay component

Creating the StarRating component

Data manipulation on child components

How it works...

There's more...

See also

Creating a dynamically injected component

Getting ready

How to do it...

How it works...

See also

Creating a dependency injection component

Getting ready

How to do it...

How it works...

See also

Creating a component mixin

Getting ready

How to do it...

How it works...

See also

Lazy loading your components

Getting ready

How to do it...

How it works...

See also

Setting Up Our Chat App - AWS Amplify Environment and GraphQL

Technical requirements

Creating your AWS Amplify environment

Getting ready

How to do it...

Creating an AWS account

Configuring AWS Amplify

Creating your Quasar project

Initializing the AWS Amplify project

How it works...

See also

Creating your first GraphQL API

Getting ready

How to do it...

Creating the AWS Cognito authentication

Creating the GraphQL API

Creating the GraphQL SDL schema

Creating the GraphQL API with AWS Amplify

How it works...

See also

Adding the GraphQL client to your application

Getting ready

How to do it...

How it works...

See also

Creating the AWS Amplify driver for your application

Getting ready

How to do it...

Creating the AWS Amplify Storage driver

Adding AWS Amplify Storage

Creating the Amplify Storage driver

Creating the Amplify Auth driver

Creating the Amplify AppSync instance

How it works...

See also

Creating Custom Application Components and Layouts

Technical requirements

Creating custom inputs for the application

Getting ready

How to do it...

Creating the UsernameInput component

The single file component section

The single file component section

Creating a PasswordInput component

The single file component section

The single file component section

Creating the NameInput component

The single file component section

The single file component section

Creating the EmailInput Component

The single file component section

The single file component section

Creating the AvatarInput component

The single file component section

The single file component section

Creating the avatar mixin

Creating the AvatarDisplay component

The single file component section

The single file component section

How it works...

See also

Creating the application layouts

Getting ready

How to do it...

Creating the base layout

The single file component section

The single file component section

Creating the chat layout

The single file component section

The single file component section

How it works...

See also

Creating the User Vuex Module, Pages, and Routes

Technical requirements

Creating the User Vuex module in your application

Getting ready

How to do it...

Creating the User Vuex state

Creating the User Vuex mutations

Creating the User Vuex getters

Creating the User Vuex actions

Adding the User module to Vuex

How it works...

See also

Creating User pages and routes for your application

Getting ready

How to do it...

Adding the Dialog plugin to Quasar

Creating the User login page

Single-file component section

Single-file component section

Creating the User signup page

Single-file component section

Single-file component section

Creating the User validation page

Single-file component section

Single-file component section

Creating the User edit page

Single-file component section

Single-file component section

Creating application routes

Adding the authentication guard

How it works...

There's more...

See also

Creating Chat and Message Vuex, Pages, and Routes

Technical requirements

Creating GraphQL queries and fragments

Getting ready

How to do it...

Creating the GraphQL fragments

Applying fragments on the User Vuex actions

How it works...

See also

Creating the Chat Vuex module on your application

Getting ready

How to do it...

Creating the Chat Vuex state

Creating the Chat Vuex mutations

Creating the Chat Vuex getters

Creating the Chat Vuex actions

Adding the Chat module to Vuex

How it works...

See also

Creating the Contacts page of your application

Getting ready

How to do it...

Creating the NewConversation component

Single file component section

Single-file component section

Creating the Contacts page

Single-file component section

Single-file component section

How it works...

See also

Creating the Messages page of your application

Getting ready

How to do it...

Creating the ChatInput component

Single-file component section

Single-file component section

Creating the Messages layout

Single-file component section

Single-file component section

Changing the application routes

Creating the Messages page

Single-file component section

Single-file component section

How it works...

See also

Transforming Your App into a PWA and Deploying to the Web

Technical requirements

Transforming the application into a PWA

Getting ready

How to do it...

How it works...

See also

Creating the application update notification

Getting ready

How to do it...

How it works...

See also

Adding a custom PWA installation notification on iOS

Getting ready

How to do it...

How it works...

See also

Creating the production environment and deploying

Getting ready

How to do it...

How it works...

See also

Other Books You May Enjoy

Leave a review - let other readers know what you think

Preface

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 medium to small companies is now recognizing the potential of this query-based API.GraphQL may seem strange at first, but as you start to read and experience more of it, you wouldn'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.

Who this book is for

This book is for intermediate-level Vue.js developers who want to take their first step toward full-stack development. If you want to learn more about Vuex development with custom business rules and making an entry-level enterprise architectural application, this book is for you. Prior knowledge of Vue.js and JavaScript is required before getting started with this book.

What this book covers

Chapter 1, Data Binding, Form Validations, Events, and Computed Properties, discusses the basic Vue developments and component concepts, including v-model, event listeners, computed properties, and for loops. The reader will be introduced to the Vuelidate plugin for form validation and how to use it on a Vue component, along with how to debug a Vue component with vue-devtools.

Chapter 2, Components, Mixins, and Functional Components, walks the reader through building components with different approaches, including custom slots for contents, validated props, functional components, and creating mixins for code reusability. It then introduces the reader to a set of different approaches for accessing child components' data, creating a dependency injection component and dynamic injected component, and how to lazy load a component.

Chapter 3,Setting Up Our Chat App - AWS Amplify Environment and GraphQL, introduces the reader through the AWS Amplify CLI on how to create the Amplify environments. Creating their authentication gateway with AWS Cognito, an S3 File hosting bucket, and finally creating the GraphQL API. In this process, the reader will create the drivers to communicate between the frontend and backend.

Chapter 4, Creating Custom Application Components and Layouts, from now on the reader will start the development of the application. In this chapter, the reader will create the component that will be used in the creation of the pages of the chat application. The reader will create components like the PasswordInput, AvatarInput, EmailInput, and so on.

Chapter 5, Creating the User Vuex, Pages, and Routes, walks the reader through building the application's first Vuex module, which will be used to manage the User business rules and store the user data. Then the reader will create the user-related page for registration, editing, and validation. Finally, the reader will add the pages to the vue-router schema.

Chapter 6, Creating Chat and Message Vuex, Pages, and Routes, the reader will continue the creation of the Vuex modules of the application. Now it's time to create the Chat module. This module will contain the business rules for communication between users and store the chat data. Finally, the user will create the Chat-related page for conversation listing and the chat page, and then add it to the vue-router schema.

Chapter 7, Transforming your App into a PWA and Deploying to the Web, in this last chapter, the reader will finish the application by transforming it into a PWA application, adding the updates notifications and installation banner for iOS devices. Finally, the user will deploy the application to the web.

To get the most out of this book

This book uses Vue.js 2.7 from Chapter 2, Components, Mixins, and Functional Components, onwards, as it is the latest support version for Quasar Framework at the time of writing. This book will have code in Vue.js 3 up to Chapter 3, Setting Up Our Chat App - AWS Amplify Environment and GraphQL . All code will be updated with the final release on the GitHub repository here: https://github.com/PacktPublishing/Building-Vue.js-Applications-with-GraphQL

You will need Node.js 12+ installed, Vue CLI updated to the latest version, and a good code editor of some sort. Other requirements will be introduced in each recipe. All the software requirements are available for Windows, macOS, and Linux.

Here's a table summarizing all the requirements:

Chapter Number

Software/hardware covered in the book

Download Links

OS requirements

1 to 7

Vue CLI 4.X

https://cli.vuejs.org/

Windows / Linux / macOS

3 to 7

Quasar-CLI 1.X

https://quasar.dev/

Windows / Linux / macOS

3 to 7

Visual Studio Code 1.4.X and IntelliJ WebStorm 2020.2

https://code.visualstudio.com/

Windows / Linux / macOS

3 to 7

AWS Amplify CLI 3.3.X

https://aws.amazon.com/appsync/resources/

Windows / Linux / macOS

1 to 7

Node.js 12+-

https://nodejs.org/en/download/

Windows / Linux / macOS

If you are using the digital version of this book, we advise you to type the code yourself or access the code via the GitHub repository (link available in the next section). Doing so will help you avoid any potential errors related tothe copying and pasting of code.

Download the example code files

You can download the example code files for this book from your account atwww.packt.com. If you purchased this book elsewhere, you can visitwww.packtpub.com/supportand register to have the files emailed directly to you.

You can download the code files by following these steps:

Log in or register at

www.packt.com

.

Select the

Support

tab.

Click on

Code Downloads

.

Enter the name of the book in the

Search

box and follow the onscreen instructions.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

WinRAR/7-Zip for Windows

Zipeg/iZip/UnRarX for Mac

7-Zip/PeaZip for Linux

The code bundle for the book is also hosted on GitHub athttps://github.com/PacktPublishing/Building-Vue.js-Applications-with-GraphQL. In case there's an update to the code, it will be updated on the existing GitHub repository.

We also have other code bundles from our rich catalog of books and videos available athttps://github.com/PacktPublishing/. Check them out!

Conventions used

There are a number of text conventions used throughout this book.

CodeInText:Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles.Here is an example:"To do this, open PowerShell asadministrator and execute the > npm install -g windows-build-tools command."

A block of code is set as follows:

<template> <header> <div id="blue-portal" /> </header></header>

Any command-line input or output is written as follows:

> npm run serve

Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "Click on the Email button to be redirected to the Email Sign up form"

Warnings or important notes appear like this.

Tips and tricks appear like this.

Sections

In this book, you will find several headings that appear frequently (Getting ready,How to do it...,How it works...,There's more..., andSee also).

To give clear instructions on how to complete a recipe, use these sections as follows:

Getting ready

This section tells you what to expect in the recipe and describes how to set up any software or any preliminary settings required for the recipe.

How to do it…

This section contains the steps required to follow the recipe.

How it works…

This section usually consists of a detailed explanation of what happened in the previous section.

There's more…

This section consists of additional information about the recipe in order to make you more knowledgeable about the recipe.

See also

This section provides helpful links to other useful information for the recipe.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book,mention the book title in the subject of your message and email us [email protected].

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visitwww.packtpub.com/support/errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.

Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us [email protected] a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visitauthors.packtpub.com.

Reviews

Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!

For more information about Packt, please visit packt.com.