javascript - Many To Many relationship with extra column in Spring Data REST - client side implementation?

Question

I am currently trying to implement a many-to-many relationship in Spring Data REST which is consumed on the client (ReactJS). For simplicity, I tried to implement this tutorial:

+---------+         +------------+         
| post    |         | post_tag   |         +-------------+
+---------+         +------------+         | tag         | 
| id      |---------| post_id    |         +-------------+
| title   |         | tag_id     |---------| id          |
+---------+         | created_on |         | name        | 
                    +------------+         +-------------+

I tested with some example data (MySQL):

INSERT INTO tag (name) VALUES ('sports');
INSERT INTO post (title) VALUES ('Post One');
INSERT INTO post_tag (post_id, tag_id, created_on) VALUES (1, 1, '2021-02-01');

After navigating to localhost:8081/api/postTags I encountered this:

{
  _embedded: {
    postTags: [
      {
        createdOn: "2021-02-01T00:00:00.000+00:00",
        _links: {
          self: {
            href: "http://localhost:8081/api/postTags/com.springreact.shop.db.PostTagId@3e1"
          },
          postTag: {
            href: "http://localhost:8081/api/postTags/com.springreact.shop.db.PostTagId@3e1"
          },
          tag: {
            href: "http://localhost:8081/api/postTags/com.springreact.shop.db.PostTagId@3e1/tag"
          },
          post: {
            href: "http://localhost:8081/api/postTags/com.springreact.shop.db.PostTagId@3e1/post"
          }
        }
      }
    ]
  },
  _links: {
    self: {
      href: "http://localhost:8081/api/postTags"
    },
    profile: {
      href: "http://localhost:8081/api/profile/postTags"
    }
  }
}

The postTag url is not valid which is probably because of Embedded, any ideas how i can fix it?

Additionally, I have no clue how I can post on the client (axios) to the client because of additional postTag joint table. Following from Java, it would make sense to first create both posts and tags, and then connect them together + setting the additional field.

    // attempt one
    axios.post("/api/postTags", 
      { 
        postId: '/api/posts/1', 
        tagId: '/api/tags/1', 
        createdOn: '2021-01-01' 
      },
      {
        headers: {
         "Content-Type": "application/json",
        }
      }
     );

    // attempt two
    axios.put("/api/postTags/1", "/api/posts/1", {
      headers: {
        "Content-Type": "text/uri-list"
      }
    });

    axios.put("/api/postTags/1", "/api/tags/1", {
      headers: {
        "Content-Type": "text/uri-list"
      }
    });

Now I don't know what I can do next.. Is it even achievable? I read that EmbeddedId is probably not supported. Also, I didn't find any solution how to add/connect data via the endpoints. Most examples I've found only cover many-to-many relationships without extra columns.

Thanks!

question from:https://stackoverflow.com/questions/65944429/many-to-many-relationship-with-extra-column-in-spring-data-rest-client-side-im

Answer 1

Waitting for answers