Next.js app with DataStore works locally but not when deployed to Amplify Hosting

Before opening, please confirm:

• I have checked to see if my question is addressed in the FAQ.
• 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.
• I have removed any sensitive information from my code snippets and submission.

App Id

d8dd1y47jar7i

AWS Region

us-west-2

Amplify Hosting feature

Not Applicable

Describe the bug

I’ve created a simple Next.js app that uses a DataStore.query to fetch some data I generated in Amplify Studio.

It works locally but when deployed to Amplify Hosting it throws an exception before posting the query.

Here’s the exception:

TypeError: Cannot read properties of undefined (reading ‘length’) at n.copyOf (zen-observable.js:444:2) at uq (zen-observable.js:444:2) at e.<anonymous> (zen-observable.js:444:2) at zen-observable.js:444:2 at Object.next (zen-observable.js:444:2) at s (zen-observable.js:444:2)

Expected behavior

Here’s how the page renders locally:

Reproduction steps

Here’s my repo: https://github.com/tombray/amplify-test

The DataStore.query is in pages/index.js:

export default function Home() {
  const [stations, setStations] = useState([]);

  useEffect(() => {
    const getStations = async () => {
      console.log("before datastore query");
      try {
        const stations = await DataStore.query(Stations);
        console.log(stations);
        setStations(stations);
      } catch (e) {
        console.log(e);
      }
    };

    getStations();
  }, []);

Running that locally works for me but when I deploy it with Amplify Hosting, it throws an exception which you can see here: https://main.d8dd1y47jar7i.amplifyapp.com/

Build Settings

No response

Log output

# Put your logs below this line

Additional information

No response

[tombray]

Aha! Thanks @svidgen !!

[svidgen]

That could easily be DataStore nuance. Remember that DataStore syncs in the background. The full dataset isn’t necessarily available at the time you query().

Take a look at either:

1. Waiting for the ready event to ensure the sync is finished first.
2. observeQuery(), to populate and refresh data on the page as it syncs.

Hope that helps!