TypeError: Cannot read properties of undefined (reading 'observeQuery')

[akilisosa]

Amplify CLI Version

12.13.0

Question

I have been working on this for a while and i cannot figure out what i am doing incorrectly.

The Todo one works fine. I left it untouched for a reference but as soon as i change it to a different model type i get the error:

TypeError: Cannot read properties of undefined (reading 'observeQuery')

The app page code - i was using it in a component, and tried a service etc... but this is the most basic example:

"use client";

import { useState, useEffect } from "react";
import { generateClient } from "aws-amplify/data";
import type { Schema } from "@/amplify/data/resource";
import "./app.css";
import { Amplify } from "aws-amplify";
import outputs from "@/amplify_outputs.json";
import "@aws-amplify/ui-react/styles.css";
import Image from 'next/image'

import { IoGameControllerOutline, IoHelpCircleOutline, IoPlanetOutline } from 'react-icons/io5';
import Link from 'next/link';

Amplify.configure(outputs);

 const client = generateClient<Schema>();

export default function App() {
  // const [todos, setTodos] = useState<Array<Schema["Todo"]["type"]>>([]);
   const [messages, setMessages] = useState<Array<Schema["Message"]["type"]>>([]);

  function listTodos() {
    const sub = client.models.Todo.onCreate({
      filter: {
        content: { contains: "Hello" },
      },
    })
    .subscribe({
      next: (data: any) => console.log([...data.items]),
    });
  }

  // function listMessages() {
  //   const sub = client.models.Message.observeQuery({
  //     filter: {
  //       roomID: { eq: '123' },
  //     },
  //   })
  //   .subscribe({
  //     next: (data: any) => console.log([...data.items]),
  //   });
  // }
  useEffect(() => {
    listTodos();
  }, []);

  function createTodo() {
    client.models.Todo.create({
      content: window.prompt("Todo content"),
    });
  }

this is the repo: https://github.com/akilisosa/nom-kitties-react-v4

this is the model:

import { type ClientSchema, a, defineData } from "@aws-amplify/backend";

/*== STEP 1 ===============================================================
The section below creates a Todo database table with a "content" field. Try
adding a new "isDone" field as a boolean. The authorization rule below
specifies that any user authenticated via an API key can "create", "read",
"update", and "delete" any "Todo" records.
=========================================================================*/
const schema = a.schema({
  Todo: a
    .model({
      content: a.string(),
    })
    .authorization((allow) => [allow.publicApiKey()]),

  // message 
  Message: a.
    model({
      content: a.string().required(),
      owner: a.string().required(),
      roomID: a.string().required(),
      createdAt: a.datetime().required(),
      color: a.string().required(),
      name: a.string().required(),
    })
    .secondaryIndexes((index: any) => [
      index('roomID').sortKeys(['createdAt']),
    ])
    .authorization((allow: any) => [
      // Owner can do all operations
      allow.owner(),
      // Public can read
      allow.publicApiKey() //.to(['create', 'read']),
    ]),
...etc

i did see the other issue: aws-amplify/amplify-backend#1458 where you said to upgrade amplify/backend + amplify/backend-cli and i did that too.

actually now for some reason the todo is getting unauthorized error but probably becausee i have to set client to authmode: 'api'

the rest of the app works fine but im just getting very frustrated with this. Another guy in the discord channel was complaining that he was getting the same error using the amplify-chat bot:

SMACK-A-BRO — Today at 8:58 AM (11/18/2024)
Yeah at this point I dont know what to do. Their example AI repo chatbot works perfect(https://github.com/aws-samples/amplify-ai-examples) but when I want to do a bare minimum chatbot I get an error.

I've been using this: https://docs.amplify.aws/react/ai/set-up-ai/
And this: https://github.com/aws-amplify/amplify-ui/issues/5773

But to no avail because get this annoying error...

[akilisosa]

so this one was resolved by clearing out the backend, and re doing it but i don't know why it happened.

[github-actions]

This issue is now closed. Comments on closed issues are hard for our team to see.
If you need more assistance, please open a new issue that references this one.