Fetch workflow with suspense
This is just a first draft. There's plenty more to do (e.g. remove query param when creating new workflow, handle loading another workflow when one is already open, etc.)
To try the new behaviour, open the demo
workflow in Quick Open:
- This sets the URL parameter, which then re-renders the
EditPage
. -
EditPage
gets the workflow ID from the URL and passes it toCanvas
. -
Canvas
fetches the workflow file with React Query and Suspense. - When the fetch succeeds,
Canvas
rendersReactFlow
. - When
ReactFlow
is ready, it calls theonInit
callback we provide to it, which initialises the stores viasetRootWorkflow
.
The key was to understand that when ReactFlow
remounts, rfInstance
gets recreated. Since Suspense means that we unmount and then remount ReactFlow
, I had to be careful not to call setRootWorkflow
with a stale RF instance.
The only way to guarantee that the RF instance is ready is to rely on the onInit
callback. This is where we need to call fitView
and setRootWorkflow
, not in a useEffect
, for instance.
Edited by Axel Bocciarelli