HATEOAS from Front-end PoV

{
    "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;
}