useSuspenseFragment does not Suspense

[gino]

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]

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