{
    "items": [
        {
            "title": "Enter lawyers details",
            "completed": false,
            "links": [
                {
                  "href": "/api/v1/checklist/items/1/mark-as-complete",
                  "rel": "/rels/checklist/toggle-complete"
                }
            ]
        },
        {
            "title": "Energy",
            "completed": true,
            "links": [
                {
                  "href": "/api/v1/checklist/items/2/unmark-as-complete",
                  "rel": "/rels/checklist/toggle-complete"
                },
                {
                  "href": "/api/v1/energy",
                  "rel": "/rels/energy/fetch"
                },
            ]
        }    
    ]
}
props.grantConsent(
    getApiUrlByRel(
        props.energy.status.response.links,
        '/rels/third-party-provider/grant-consent'
    ),
    postcode
);

Cons

  • Have to re-fetch on updates
  • Calling any endpoint involves getting links from state and passing in URL
  • Have to store fetched URL in order to re-fetch

Pros

  • Can handle change of routes in API (+mobile)
  • Stateless - move logic to API?
  • Opt-in anyway
export interface IApiState<TResponse> {
    response?: TResponse;
    fetching: boolean;
    requestedUrl?: string;
}

HATEOAS from Front-end PoV

By James Morcom

HATEOAS from Front-end PoV

  • 746