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.

Related Content you might be interested in

Current Title:

Small book image
Building Vue.js Applications with GraphQL
Heitor Ramon Ribeiro
Jan, 2021 | 298 pages
Small book image
Rapid Application Development with AWS Amplify
Adrian Leung
Jul, 2021 | 344 pages
Small book image
Vue.js 2 Web Development Projects
CHAU GUILLAUME
Nov, 2017 | 398 pages
Small book image
Vue.js 3 By Example
John AuYeung
Apr, 2021 | 320 pages
Table of Contents (9 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Sections
Get in touch
1
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
2
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
3
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
4
Creating Custom Application Components and Layouts
Creating Custom Application Components and Layouts
Technical requirements
Creating custom inputs for the application
Creating the application layouts
5
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
6
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
7
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
8
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think
Setting Up Our Chat App - AWS Amplify Environment and GraphQL

Since Facebook presented GraphQL in 2012, it has taken over the web like a hurricane. Huge companies started to adopt it, while small and medium companies have seen the potential of this query-based API.

It looks strange at first, but as you start to read and experience more of it, you don't want to use REST APIs anymore. The simplicity and data fetching capabilities made the lives of frontend developers easier, because they can fetch only what they want, and are not tied to an endpoint that delivers only a piece of single information.

This is the beginning of a long recipe, where all the recipes are bound to form a complete chat app, but you can learn about GraphQL and AWS Amplify in the recipes without needing to code the whole chapter.

In this chapter, we will learn more about the AWS Amplify environment and...

Previous Section
End of Section 1
Next Section