Prevent undefined requests in chained DataSources

When one DataSource depends on another, the dependent request can fire too early and interpolate undefined into its URL.

Use when to guard the dependent DataSource so it only runs after the required value exists.

<App>
  <DataSource
    id="user"
    url="/api/users/me"
  />

  <DataSource
    id="orders"
    url="/api/orders/{user.value.id}"
    when="{user.value.id}"
  />

  <Text variant="strong">User:</Text>
  <Text>{user.value.name}</Text>

  <Text variant="strong">Orders:</Text>
  <List data="{orders}">
    <Text>Order #{$item.id}: {$item.total} USD</Text>
  </List>
</App>
Chain DataSources without undefined requests
<App>
  <DataSource
    id="user"
    url="/api/users/me"
  />

  <DataSource
    id="orders"
    url="/api/orders/{user.value.id}"
    when="{user.value.id}"
  />

  <Text variant="strong">User:</Text>
  <Text>{user.value.name}</Text>

  <Text variant="strong">Orders:</Text>
  <List data="{orders}">
    <Text>Order #{$item.id}: {$item.total} USD</Text>
  </List>
</App>

Key point

Without when, orders may run first and call /api/orders/undefined.

With when="{user.value.id}", the orders request starts only after the first DataSource resolves.

See also