fascinating-indigo

Awaiting data with Suspense in Next?

Hello I have maybe a simple question, I've been using react-query for a while, but maybe missing something simple. I am trying to use Suspense like this and I get the error form the image

18 Replies

genetic-orange•3y ago

Would love an answer to that as well. I haven't had to fix this before since I'm currently working on an offline-first client-side app (for which suspense doesn't make much sense) but I've definitely seen it... The react team did promise a better error log for this issue in the next React release (but I have no idea when that will be). Is this the only <Suspense> in your app? is <BasicHomeTable> stateful or is useQuery the only source of state in that component branch? (just to make sure the issue is related to react-query)

deep-jade•3y ago

https://github.com/TanStack/query/issues/5335

GitHub

Next13 hydration error when using suspense · Issue #5335 · TanStack...

Describe the bug I'm trying to use suspense in a Next v13 project but I'm getting a hydration error with this message: "Error: This Suspense boundary received an update before it finis...

fascinating-indigoOP•3y ago

so, I only have this component that uses useQuery and then only that suspense yea

fascinating-indigoOP•3y ago

so I guess this is a bug currently, is there any workaround, I thought that doing something like

// const HomeTable = dynamic(() => import("./../../../components/testDynamic"), {
//   loading: () => <p>LOAIDNDDDDDD .........</p>,
//   ssr: false,
// });

// const HomeTable = dynamic(() => import("./../../../components/testDynamic"), {
//   loading: () => <p>LOAIDNDDDDDD .........</p>,
//   ssr: false,
// });

would work but nothing

fascinating-indigoOP•3y ago

I copied the example and still got it

deep-jade•3y ago

Have you used this example? https://github.com/TanStack/query/issues/5335#issuecomment-1539570023

GitHub

Next13 hydration error when using suspense · Issue #5335 · TanStack...

Describe the bug I'm trying to use suspense in a Next v13 project but I'm getting a hydration error with this message: "Error: This Suspense boundary received an update before it finis...

fascinating-indigoOP•3y ago

Yeah, I followed this example For some reason in codesanbox is ok, locally not so much though

deep-jade•3y ago

Can you create a public repo?

fascinating-indigoOP•3y ago

Hey @TkDodo 🔮 so I don't think the issue is with react-query, I was messing around and testing, and I think the issue is with next-auth, the moment you remove the next-auth provider it works just fine, will check next-auth issue to see if there's anything there, but not sure why this would affect react-query, I've tried moving the providers around and nothing, in any case I created a small repo with it if you want to check it out https://github.com/enyelsequeira/react-query-hydration-issue

GitHub

GitHub - enyelsequeira/react-query-hydration-issue: React-query hyd...

React-query hydration issue/might be next auth. Contribute to enyelsequeira/react-query-hydration-issue development by creating an account on GitHub.

fascinating-indigoOP•3y ago

Hey @TkDodo 🔮 any thoughts? I opened an issue with next-auth since I think the issue might be there, but it’s weird, by itself it works fine, but together it doesn’t 🤔

deep-jade•3y ago

looking at their code (https://github.com/nextauthjs/next-auth/blob/cca94bfe83db84282f41d0e843d19a5526c39e84/packages/next-auth/src/react/index.tsx#L340) they are doing a bunch of useEffects that call setState, including a subscription somewhere. The react18 way to do this is to useSyncExternalStore

GitHub

next-auth/index.tsx at cca94bfe83db84282f41d0e843d19a5526c39e84 · n...

Authentication for the Web. Contribute to nextauthjs/next-auth development by creating an account on GitHub.

deep-jade•3y ago

so yeah my best guess is: their code isn't safe for concurrent features / streaming hydration thanks for the reproduction - I think it means I can close our issue

fascinating-indigoOP•3y ago

Yeah, I saw that in the link for the bug they also used next-auth, weird though, how by itself doesn't send any error only when combined. but yeah, will see what the next-auth team says Thank you!

deep-jade•3y ago

it's not that weird. you can setState any time as long as there is no suspense boundary involved and react-query is what throws the promise, so that's when those issues start to pop up you could probably repro it without react-query by just throwing a promise during rendering do you have a link to the next-auth issue? they'll probably appreciate a reproduction without react-query 🙂

fascinating-indigoOP•3y ago

yeah, I have it here, it was moved to discussion https://github.com/nextauthjs/next-auth/discussions/7503

GitHub

Error with NextAuth + React-query This Suspense boundary received a...

Environment System: OS: macOS 13.3.1 CPU: (10) arm64 Apple M1 Pro Memory: 106.13 MB / 32.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 18.16.0 - ~/.volta/tools/image/node/18.16.0/bin/node Yarn: 1.22....

metropolitan-bronze•2y ago

Is this still true? @TkDodo 🔮 I'm using useSuspenseQuery in Next pages router, and whenever I let the server render a component that uses the suspense query, it freezes on the server and it never responds this is making vercel serverless functions to timeout My temporary workaround was to create a wrapper around Suspense and use the sync external store trick to render the fallback in the server/hydration stage and the actually Suspense in the browser But it's causing the fallback to rendered twice, in the initial server html and in the browser as the suspense fallback, which is not great, spinners animations are being reset Also I tested throwing an error if there is no window object in globalThis, and this skips the render on the server, not my favorite approach

deep-jade•2y ago

suspense doesn't work in pages router, this hasn't changed

Gaming

Programming

Awaiting data with Suspense in Next?

Did you find this page helpful?