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

Accessing your children component's data

Normally, parent-child communications are done via events or props. But sometimes, you need to access data, functions, or computed properties that exist in the child or the parent function.

Vue provides a way for us to interact in both ways, thereby opening doors to communications and events such as props and event listeners.

There is another way to access the data between the components: by using direct access. This can be done with the help of a special attribute in the template when using the single-file component, or by making a direct call to the object inside the JavaScript. This method is seen by some as a little lazy, but there are times when there really is no other way to do it than this.

Getting ready

The prerequisite for this recipe is Node.js 12+.

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

@vue/cli
@vue/cli-service-global

To complete this recipe, we will use our Vue project and the Vue CLI...