React.js HATEOAS client

Question

If I do the following http call to my api on resource /people and return

{
  "_embedded": {
    "people": [
      {
        "id": 1,
        "firstName": "John",
        "lastName": "Doe",
        "_links": {
          "self": {
            "href": "http://localhost:8080/person/1"
          },
          "person": {
            "href": "http://localhost:8080/person/1"
          }
        }
      }
    ]
  },
  "_links": {
    "self": {
      "href": "http://localhost:8080/person"
    }
  }
}

The data is being rendered on screen in a table and currently I expose my id's from my backend and use the following link for my react-router to handle

<Link to={`person/${this.props.person.id}`}>Detail</Link>

Here I can't pass the link in the rendered link and have to pass the id to do the detail call in my backend. But instead of constructing the href manually I want to use the url at _links.self.href in my next component.

How can I achieve this without exposing id's in my React application?

`I can't pass it as a parameter since it's a link` Can you expand on that a little? Also, how are you routing? react-router? — Matt Holland, Oct 26 '16 at 20:23
Much clearer, thanks. But won't `Detail` do what you want? I'm assuming `person` is the structure from that array in your API response. — Matt Holland, Oct 26 '16 at 21:48
No, the json is returned from my api and the value in the `href` is the location at my backend. — jgeerts, Oct 27 '16 at 06:55

score 1 · Answer 1 · answered Nov 17 '16 at 08:53

1

Found a question with the same issue here.

In the Link use:

<Link to={{pathname: "/person", state: { person: person }}} />

And in the referenced component:

this.props.location.state.person

answered Nov 17 '16 at 08:53

jgeerts

641
8
17

score 0 · Answer 2 · edited May 23 '17 at 12:00

Your question is almost identical to the example I give in my answer to this question: https://stackoverflow.com/a/18083285/760706

The main issue I would take with what you have presented is that the resource you have included in the _embedded section (/person/1) is not included in the links of the collection resource, the main _links section. Instead you have listed it next to self within the person's own links.

The second problem I see is that the link relation you have used, "people" (which actually links to an individual person), is not a URI nor on the IANA registered link relations list. These are the only two legal types of link relation. In this instance, your collection should use the registered relation item to point to its members. For custom relations, your URI should be a HTTP URL under a domain you control, pointing to documentation, so that users can look up the documentation for that link relation by going to the URL.

React.js HATEOAS client

2 Answers2