Nova · Endpoints

One call after another

A URL and a function in the same action. onSuccess of the first call makes the second, which by then finds the first one’s answer in the data. To the steps a call is a call: where it goes is the endpoint’s business.

The action, as it is written

{
  id: 'endpoint-chain',
  data: { member: { name: '', seats: [] }, price: { total: 0 } },
  layout: {
    component: 'Stack',
    children: [
      {
        if: '$.member.name',
        then: {
          component: 'Text',
          children: '{{$.member.name}} owes {{$.price.total}}.',
        },
      },
      {
        component: 'Button',
        ref: 'load',
        children: 'Work out what is owed',
      },
    ],
  },
  endpoints: {
    member: {
      url: '/examples/endpoint-chain/members/m1',
      method: 'GET',
      target: 'member',
    },
    price: { fn: 'endpoint-chain.price', target: 'price' },
  },
  triggers: [
    {
      event: 'ui:click',
      ref: 'load',
      do: [{ call: 'member', onSuccess: [{ call: 'price' }] }],
    },
  ],
}

Running herepress it

What its endpoints are answered

{
  endpoint-chain.price: { total: 76 },
  GET /examples/endpoint-chain/members/m1: {
    status: 200,
    body: { name: 'Ada', seats: ['C4', 'C5'] },
  },
}

What is done to it

press load

What it sent

[
  {
    method: 'GET',
    url: '/examples/endpoint-chain/members/m1',
  },
]

What it then holds

{
  member: { name: 'Ada', seats: ['C4', 'C5'] },
  price: { total: 76 },
}

What it then says

Ada owes 76.
Work out what is owed

Output matches the expected value

Left: the action as the package ships it. Right: the same action running in this page, rendered with this site’s components. Below: the action run as the example specifies, on the installed package.