Unexpected error about `overrideRecords`

[TejasQ]

I've received this error and I have no idea what to do with it:

Console output:

As text:

TypeError: (overrideRecords ?? page.records) is not iterable (cannot read property undefined)

Logged to the console,

{
  speakers: _RecordArray(7) [
    {
      id: 'rec_cb6sg2ihosd005lf78qg',
      image: 'https://github.com/tejasq.png',
      name: 'Xata Team',
      position: '',
      talk: 'Announcing Xata: Now Publicly Available',
      twitter: 'https://twitter.com/tejaskumar_'
    },
    {
      id: 'rec_cb6sgrhh40fcoclfknf0',
      image: 'https://avatars.githubusercontent.com/u/22625602?v=4',
      name: 'Guillaume Bibeau-Laviolette',
      position: 'Solutions Architect, Vercel',
      talk: 'My Favorite Database for Web3',
      twitter: 'https://twitter.com/GuiBibeau'
    },
    {
      id: 'rec_cb6sh7hh40fcoclfknfg',
      image: 'https://github.com/saravieira.png',
      name: 'Sara Vieira',
      position: 'Senior Frontend Engineer, Remote.com',
      talk: 'Creating the 3D Xatafly with react-three-fiber',
      twitter: 'https://twitter.com/nikkitaftw'
    },
    {
      id: 'rec_cb6sho9h40fcoclfkng0',
      image: 'https://github.com/seiflotfy.png',
      name: 'Seif Lotfy',
      position: 'Co-Founder and CTO, Axiom',
      talk: 'A Better Logging Story',
      twitter: 'https://twitter.com/seiflotfy'
    },
    {
      id: 'rec_cb6si3qhosd005lf78r0',
      image: 'https://pbs.twimg.com/profile_images/1493634012220465165/_CUnZ4DC_400x400.jpg',
      name: 'Jenny Truong',
      position: 'COO, Stately.ai',
      talk: 'Modeling Application Logic and Data for Predictable Apps',
      twitter: 'https://twitter.com/jen_ayy_',
      videoUrl: ''
    },
    {
      id: 'rec_cb6simihosd005lf78rg',
      name: 'Brigita Sabutytė',
      position: 'React Intern',
      talk: 'My Journey into Code'
    },
    {
      id: 'rec_cb6sj62hosd005lf78s0',
      image: 'https://pbs.twimg.com/profile_images/1537114604278530048/FMrBa87o_400x400.jpg',
      name: "Debbie O'Brien",
      position: 'Senior Program Manager, Microsoft',
      talk: 'Automating Tests with Playwright',
      twitter: 'https://twitter.com/debs_obrien'
    }
  ]
}

overrideRecords is not used anywhere in my code.

Calling code:

const client = new XataClient()

export const getStaticProps: GetStaticProps<Props> = async () => {
  const speakers = await client.db.speakers.getMany()

  console.log({ speakers })

  return {
    props: { speakers },
    revalidate: true,
  }
}

Database: https://app.xata.io/workspaces/xata-uq2d57/dbs/conf/branches/main/tables/speakers

Schema:

{
  "formatVersion": "",
  "tables": [
    {
      "name": "nextauth_users",
      "columns": [
        {
          "name": "email",
          "type": "email"
        },
        {
          "name": "emailVerified",
          "type": "datetime"
        },
        {
          "name": "name",
          "type": "string"
        },
        {
          "name": "image",
          "type": "string"
        },
        {
          "name": "username",
          "type": "string"
        },
        {
          "name": "location",
          "type": "string"
        }
      ]
    },
    {
      "name": "nextauth_accounts",
      "columns": [
        {
          "name": "user",
          "type": "link",
          "link": {
            "table": "nextauth_users"
          }
        },
        {
          "name": "type",
          "type": "string"
        },
        {
          "name": "provider",
          "type": "string"
        },
        {
          "name": "providerAccountId",
          "type": "string"
        },
        {
          "name": "refresh_token",
          "type": "string"
        },
        {
          "name": "access_token",
          "type": "string"
        },
        {
          "name": "expires_at",
          "type": "int"
        },
        {
          "name": "token_type",
          "type": "string"
        },
        {
          "name": "scope",
          "type": "string"
        },
        {
          "name": "id_token",
          "type": "string"
        },
        {
          "name": "session_state",
          "type": "string"
        }
      ]
    },
    {
      "name": "nextauth_verificationTokens",
      "columns": [
        {
          "name": "identifier",
          "type": "string"
        },
        {
          "name": "token",
          "type": "string"
        },
        {
          "name": "expires",
          "type": "datetime"
        }
      ]
    },
    {
      "name": "nextauth_users_accounts",
      "columns": [
        {
          "name": "user",
          "type": "link",
          "link": {
            "table": "nextauth_users"
          }
        },
        {
          "name": "account",
          "type": "link",
          "link": {
            "table": "nextauth_accounts"
          }
        }
      ]
    },
    {
      "name": "nextauth_users_sessions",
      "columns": [
        {
          "name": "user",
          "type": "link",
          "link": {
            "table": "nextauth_users"
          }
        },
        {
          "name": "session",
          "type": "link",
          "link": {
            "table": "nextauth_sessions"
          }
        }
      ]
    },
    {
      "name": "nextauth_sessions",
      "columns": [
        {
          "name": "sessionToken",
          "type": "string"
        },
        {
          "name": "expires",
          "type": "datetime"
        },
        {
          "name": "user",
          "type": "link",
          "link": {
            "table": "nextauth_users"
          }
        }
      ]
    },
    {
      "name": "tickets",
      "columns": [
        {
          "name": "user",
          "type": "link",
          "link": {
            "table": "nextauth_users"
          }
        }
      ]
    },
    {
      "name": "speakers",
      "columns": [
        {
          "name": "name",
          "type": "string"
        },
        {
          "name": "talk",
          "type": "string"
        },
        {
          "name": "image",
          "type": "string"
        },
        {
          "name": "videoUrl",
          "type": "string"
        },
        {
          "name": "twitter",
          "type": "string"
        },
        {
          "name": "position",
          "type": "string"
        }
      ]
    }
  ]
}

Actual code:

https://github.com/xataio/xataconf/blob/091bf981988095eba2d9ae51efb3bb43897c4c7e/pages/index.tsx#L34-L39

[TejasQ]

I tried a workaround with

export const getStaticProps: GetStaticProps<Props> = async () => {
  const speakers = await client.db.speakers.getPaginated({
    pagination: { size: 100 },
  })

  return {
    props: { speakers: speakers.records },
    revalidate: true,
  }
}

(getPaginated), still no luck.

[TejasQ]

Figured it out. This is a workaround:

export const getStaticProps: GetStaticProps<Props> = async () => {
  const speakers = /* 👉 */ Array.from(await client.db.speakers.getMany())

  return {
    props: { speakers },
    revalidate: true,
  }
}

I guess this goes back to the serialization topic from #387, because an Array seems to serialize fine in Next.js, but not the decorated Array the SDK uses.

[SferaDev]

Can't reproduce it... Sending the Array works just fine

Will try to debug it with your project

[SferaDev]

Hydration and SSR is just hard... This won't be the last issue we find! Fixed @TejasQ