How should a React app (or any SPA) interact with a HATEOAS back-end?

There’s a few different ways to solve this. Here’s two:

  1. The SPA takes context from the uri (such as an id), and uses it to search on the API. The API can describe templated links/actions to search for resources by their id.
  2. Instead of doing client-side routing, let the server decide what to render.

We’re going more towards #2. If we have a uri such as:

https://spa.example/https://api.example/foo/bar

We take the path part of this uri and hit the API. Based on what the API responds with, we decide what to render. This means that most of the routing for these kinds of endpoints is delegated to the server, which feels more in line with HATEOAS.

The path part in this case is an entire absolute URI, but we also support relative uris and have a default base uri. So in practice these two uris are equivalent (for our SPA):

https://spa.example/https://api.example/foo/bar
https://spa.example/foo/bar

We develop & use ketting / react-ketting to do most of the heavy lifting

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top