Skip to content

Fetch workflow with suspense

Axel Bocciarelli requested to merge workflow-suspense into main

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:

  1. This sets the URL parameter, which then re-renders the EditPage.
  2. EditPage gets the workflow ID from the URL and passes it to Canvas.
  3. Canvas fetches the workflow file with React Query and Suspense.
  4. When the fetch succeeds, Canvas renders ReactFlow.
  5. When ReactFlow is ready, it calls the onInit callback we provide to it, which initialises the stores via setRootWorkflow.

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

Merge request reports