Offline-first made easy with GraphQL, Amplify DataStore and Vue

Offline-first made easy with GraphQL, Amplify DataStore and Vue

In this article, you will create Chatty, a chatroom Progressive Web App (PWA) that stores data on the device while offline, and synchronises in real-time with other devices when online using Amplify DataStore, GraphQL and Amazon DynamoDB. Create a PWA cloud-enabled offline-first chatroom using Vue. Offline-first made easy with GraphQL, Amplify DataStore and Vue

In this article, you will create Chatty, a chatroom Progressive Web App (PWA) that stores data on the device while offline, and synchronises in real-time with other devices when online using Amplify DataStore, GraphQL and Amazon DynamoDB. We will cover:

  • Introduction to Offline-firstPWAs and Amplify DataStore
  • Setting up a new project with the Vue CLI
  • Creating a new GraphQL API
  • Amplify DataStore: setup, data models and usage
  • Creating the UI with Vue: the chatroom, sending and deleting messages; and doing real-time with subscriptions
  • Making Chatty a PWA
  • Adding a PWA custom configuration
  • Improving UX while offline
  • Publishing your app via the AWS Amplify Console
  • Installing Chatty in the Desktop and Mobile
  • Cleaning up cloud services

In order to follow this post you will need a basic knowledge of GraphQL. You can learn the basics following this tutorial at graphql.org. We will be referring to GraphQL schema, directives, types, queries, mutations, subscriptions and resolvers.

Please let me know if you have any questions or want to learn more at  @gerardsans.

  Final solution and step by step tutorial in  GitHub.

graphql pwa aws-amplify javascript vuejs

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

AWS Amplify and GraphQL— an Introduction

n the rapidly evolving GraphQL ecosystem there are several popular GraphQL clients available today including the Apollo Client, URQL, and

Creating React + GraphQL Serverless Web application using AWS Amplify

AWS Amplify is a service provided by Amazon Web Services where it gives the ability to create end to end solutions for mobile and web platforms with a more secure and scalable way using AWS services.

How to Build a CRUD App with Amplify and AWS AppSync

AWS Amplify is a framework that lets us develop a web or mobile application quickly. In this tutorial, we are going to continue to learn how to perform CRUD operations with the database by using GraphQL mutations. AWS Amplify has a complete toolchain wiring and managing APIs with GraphQL. The API we will be creating in this tutorial is a GraphQL API using AWS AppSync (a managed GraphQL service) and the database will be Amazon DynamoDB (a NoSQL database). In this tutorial, you'll see How to perform CRUD operations with the database by using GraphQL mutations

How to Integrate AWS Amplify Authentication For React Native

AWS Amplify is a framework that lets you develop a web or mobile application quickly, by accessing the backend cloud services offered by AWS. In this article, we are going to learn how to use AWS Amplify in React Native by building a fully functional login and registration flow. The Ultimate Guide For Integrate AWS Amplify Authentication For React Native

Building Robust GraphQL APIs with AWS Amplify and AWS AppSync

GraphQL is a solid way of building responsive web and mobile APIs. It's not always obvious, however, how to structure your APIs. When should you use a transformer? When are GraphQL subscriptions appropriate? In this tech talk, we'll go through the principles of building robust APIs powered by GraphQL for a range of interesting use cases.