relay-tools / relay-hooks

Use Relay as React hooks
https://relay-tools.github.io/relay-hooks/docs/relay-hooks.html
MIT License
540 stars 56 forks source link

`useSuspenseFragment` does not Suspense #239

Open gino opened 1 year ago

gino commented 1 year ago

Hi there,

I am trying to use useSuspenseFragment in combination with the Suspense component from React. My component structure looks like the following:

// Parent
const { data } = useLazyLoadQuery(...)

<Suspense fallback={<div>Loading...</div>}>
  <Sessions viewer={data}>
</Suspense>
// Sessions component that should Suspense
const data = useSuspenseFragment(fragment, viewer)

But unfortunately, I realised that the loading text never shows up. If I wrap my parent component (the one with the useLazyLoadQuery) with a Suspense, it does suspends. Which makes sense, because of the query. But I expected my Sessions component to suspends aswell. Especially because of the following sentence from the Relay documentation:

The component will suspend if any data for that specific fragment is missing, and the data is currently being fetched by a parent query.

Maybe I am missing something or misunderstanding how suspense fragments are working, but I hope that someone is able to help me out here.

Thanks a lot, I appreciate it.

morrys commented 1 year ago

Hi @gino, can you create a minimal sample project that reproduces the error so I can investigate?