Help

4.8.15. Multiple Step Usage in Workflows

In this chapter, you'll learn how to use a step multiple times in a workflow.

Problem Reusing a Step in a Workflow#

In some cases, you may need to use a step multiple times in the same workflow.

The most common example is using the useQueryGraphStep multiple times in a workflow to retrieve multiple unrelated data, such as customers and products.

Steps must have a unique ID, which you pass as the first parameter of the createStep function.

Code
const useQueryGraphStep = createStep(
  "use-query-graph"
  // ...
)

So, when a step is used multiple times in a workflow, it's registered multiple times in the workflow with the same ID, which causes an error.

Code
const helloWorkflow = createWorkflow(
  "hello",
  () => {
    const { data: products } = useQueryGraphStep({
      entity: "product",
      fields: ["id"],
    })

    // ERROR OCCURS HERE: A STEP HAS THE SAME ID AS ANOTHER IN THE WORKFLOW
    const { data: customers } = useQueryGraphStep({
      entity: "customer",
      fields: ["id"],
    })
  }
)

The next section explains how to fix this issue to use the same step multiple times in a workflow.

How to Use a Step Multiple Times in a Workflow?#

When you execute a step in a workflow, you can chain a config method to it to change the step's config.

Use the config method to change a step's ID for a single execution.

For example, this is the correct way to write the example above:

Code
const helloWorkflow = createWorkflow(
  "hello",
  () => {
    const { data: products } = useQueryGraphStep({
      entity: "product",
      fields: ["id"],
    })

    // ✓ No error occurs, the step has a different ID.
    const { data: customers } = useQueryGraphStep({
      entity: "customer",
      fields: ["id"],
    }).config({ name: "fetch-customers" })
  }
)

The config method accepts an object with a name property. Its value is the new ID for the step to use for this execution only.

The first useQueryGraphStep usage has the ID use-query-graph, and the second useQueryGraphStep usage has the ID fetch-customers.

Was this chapter helpful?