search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.41k stars 2.11k forks source link

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

Closed chris-lee-code closed 3 years ago

chris-lee-code commented 3 years ago

Before opening, please confirm:

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

chris-lee-code commented 3 years ago

This is how the user model looks like.

스크린샷 2021-06-11 오전 10 26 59

I have tried "amplify pull" so many times just to check if there were any issues with pulling the data model to my local. Still, it doesn't work.

chris-lee-code commented 3 years ago

Update

I tried other models on the test page, and even other models create the same problems. Was my approach wrong when using the DataStore.query? I brought the same code from other pages that still work.

I would really like to have some explanations on what

DOMException: Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found.

means. The error is not quite self-explanatory. All necessary props were passed (Model, id). Thanks

cwoolum commented 3 years ago

Hi @supersonix77, within the AdminUI, are you able to use the content editor? This would mean that your models are deployed correctly.

chris-lee-code commented 3 years ago

Yes I can use my content editor to add information. But couldn’t query the data created by the content on Admin UI

chris-lee-code commented 3 years ago

@cwoolum and could you also let me know when and what kind of situations that kind of error usually pops out?

cwoolum commented 3 years ago

This is actually more of a amplify-js issue so I'm not familiar with this error. I found this similar ticket but it's unresolved as of now.

https://github.com/aws-amplify/amplify-js/issues/5130

Would you be able to send a repro to [REDACTED] and we can take a look to make sure everything is configured correctly in the app?

chris-lee-code commented 3 years ago

@cwoolum Okay, got it.

Could you let me know what needs to be sent to [REDACTED]?

Just the same thing on the issue report on top of this page? Or access to Admin UI?

Thanks.

chris-lee-code commented 3 years ago

One thing I figured out is I can fetch if I query the data on the pre-rendering state.

I am not sure if you know details about Next JS framework, but if I query in getServerSideProps, I can fetch without any errors.

However, if I use useEffect() or just try with a simple button to trigger the getUser after build, it causes the error.

Could this be related to server-side rendering?

cwoolum commented 3 years ago

Oh, it could definitely be a SSR issue. Can you try making a small change to your code and see if this works?

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

    getUser();
  }, []);
cwoolum commented 3 years ago

@supersonix77 , I'm thinking more about how this could be related to SSR. In your Amplify configure, can you ensure that you have ssr enabled similar to below ?

import config from '../aws-exports';
Amplify.configure({  ...config, ssr: true});

According to the docs, it looks like you need to use getServerSideProps for this to work.

https://docs.amplify.aws/lib/ssr/q/platform/js#datastore

chris-lee-code commented 3 years ago

@cwoolum Hi. I have tried both of your solutions and it still makes the same error.

I really appreciate the link you provided about using NextJS, and I have been using getServerSideProps with no errors by using JSON.parse(JSON.stringify(MODEL instance))), but I think you gave me a better way.

I understand that when server-side rendering is enabled, getServerSideProps works. But I don't think that means nothing can be fetched after the build on the client-side. DataStore should be available for both server-side and client-side when SSR is enabled.

Just a clarification, this error comes from the post-build state (useEffect or just triggering after the build.)

chris-lee-code commented 3 years ago

Hi @cwoolum

I just read one of the documentations made by AWS and realized they used useCallback to query DataStore in an example linked below.

https://aws.amazon.com/ko/blogs/mobile/new-in-amplify-datastore-selective-sync-and-sort-functionality/

Could you see if this could be related to this error? Thanks.

cwoolum commented 3 years ago

Hey @supersonix77 , I don't think it's related to useCallback. I'm still thinking this is related to the datastore not syncing before it tries to query again. Can you try wrapping your code in DataStore.observe? This will force the store to synchronize before it does any querying. It should look like this

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

In a full implementation, you'll want to keep track of the subscription and make sure it's disposed before the component is unloaded to free up memory.

chris-lee-code commented 3 years ago

Hi @cwoolum! I have tried your solution, and yet it doesn't work. A problem is that even if I just get rid of the query part of the solution, it just creates the same error on the Observe part.

NotFoundError: Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found.

I don't think it can even observe the model.

chris-lee-code commented 3 years ago

@cwoolum The Hub listener doesn't really listen to any DataStore events on useEffect...

I don't know if my implementation was wrong for the hub listener. 

useEffect(() => {
    // Create listener that will stop observing the model once the sync process is done
    const removeListener = Hub.listen("datastore", async (capsule) => {
      const {
        payload: { event, data },
      } = capsule;

      console.log("DataStore event", event, data);

      if (event === "ready") {
        console.log("DataStore is ready");
      }
    });

    // Start the DataStore, this kicks-off the sync process.

    return () => {
      removeListener();
    };
  }, []);

Could you take a look? Thanks.

sammartinez commented 3 years ago

Thanks for cutting this issue. cc @amhinson for visibility

cwoolum commented 3 years ago

Hey @supersonix77, I think unfortunately this is beyond my knowledge in this specific topic. @amhinson should be able to help you from here.

amhinson commented 3 years ago

@supersonix77 Could you share a few more details:

chris-lee-code commented 3 years ago

Thank you so much for your help so far @cwoolum!

hey @amhinson, I'll provide the details below.

I configured the Ampilfy on _app.js in NextJS framework. 

Amplify.configure({ ...awsmobile, ssr: true });

class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }
  render() {
    const { Component, pageProps } = this.props;

    const Layout = Component.layout || (({ children }) => <>{children}</>);

    return (
      <React.Fragment>
        <Head>
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
          />
          <title>Hello</title>
        </Head>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </React.Fragment>
    );
  }
}

export default MyApp;

aws-exports (remove any sensitive data)

const awsmobile = {
    "aws_project_region": "us-east-2",
    "aws_cognito_identity_pool_id": "us-east-2:****",
    "aws_cognito_region": "us-east-2",
    "aws_user_pools_id": "us-east-*****",
    "aws_user_pools_web_client_id": "*****",
    "oauth": {
        "domain": "*****-staging.auth.us-east-2.amazoncognito.com",
        "scope": [
            "phone",
            "email",
            "openid",
            "profile",
            "aws.cognito.signin.user.admin"
        ],
        "redirectSignIn": "https://localhost:3000/",
        "redirectSignOut": "https://localhost:3000/",
        "responseType": "code"
    },
    "federationTarget": "COGNITO_USER_POOLS",
    "aws_appsync_graphqlEndpoint": "https://***.appsync-api.us-east-2.amazonaws.com/graphql",
    "aws_appsync_region": "us-east-2",
    "aws_appsync_authenticationType": "API_KEY",
    "aws_appsync_apiKey": ""
};

package.json

{
  "name": "****-platform",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "next start",
    "build": "next build",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && rm -rf .next/ && npm install && npm run dev",
    "compile-sass": "node-sass assets/scss/nextjs-argon-dashboard-pro.scss assets/css/nextjs-argon-dashboard-pro.css",
    "minify-sass": "node-sass assets/scss/nextjs-argon-dashboard-pro.scss assets/css/nextjs-argon-dashboard-pro.min.css --output-style compressed",
    "map-sass": "node-sass assets/scss/nextjs-argon-dashboard-pro.scss assets/css/nextjs-argon-dashboard-pro.css --source-map true",
    "all-sass": "npm run compile-sass && npm run minify-sass && npm run map-sass",
    "dev": "next"
  },
  "dependencies": {
    "@atlaskit/spinner": "^15.0.8",
    "@aws-amplify/cli": "^4.41.2",
    "@aws-amplify/ui-react": "^1.0.7",
    "@fullcalendar/common": "^5.5.1",
    "@fullcalendar/core": "5.3.0",
    "@fullcalendar/daygrid": "^5.3.0",
    "@fullcalendar/interaction": "5.3.0",
    "@fullcalendar/react": "^5.5.0",
    "@next/bundle-analyzer": "^10.2.3",
    "@zeit/next-css": "1.0.1",
    "@zeit/next-sass": "1.0.1",
    "amazon-cognito-identity-js": "^4.5.7",
    "aws-amplify": "^3.3.13",
    "aws-amplify-react": "^4.2.31",
    "chart.js": "2.9.3",
    "check-password-strength": "^1.0.15",
    "classnames": "2.2.6",
    "cross-env": "^7.0.3",
    "dropzone": "5.7.2",
    "email-validator": "^2.0.4",
    "formik": "^2.2.6",
    "formsy-react": "^2.2.5",
    "fullcalendar": "^5.5.1",
    "json-parse-better-errors": "^1.0.2",
    "log-symbols": "^4.0.0",
    "moment": "2.27.0",
    "next": "^9.5.5",
    "next-compose-plugins": "2.2.0",
    "next-fonts": "1.4.0",
    "next-images": "1.3.1",
    "next-transpile-modules": "4.1.0",
    "node-sass": "^6.0.0",
    "nouislider": "14.6.1",
    "password-validator": "^5.1.1",
    "path": "0.12.7",
    "pretty-checkbox": "^3.0.3",
    "prop-types": "15.7.2",
    "rc-checkbox": "^2.3.2",
    "react": "^16.14.0",
    "react-anchor-link-smooth-scroll": "^1.0.12",
    "react-bootstrap-sweetalert": "5.2.0",
    "react-bootstrap-table-next": "4.0.3",
    "react-bootstrap-table2-paginator": "2.1.2",
    "react-bootstrap-table2-toolkit": "2.1.3",
    "react-chartjs-2": "2.10.0",
    "react-checkmark": "^1.4.0",
    "react-copy-to-clipboard": "5.0.2",
    "react-datetime": "2.16.3",
    "react-dom": "^16.14.0",
    "react-google-maps": "9.4.5",
    "react-jvectormap": "0.0.16",
    "react-light-accordion": "^0.1.4",
    "react-loading-skeleton": "^2.2.0",
    "react-notification-alert": "0.0.12",
    "react-perfect-scrollbar": "1.5.8",
    "react-player": "^2.8.2",
    "react-quill": "1.3.5",
    "react-select2-wrapper": "1.0.4-beta6",
    "react-tagsinput": "3.19.0",
    "react-to-print": "2.9.0",
    "react-toastify": "^7.0.3",
    "reactstrap": "8.5.1",
    "rxjs": "^6.6.3",
    "sass": "^1.34.0",
    "slugify": "^1.5.3",
    "styled-components": "^5.3.0",
    "webpack": "4.44.1",
    "webpack-bundle-analyzer": "^4.4.2",
    "yarn": "^1.22.10",
    "yup": "^0.32.9"
  },
  "devDependencies": {
    "@types/googlemaps": "3.39.13",
    "@types/markerclustererplus": "2.1.33",
    "@types/react": "16.9.46"
  }
}
chris-lee-code commented 3 years ago

Still getting the error. Need help @amhinson

chris-lee-code commented 3 years ago

@amhinson Still waiting for your update. Are there any problems on your side?

sammartinez commented 3 years ago

Hey @supersonix77, I will have @chrisbonifacio look at this issue and reproduce it. Apologizes for the delay!

chrisbonifacio commented 3 years ago

Hey @supersonix77 I've been trying to reproduce this issue in a Next.js app but have not been able to get this particular error yet.

I would normally ask if you could share what your schema looks like as a whole but I saw that you mentioned this happens when you attempt to query any other models (which work on other pages) so I'm not sure if it matters here but, I suppose for the sake of being thorough and trying to recreate your environment as closely as possible, please share it anyway if you're comfortable with that.

chrisbonifacio commented 3 years ago

@supersonix77 Also, please open your Dev Tools, navigate to Application > IndexedDB > amplify-datastore and make sure all of your models have corresponding stores.

chris-lee-code commented 3 years ago

@chrisbonifacio Hi!

First of all, one update is that I realized all the models don't work on all the other pages. So if you want me to provide the info on how the models are configured like, I'll do that for you.

Secondly, the DataStore still works on the server-side when it comes to the getServerSideProps method on NextJS, which allows me to fetch in the pre-build state.

But most importantly, I think there's somehow a hint to debug this issue down. As you told me, I navigated to Application > IndexedDB > amplify-datastore and found nothing there. So I assume the DataStore doesn't properly ready itself after the build.

스크린샷 2021-07-05 오후 10 21 20

I did find out that there was a similar issue back in 2020, but somehow it was not properly addressed. I'll look forward to your responses.

=====

I recently updated all the old packages to the latest version, but it still makes the same issues. 

{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "next start",
    "build": "next build",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && rm -rf .next/ && npm install && npm run dev",
    "compile-sass": "node-sass assets/scss/nextjs-argon-dashboard-pro.scss assets/css/nextjs-argon-dashboard-pro.css",
    "minify-sass": "node-sass assets/scss/nextjs-argon-dashboard-pro.scss assets/css/nextjs-argon-dashboard-pro.min.css --output-style compressed",
    "map-sass": "node-sass assets/scss/nextjs-argon-dashboard-pro.scss assets/css/nextjs-argon-dashboard-pro.css --source-map true",
    "all-sass": "npm run compile-sass && npm run minify-sass && npm run map-sass",
    "dev": "next",
    "analyze": "ANALYZE=true yarn build"
  },
  "dependencies": {
    "@atlaskit/spinner": "^15.0.9",
    "@aws-amplify/cli": "^5.1.0",
    "@aws-amplify/ui-react": "^1.2.4",
    "@fullcalendar/common": "^5.8.0",
    "@fullcalendar/core": "5.8.0",
    "@fullcalendar/daygrid": "^5.8.0",
    "@fullcalendar/interaction": "5.8.0",
    "@fullcalendar/react": "^5.8.0",
    "@next/bundle-analyzer": "^11.0.1",
    "@zeit/next-css": "1.0.1",
    "@zeit/next-sass": "1.0.1",
    "amazon-cognito-identity-js": "^5.0.3",
    "aws-amplify": "^4.1.2",
    "aws-amplify-react": "^5.0.4",
    "chart.js": "3.4.0",
    "check-password-strength": "^2.0.3",
    "classnames": "2.3.1",
    "compression-webpack-plugin": "^8.0.1",
    "cross-env": "^7.0.3",
    "crypto-browserify": "^3.12.0",
    "dropzone": "5.9.2",
    "email-validator": "^2.0.4",
    "formik": "^2.2.9",
    "formsy-react": "^2.2.5",
    "fullcalendar": "^5.8.0",
    "json-parse-better-errors": "^1.0.2",
    "log-symbols": "^5.0.0",
    "moment": "2.29.1",
    "next": "^11.0.1",
    "next-compose-plugins": "2.2.1",
    "next-fonts": "1.5.1",
    "next-images": "1.8.1",
    "next-transpile-modules": "^4.1.0",
    "nouislider": "15.2.0",
    "password-validator": "^5.1.1",
    "path": "0.12.7",
    "pretty-checkbox": "^3.0.3",
    "prop-types": "15.7.2",
    "rc-checkbox": "^2.3.2",
    "react": "^17.0.2",
    "react-anchor-link-smooth-scroll": "^1.0.12",
    "react-bootstrap-sweetalert": "5.2.0",
    "react-bootstrap-table-next": "4.0.3",
    "react-bootstrap-table2-paginator": "2.1.2",
    "react-bootstrap-table2-toolkit": "2.1.3",
    "react-chartjs-2": "3.0.3",
    "react-checkmark": "^1.4.0",
    "react-copy-to-clipboard": "5.0.3",
    "react-datetime": "3.0.4",
    "react-dom": "^17.0.2",
    "react-google-maps": "9.4.5",
    "react-jvectormap": "0.0.16",
    "react-light-accordion": "^0.1.4",
    "react-loading-skeleton": "^2.2.0",
    "react-notification-alert": "0.0.13",
    "react-perfect-scrollbar": "1.5.8",
    "react-player": "^2.9.0",
    "react-quill": "1.3.5",
    "react-select2-wrapper": "1.0.4-beta6",
    "react-tagsinput": "3.19.0",
    "react-to-print": "2.12.6",
    "react-toastify": "^7.0.4",
    "reactstrap": "8.9.0",
    "rxjs": "^7.1.0",
    "sass": "^1.35.1",
    "slugify": "^1.5.3",
    "stream": "^0.0.2",
    "styled-components": "^5.3.0",
    "webpack": "^5.41.1",
    "webpack-bundle-analyzer": "^4.4.2",
    "yarn": "^1.22.10",
    "yup": "^0.32.9"
  },
  "devDependencies": {
    "@types/googlemaps": "3.39.13",
    "@types/markerclustererplus": "2.1.33",
    "@types/react": "17.0.12"
  }
}

As I mentioned, the Amplify is configured correctly for ssr: true. But still I don't get why it only works on SSR, not on the client-side.

chris-lee-code commented 3 years ago

@chrisbonifacio Are there any updates?

chrisbonifacio commented 3 years ago

Hey @supersonix77 thanks for checking and confirming that IndexedDB is missing the tables for your models. While we were able to sort of guess that a table might be missing and that was the reason for the error, I haven't been able to cause that error to happen without forcing it. However, you have clarified some things for me. I probably won't need the schema though if it's working fine server-side. Thank you again, I will continue to try to reproduce in the meantime! I apologize for the delay.

chris-lee-code commented 3 years ago

@chrisbonifacio Thank you so much! I really wish this problem can be addressed asap so that I can continue my work.

chrisbonifacio commented 3 years ago

@supersonix77 is there any reason why you're importing DataStore from @aws-amplify/datastore and not aws-amplify? I only see the latter in your package.json. If you configured Amplify by importing it from aws-amplify could you try just changing your DataStore import to be from that core library instead?

I assume you're importing aws-amplify for the server side DataStore queries in order to destructure it from withSSRContext so that might be why it's working there. Might just need to use the same package client side.

chris-lee-code commented 3 years ago

@chrisbonifacio There were errors before when I tried DataStore with aws-amplify and one workaround I saw was to import from @aws-amplify/datastore. Anyway, even if I change it back to aws-amplify, it still complains with the same error, and I cannot locate the indexedDB on my DevTools, either.

When I tried to console.log(DataStore) for both packages, even though I configured my app with aws-amplify, they both had the same correct configurations formatted like below. (Deleted sensitive information.)

amplifyConfig:
aws_appsync_apiKey: ""
aws_appsync_authenticationType: "API_KEY"
aws_appsync_graphqlEndpoint: ""
aws_appsync_region: "us-east-2"
aws_cognito_identity_pool_id: "us-east-2:"
aws_cognito_region: "us-east-2"
aws_project_region: "us-east-2"
aws_user_pools_id: "us-east-2_"
aws_user_pools_web_client_id: ""
federationTarget: "COGNITO_USER_POOLS"

I don't think importing isn't the factor that causes this problem. I really appreciate your recommendation, though! If there are any other ideas, please let me know.

chris-lee-code commented 3 years ago

@chrisbonifacio Could you let me know how to listen to the DataStore event with the Hub listener? I before asked in this discussion to someone else but didn't get an answer for that.

Right now I wrote my listener like below, but I don't know if this correct. 

useEffect(() => {
    // Create listener that will stop observing the model once the sync process is done
    const removeListener = Hub.listen("datastore", async (capsule) => {
      const {
        payload: { event, data },
      } = capsule;

      console.log("DataStore event", event, data);

      if (event === "ready") {
        console.log("DataStore is ready");
      }
    });

    // Start the DataStore, this kicks-off the sync process.

    return () => {
      removeListener();
    };
  }, []);

Basically, I cannot console.log any DataStore event. Could you locate anything wrong over there?

chrisbonifacio commented 3 years ago

@supersonix77 you were very close! Just missing the DataStore.start() call under that comment. This is how I set up the listener in my app, which seems to be working so far.

This is in my _app.js file

  const eventHandler = async (capsule) => {
    console.log({ capsule });

    const {
      payload: { event, data },
    } = capsule;

    if (event === "ready") {
      console.log("DataStore is ready")
      try {
        const res = await DataStore.query(Blog);
        console.log({ res });
      } catch (err) {
        console.error(err);
      }
    }
  };

  useEffect(() => {
    Hub.listen("datastore", eventHandler);

    DataStore.start();

    return () => {
      Hub.remove("datastore", eventHandler);
    };
  }, []);

EDIT: included a query when the "ready" event fired, this has been successfully returning results for me.

chrisbonifacio commented 3 years ago

I just tried deleting my local database and commenting out DataStore.start() and observed that IndexedDB was not being populated. Uncommented it and when my page refreshed I watched as IndexedDB was populated.

Screen Shot 2021-07-08 at 11 54 02 PM

https://www.loom.com/share/bd6a26acef1d4e09b4640c083420983e

chris-lee-code commented 3 years ago

@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 commented 3 years ago

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

chrisbonifacio commented 3 years ago

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.

chris-lee-code commented 3 years ago

@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 commented 3 years ago

@chrisbonifacio Just one more question...would you recommend using DataStore event listener on _app.js? Or just on only the pages that need DataStore?

chrisbonifacio commented 3 years ago

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 ❤️

chris-lee-code commented 3 years ago

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!🤩🚀

chrisbonifacio commented 3 years ago

You're too kind 😄 But you're right, we definitely got this!

Alrighty well, going to close this one then. Best of luck on the app and please feel free to open another issue if you run into any other blockers. You're likely to get me again 😆 hehe

github-actions[bot] commented 2 years ago

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.