Ember: Relationship link related data not loading / disappearing

Question

I'm experiencing somewhat of a bug with Ember/Ember-data. Here's my scenario:

1. Client lands on / route and Ember loads data from /api/v1/videos?limit=8. The response comes from a rails-api backend using active_model_serializers which ensures the response is JSON API compliant. Now the store has 8 arbitrary videos loaded into it.

2. Each video component in the DOM has a link to a user page (the video belongsTo a user and a user hasMany videos).

3. Client clicks on a link-to which navigates to /users/1 which represents a user with ID 1

4. The model hook for that route just loads a single user record. The user record has the following payload:

{
    "data": {
        "id": "1",
        "relationships": {
            "videos": {
                "data": [],
                "links": {
                    "related": "/api/v1/videos?user_id=1"
                }
            },
        },
        "type": "users"
    }
}

The problem is that ember does not automatically send the request for /api/v1/videos?user_id=1 (presumably because a similar request /api/v1/videos?limit=8 already happened).

If I directly load the /users/1 page then Ember is smart and auto-loads data from the /api/v1/videos?user_id=1 endpoint.

I suspect that Ember is being fooled by the fact that a similar request to the videos endpoint already happened with different query parameters. The end result is that my app does not show any data on the user page.

One way to fix this is to not use the links/related syntax but populate "data": [], with video IDs which will cause ember to send n requests for n videos. This works but is not acceptable for a large scale app where a user page might have hundreds of videos.

How can I fix this?

You can see that the active_model_serializers setup for the links/related structure is supposed to be tailored specifically for ember-data.

---

Edit: I tried getting rid of data: [] using include_data false in active_model_serializers which didn't help.

---

Edit 2: Here's the payload of /api/v1/videos?limit=8:

{
    "data": [
        ...
        {
            "attributes": {
                ...
            },
            "id": "325",
            "relationships": {
                "user": {
                    "data": {
                        "id": "1",
                        "type": "users"
                    }
                }
            },
            "type": "videos"
        },
        ...
    ]
}

In other words, some of the videos in that payload may belong to the user we will later load.

---

Edit 3: I'm doing this as a workaround in the user route:

afterModel(user) {
  user.hasMany('videos').reload();
})

It's kind of dumb but it gets the job done for now.

---

Edit 4: I've tried upgrading to ember and ember-data v3. The behavior persists.

Answer 1

I created an Ember Twiddle with your use-case. Check it out to find the differences to your implementation. I'm very interested, why it doesn't work for you. I'm sure it's some small detail you're missing.

---

UPDATE

It turns out(see comments below), that emberjs/data, doesn't handle links.related-field if data-field(resource-linkage) is provided

relationships: {
  videos: {
    data: [], // if data is provided(resource linkage), ember won't fetch relationships via links.related
    links: {
      related: "/videos?user_id=4"
    }
  }
}

I can't find this restriction at JSON API DOC, so I think this is ember-specific, but this shouldn't be an issue, because data: [] makes no sense, if links-object is provided, so it should be omitted by the serializer.

---