"Cannot read properties of undefined" error on usePaginatedQuery in fresh install #4426
Description
What is the problem?
I created a new project with blitz, and followed the instructions to run blitz generate all project. When I navigate to /projects, i get the following error:
at ProjectsList (ProjectsList.tsx:15:12)
The issue seems to be that usePaginatedQuery returns [undefined, {status, isPending, etc..}] in the initial loading state. I can workaround by changing
const [{ projects, hasMore }] = usePaginatedQuery(getProjects,
to
const [{ projects, hasMore } = { projects: [], hasMore: false }] = usePaginatedQuery(
getProjects,
but I thought it odd that the generators are generating invalid code. fwiw, I see the same behavior on new projects using either blitz v3.0.1 or v.2.2.2. I also see the same issue if I use useQuery instead of usePaginatedQuery.
Since I don't see any other reports of what seems like a very fundamental issue with either the useQuery API or the default generators, I feel this must be some local environment issue, or I missed some step or am doing something dumb. But hopefully I can get an answer and anyone else who managed to do whatever I did will find this ;)
Paste all your error logs here:
intercept-console-error.ts:44 TypeError: Cannot read properties of undefined (reading 'projects')
at ProjectsList (ProjectsList.tsx:15:12)
at react-stack-bottom-frame (react-dom-client.development.js:22348:1)
at renderWithHooks (react-dom-client.development.js:5739:1)
at updateFunctionComponent (react-dom-client.development.js:8000:1)
at beginWork (react-dom-client.development.js:9614:1)
at runWithFiberInDEV (react-dom-client.development.js:543:1)
at performUnitOfWork (react-dom-client.development.js:14996:1)
at workLoopSync (react-dom-client.development.js:14826:39)
at renderRootSync (react-dom-client.development.js:14806:1)
at performWorkOnRoot (react-dom-client.development.js:14341:1)
at performWorkOnRootViaSchedulerTask (react-dom-client.development.js:15852:1)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:44:1)
The above error occurred in the <NotFoundErrorBoundary> component.
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundaryHandler.
Paste all relevant code snippets here:
const [{ projects, hasMore }] = usePaginatedQuery(getProjects, {
orderBy: { id: "asc" },
skip: ITEMS_PER_PAGE * page,
take: ITEMS_PER_PAGE,
});```
### What are detailed steps to reproduce this?
1.`blitz new`
2. `blitz generate all project`
3. `npm run dev`
4. Do sign-up flow on localhost:3000
5. Click the link to /projects on the home page
result: "Something went wrong!"
### Run `blitz -v` and paste the output here:
PASTE_HERE (leave the ``` marks)
dameat@nopants:~/work/songs-library$ blitz -v
Blitz version: 3.0.1 (global)
Blitz version: 3.0.1 (local)
Linux 6.11 | linux-x64 | Node: v20.18.1
Package manager: npm
System:
OS: Linux 6.11 Ubuntu 24.10 24.10 (Oracular Oriole)
CPU: (16) x64 AMD Ryzen 7 5700G with Radeon Graphics
Memory: 43.77 GB / 61.10 GB
Shell: 5.2.32 - /bin/bash
Binaries:
Node: 20.18.1 - ~/.nvm/versions/node/v20.18.1/bin/node
Yarn: 4.5.3 - ~/.nvm/versions/node/v20.18.1/bin/yarn
npm: 11.0.0 - ~/.nvm/versions/node/v20.18.1/bin/npm
npmPackages:
@blitzjs/auth: 3.0.1 => 3.0.1
@blitzjs/next: 3.0.1 => 3.0.1
@blitzjs/rpc: 3.0.1 => 3.0.1
@prisma/client: 5.4.2 => 5.4.2
blitz: 3.0.1 => 3.0.1
next: 15.0.1 => 15.0.1
prisma: 5.4.2 => 5.4.2
react: 19.0.0 => 19.0.0
react-dom: 19.0.0 => 19.0.0
typescript: ^4.8.4 => 4.9.5
Please include below any other applicable logs and screenshots that show your problem:
