2020-04-23
2089
#aws
Kay Plößer
17506
Apr 23, 2020 ⋅ 7 min read

Creating offline web apps with AWS Amplify DataStore

Kay Plößer Software engineer and web enthusiast.

Recent posts:

A guide to modern frontend architecture patterns

Frontend architecture is the foundation of your frontend codebase. Here’s how to optimize the pattern that you choose.

Shalitha Suranga
Feb 12, 2025 ⋅ 9 min read
A Guide To Graceful Degradation In Web Development

A guide to graceful degradation in web development

Implement graceful degradation in frontend apps by handling failures, mitigating API timeouts, and ensuring a seamless UX with fallbacks.

Rosario De Chiara
Feb 11, 2025 ⋅ 4 min read
Building High-Performance Websites Using Htmx And Go

Building high-performance websites using htmx and Go

Use htmx and Go to build high-performance websites, leveraging server-side rendering and minimal JavaScript for fast and efficient applications.

Abhinav Anshul
Feb 10, 2025 ⋅ 11 min read
improving ux with scroll-select box

How to improve UX with a scroll-select box

The scroll-select box is a great tool for frontend developers to improve the user experience of their applications. Learn how to build a scrollable date picker that mimics the iOS style, but with the exemption of the <select> element.

Emmanuel Odioko
Feb 7, 2025 ⋅ 10 min read
View all posts

15 Replies to "Creating offline web apps with AWS Amplify DataStore"

  1. Thanks for the post, I’m new to amplify and tried to follow along with my own api. Only problem is now my queries and mutations have the following added, any pointers would be great, thank you!!

    _version
    _deleted
    _lastChangedAt

  2. Thanks, the penny is starting to drop slowly but surely! I’m in mock mode, can graphiql be used to make queries or mutations synced with Datastore?

  3. Thanks for the post, very well written. Is there anyway to make the local storage only contain your own Items and not everyone’s?

  4. From what I can see, that’s true for the app, but in my PoC, if I inspect the local DB attached to the application you can see data from all owners in plaintext. This is a showstopper for us, so I’m hoping it’s just that I’ve done something wrong configuring it.

  5. Hmmm, well I’ve just run through your example above verbatim and I only see the items I should in the local Indexed DB, so maybe I spoke too soon. I wonder if the problem is trying to retrofit the datastore into an existing application.

    So, thanks for a well written example and thanks for prompting me to have another look at datastore!

  6. Actually, that’s not the case. The local writes weren’t syncing to the backend, which is why they only appeared to be in the correct local indexed db, so it is a problem. I’ll raise a ticket with the datastore project, rather than polluting your comments. Thanks again

  7. Thanks for the post! I have completed the whole tutorial with the latest stable versions of all the amplify libraries and almost everything works! I have the app running on two different browsers, logged in with the same user. When I update the grocery list on browser one, the list doesn’t automatically update on browser two… It only updates after I reload the page. It should update automatically, right?

    I’m not sure how stable DataStore is yet… just started working with it some days ago and the documentation is lacking. Any help would be greatly appreciated. In my scenario above, browser two should update after changes in browser one, right? without having to reload the browser page?

    Again, thank you very much for this tutorial!

    Santi

  8. Hi Santiago,

    Was it working as expected at any stage for you?

    In my case I had already set up an Amplify project and tried to add Datastore to my project which did not work for me either.

    So I started a brand new amplify project following a yt video from Nader Dabit called ‘…Offline first…’

    I followed that and it worked for me.

    Alan

  9. Hi Alan,

    Sync between two browsers never worked for me following this tutorial… Everything else has been working fine though. My general approach to learning and getting Amplify to work has been doing multiple tutorials from different sites until I find the steps that work… Then, I go and recreate all the steps in a new app, making sure I didn’t miss anything and writing my own notes.

    I also did some tutorials from Nader Dabit, not sure if the tutorial I did from him included Authentication and DataStore. I will check the one you’re recommending. Thanks for the help!

    Santiago

Leave a Reply