amplify-js: error getting datastoreuser: DOMException: Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found.

Before opening, please confirm:

I have searched for duplicate or closed issues.
I have read the guide for submitting bug reports.
I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

App Id

dekc4p24zvjqs

Region

us-east-2

Environment name

staging

Amplify CLI Version

latest

If applicable, what version of Node.js are you using?

16.2.0

What operating system are you using?

Mac

Browser type?

Google Chrome

Describe the bug

When I try to query the “User” model with DataStore.query method, even though the data does exist on the Admin UI, it keeps failing with an error below.

error getting datastoreuser: DOMException: Failed to execute ‘transaction’ on ‘IDBDatabase’: One of the specified object stores was not found. at Proxy.eval (webpack-internal:///./node_modules/idb/build/esm/wrap-idb-value.js:156:26) at Proxy.method (webpack-internal:///./node_modules/idb/build/esm/index.js:73:25) at IndexedDBAdapter.eval (webpack-internal:///./node_modules/@aws-amplify/datastore/lib-esm/storage/adapter/IndexedDBAdapter.js:558:58) at step (webpack-internal:///./node_modules/@aws-amplify/datastore/lib-esm/storage/adapter/IndexedDBAdapter.js:38:23) at Object.eval [as next] (webpack-internal:///./node_modules/@aws-amplify/datastore/lib-esm/storage/adapter/IndexedDBAdapter.js:19:53) at fulfilled (webpack-internal:///./node_modules/@aws-amplify/datastore/lib-esm/storage/adapter/IndexedDBAdapter.js:10:58)

I’m pretty sure it’s not a problem with just the DataStore query method since it works for all the other models. It only doesn’t work for the particular model.

Expected behavior

I even tried on a test page, and it should query all the “Users” from DataStore. For now, just to debug, I didn’t even pass ID as a prop, but it doesn’t work, anyway.

In this NextJS application, I would usually do in getServerSideProps, but even if I just try with useEffect to have it after render, it still doesn’t work.

Reproduction steps

import React, { useEffect, useState } from "react";
import AuthLayout from "layouts/Auth.js";
import { DataStore } from "@aws-amplify/datastore";
import { User } from "../../src/models";

function Settings() {
  const [dataStoreUser, setDataStoreUser] = useState(null);

  useEffect(() => {
    getUser();
  }, []);

  async function getUser() {
    try {
      const dataStoreUser = await DataStore.query(User);
      console.log(dataStoreUser);
      setDataStoreUser(dataStoreUser);
    } catch (error) {
      console.log("error getting datastoreuser: ", error);
    }
  }

  return (
    <>
      <div></div>
    </>
  );
}

Settings.layout = AuthLayout;
export default Settings;

Additional information

No response

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 42 (12 by maintainers)

Most upvoted comments

You were THE most passionate one to answer my error reports really.

I appreciate every single comment you left on this report. I think putting it on _app.js will be a good one, and I agree with your reasons. Too many things to learn about both NextJS and Amplify… we can do this haha

Again, thank you so much!🤩🚀

chris-lee-code on Jul 9, 2021

@chrisbonifacio Ok, I see. So the page definitely needs DataStore.start(). I removed the workaround and used your solution, and it works fine.

I took a look at your Loom video, and it also helped me a lot.

It seems like it starts working on other pages as well wherever I use DataStore on the client-side🚀. I think the documentation about the importance of DataStore.start() and how to troubleshoot the indexedDB population issues need to be well documented for others to suffer in the future.

Thank you so much!

chris-lee-code on Jul 9, 2021

@chrisbonifacio @sammartinez @cwoolum

I found a way to make things work! 28 days…time flies. Anyway, I found the workaround on the similar issue I linked before. https://github.com/aws-amplify/amplify-js/issues/5130#issuecomment-852630245

DataStore.start().catch(() => {
  DataStore.clear().then(() => {
    DataStore.start();
  });
});

I added the code in useEffect and now I can find my DataStore models on indexedDB.

Still, it seems to be a workaround, I think this really needs to be addressed. There must be issues with initializing DataStore on the client-side.

chris-lee-code on Jul 9, 2021

Anytime! Thank you for bearing with me haha

I’ve only ever had this issue in a Next app, SPAs usually seem to work fine without DataStore.start being called so this was a learning experience for myself as well. I will definitely take this info to the team and see about updating the docs for using DataStore in a Next/SSR app.

I would recommend keeping it in _app.js just to have all pages covered. It might become a little tedious to have the same code repeated in all those other pages that might need it. Also, since _app gets rendered and initializes every other page, DataStore should always be ready by the time each page renders which, I’m assuming, is why queries seem to work without DataStore.start on any of the other pages I navigate to on my app to test it on.

Let me what you think about that and thanks again for your patience ❤️

chrisbonifacio on Jul 9, 2021

Not sure that you need to call DataStore.start() twice 🤔 If you try the example I posted before, does that work for you? I didn’t have to clear DataStore either.

Also, added a loom video above to show the behavior I was experiencing with and without calling DataStore.start() on the client side.

chrisbonifacio on Jul 9, 2021

Still, I wouldn’t want to clear my DataStore every time the user enters each page. In this case, the website will need to query from the server all the time without any help from the local data. Sync every time will be too heavy

chris-lee-code on Jul 9, 2021