Storybook preview iframe and React Query suspense mode interoperability
0 reputation · 02 Oct 2026, 17:08 UTC
Goal: confirm whether the Storybook 8.x preview iframe renders a React Suspense fallback when a story component uses useQuery({ suspense: true }) while the initial query promise is pending.
React Query supports suspending rendering until data resolves, and Storybook 8.x supports asynchronous play functions inside the preview. The unresolved interoperability boundary is whether Storybook surfaces the Suspense fallback UI defined in the story, or leaves the preview blank until the promise resolves.
This affects paginated datasets where the first page loads asynchronously. Version assumption: Storybook 8.x; Storybook 7.x behavior is not assumed to transfer.
Does the preview display the Suspense fallback during the initial suspend? If the story remains blank, what decorator or preview configuration controls the fallback boundary? Is the blank state expected until the query resolves?