fix: error handling and loading states in with-apollo-and-redux example by ZaforAbdullah · Pull Request #91457 · vercel/next.js

ZaforAbdullah · 2026-03-16T13:43:04Z

For Contributors

Fixing a bug

Fixes #(open or reference an issue if one exists, otherwise omit)
No tests required — this is an examples/ change only
No custom error links needed — failures are surfaced via Apollo's built-in error state

Summary

PostList destructured data before checking loading/error, so the component threw when data was undefined (e.g., on the initial fetch or after a query error) instead of showing the loading/error UI.
Move the error/loading/!data guard clauses above the data destructuring and loadMorePosts definition, and add a !data check so the component never accesses properties on an undefined value.
Bump graphql (14.5.8 → 16.13.1) and lodash (4.17.20 → 4.17.23) in the example's package.json to pick up fixes in dependencies the example relies on.

Note:

Initially this PR suppose to target upstream DB issue

nextjs-bot · 2026-03-16T13:43:31Z

Allow CI Workflow Run

approve CI run for commit: 47bb590

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

icyJoseph · 2026-03-16T13:46:06Z

+    await apolloClient.query({
+      query: ALL_POSTS_QUERY,
+      variables: allPostsQueryVars,
+    });


Here you'd want to error at build time, not hide the error or hope to catch it during rendering. You might end up shipping bad UI

It call https://nextjs-graphql-with-prisma-simple-foo.vercel.app/api endpoint which is empty, hence the example project can't be build at all.

Mm but that's another issue then, that project should serve data... I don't have time to look into at the moment - but I'll try later

https://nextjs-graphql-with-prisma-simple-foo.vercel.app/api

I found the origin of the url project: https://github.com/prisma-labs/nextjs-graphql-api-examples

Yes. I asked them about it, they'll look into it. 🙏

Ok, so I think, examples/with-apollo-and-redux/components/PostList.js is a good change, but not this one, nor the one below, subject to the API being fixed - let's wait a bit for an answer from Prisma Labs.

@icyJoseph Any update from Prisma Labs? Is it possible tag someone in this PR?

No updates yes, they have it on their radar though.

Removed try...catch blocks

Analysis: The demo backend (nextjs-graphql-with-prisma-simple-foo.vercel.app) returns HTTP 500 because its DB table may no longer exists — the database was never migrated or has been wiped. The GraphQL server itself is running, but any query that touches the database fails.

Note: with this change build (npm run dev) will be failed in runtime

@icyJoseph

Any update from Prisma Labs? BTW I don't think so they managing those repos now

icyJoseph · 2026-05-26T15:47:15Z

On its current state, this will show the error path right? Rather than crashing out.

ZaforAbdullah · 2026-05-26T16:12:04Z

On its current state, this will show the error path right? Rather than crashing out.

Current state: Removed try...catch blocks

@icyJoseph

1) Removed try...catch blocks
It crashed

2) Added try...catch blocks
It able to run // Note: I'm not adding any screenshot for it

icyJoseph · 2026-06-15T07:25:21Z

Ah there's one more thing blocking this merge. Not that, it'll work anyway, because the DB upstream is still down.

We require verified commit signatures.

There's a couple of unsigned commits:

…raphql and lodash dependencies

ZaforAbdullah · 2026-07-20T09:36:58Z

Ah there's one more thing blocking this merge. Not that, it'll work anyway, because the DB upstream is still down.

We require verified commit signatures.

There's a couple of unsigned commits:

@ZaforAbdullah
fix(with-apollo-and-redux): resolve install failure and handle upstre…
9f05e60

@ZaforAbdullah
graphql is now pinned to 16.13.1 with no ^
84e490a

@ZaforAbdullah
lodash is now pinned to 4.17.23 with no ^
daeaa2d

Please check @icyJoseph

icyJoseph · 2026-07-20T22:42:50Z

Btw, sorry this took so long, I am a bit surprised we didn't get any resolution on the upstream DB.

github-actions · 2026-07-20T22:49:16Z

Tests Passed

Commit: 12e70b2

github-actions · 2026-07-20T22:50:40Z

Stats skipped

Commit: 12e70b2
View workflow run

icyJoseph · 2026-07-20T23:33:27Z

There's a minor lint issue:

[warn] examples/with-apollo-and-redux/package.json
[warn] Code style issues found in the above file. Run Prettier with --write to fix.

icyJoseph · 2026-07-20T23:57:40Z

Nice, just to be orderly, can you update the PR description with what's actually been done?

ZaforAbdullah · 2026-07-21T10:57:54Z

Nice, just to be orderly, can you update the PR description with what's actually been done?

I have updated it @icyJoseph

nextjs-bot added the examples Issue was opened via the examples template. label Mar 16, 2026

icyJoseph reviewed Mar 16, 2026

View reviewed changes

Comment thread examples/with-apollo-and-redux/components/PostList.js

icyJoseph reviewed Mar 16, 2026

View reviewed changes

Comment thread examples/with-apollo-and-redux/package.json Outdated

ZaforAbdullah changed the title ~~fix(with-apollo-and-redux): resolve install failure and handle upstream API errors~~ fix (with-apollo-and-redux): resolve install failure and handle upstream API errors Apr 18, 2026

Fix error handling and loading states in PostList component; update g…

bcd2666

…raphql and lodash dependencies

ZaforAbdullah force-pushed the fix/with-apollo-and-redux-error-handling branch from 8ee51bc to bcd2666 Compare July 20, 2026 09:33

Merge branch 'canary' into fix/with-apollo-and-redux-error-handling

2cfc34d

Merge branch 'canary' into fix/with-apollo-and-redux-error-handling

a05a4ed

Merge branch 'canary' into fix/with-apollo-and-redux-error-handling

ab170f3

ZaforAbdullah added 2 commits July 21, 2026 07:36

fix: add missing newline at end of package.json

b47c214

Merge branch 'canary' into fix/with-apollo-and-redux-error-handling

5f23f62

ZaforAbdullah changed the title ~~fix (with-apollo-and-redux): resolve install failure and handle upstream API errors~~ fix (with-apollo-and-redux): error handling and loading states in with-apollo-and-redux example Jul 21, 2026

Merge branch 'canary' into fix/with-apollo-and-redux-error-handling

c940c26

ZaforAbdullah changed the title ~~fix (with-apollo-and-redux): error handling and loading states in with-apollo-and-redux example~~ fix: error handling and loading states in with-apollo-and-redux example Jul 21, 2026

Merge branch 'canary' into fix/with-apollo-and-redux-error-handling

2ecb3a7

icyJoseph approved these changes Jul 21, 2026

View reviewed changes

Merge branch 'canary' into fix/with-apollo-and-redux-error-handling

12e70b2

icyJoseph merged commit 93c59f0 into vercel:canary Jul 21, 2026
57 checks passed

Uh oh!

Conversation

ZaforAbdullah commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

For Contributors

Fixing a bug

Summary

Note:

Uh oh!

nextjs-bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

icyJoseph Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

ZaforAbdullah Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

icyJoseph Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

ZaforAbdullah Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

icyJoseph Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

icyJoseph Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ZaforAbdullah Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

icyJoseph Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

ZaforAbdullah Apr 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ZaforAbdullah May 26, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

icyJoseph commented May 26, 2026

Uh oh!

ZaforAbdullah commented May 26, 2026

Uh oh!

icyJoseph commented Jun 15, 2026

Uh oh!

ZaforAbdullah commented Jul 20, 2026

Uh oh!

icyJoseph commented Jul 20, 2026

Uh oh!

github-actions Bot commented Jul 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Tests Passed

Uh oh!

github-actions Bot commented Jul 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Stats skipped

Uh oh!

icyJoseph commented Jul 20, 2026

Uh oh!

icyJoseph commented Jul 20, 2026

Uh oh!

ZaforAbdullah commented Jul 21, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ZaforAbdullah commented Mar 16, 2026 •

edited

Loading

nextjs-bot commented Mar 16, 2026 •

edited

Loading

ZaforAbdullah Mar 16, 2026 •

edited

Loading

icyJoseph Mar 18, 2026 •

edited

Loading

ZaforAbdullah Apr 18, 2026 •

edited

Loading

github-actions Bot commented Jul 20, 2026 •

edited

Loading

github-actions Bot commented Jul 20, 2026 •

edited

Loading