Queries with multiple pointers

Hi all,

N00b here. I looked up almost everything on the forum and on various resources but I can’t wrap my head around it. I am writing an application where my logged in users can save their kids’ informations. Kids also have cats. What I want to do is to retrieve Kids info along with their Cats info. The DB structure:

Kids Class:

  • objectId
  • name - string
  • parent - Pointer< _User >

Cats Class:

  • objectId
  • name - string
  • age - string
  • owner - Pointer< Kids >

useEffect(() => {
    const getInfo = async() => {

      const Kids = Moralis.Object.extend("Kids");
      const Cats = Moralis.Object.extend("Cats");
      const queryKids = new Moralis.Query(Kids);
      const queryCats = new Moralis.Query(Cats);
      const user = Moralis.User.current();
      
      queryKids.equalTo('parent', user);
      const kidResults = await queryKids.find();
      const catResults = await queryCats.find();
      
      let results =[];
      if (kidResults && catResults) {
        for (let i = 0; i < kidResults.length; i++)
          results.push({
            kidName: kidResults[i].attributes?.name,
              cats: {
                catName: catResults[i].attributes?.name,
                catAge: catResults[i].attributes?.age,
              }
          })
        console.log(results)
      }
      }
      return () => {
        getInfo()
      }
  }, [])

When I run this I get below results and can’t wrap my head around it. I would really appreciate of any help.