`Get` adds undefined records if ids are not contiguous

[Noel da Costa]

This is the call I'm making:

this.$store.dispatch("devices/get");

Here's the JSONAPI response from the server:

{
  "meta": { "record_count": 2, "page_count": 1, "page_limit": null },
  "links": {
    "self": "/api/devices?page=1",
    "first": "/api/devices?page=1",
    "last": "/api/devices?page=1"
  },
  "data": [
    {
      "type": "devices",
      "id": "15",
      "attributes": {
        "name": "1f33c1f20ba3db7e9b45b14e3bd047c399f00437ca4aecfb676b656ab7c976bc",
        "created": "2020-04-01T10:52:23+00:00",
        "modified": "2020-04-01T10:52:23+00:00",
        "last-connected": null,
        "last-location": null
      },
      "relationships": {
        "person": {
          "links": { "self": "/api/people/1" },
          "data": { "type": "people", "id": "1" }
        }
      },
      "links": { "self": "/api/devices/15" }
    },
    {
      "type": "devices",
      "id": "16",
      "attributes": {
        "name": "Ah6y7KycXrNpshkIwj8OxrRDq9qOISTfKEAFspZvlGIbcfHJruL8kY1bKKID7TqmHBQ6N",
        "created": "2020-04-01T10:52:26+00:00",
        "modified": "2020-04-01T10:52:26+00:00",
        "last-connected": null,
        "last-location": null
      },
      "relationships": {
        "person": {
          "links": { "self": "/api/people/1" },
          "data": { "type": "people", "id": "1" }
        }
      },
      "links": { "self": "/api/devices/16" }
    }
  ]
}

Here's what ends up in the vuex store:

[
  "__vue_devtool_undefined__",
  "__vue_devtool_undefined__",
  "__vue_devtool_undefined__",
  "__vue_devtool_undefined__",
  "__vue_devtool_undefined__",
  "__vue_devtool_undefined__",
  "__vue_devtool_undefined__",
  "__vue_devtool_undefined__",
  "__vue_devtool_undefined__",
  "__vue_devtool_undefined__",
  "__vue_devtool_undefined__",
  "__vue_devtool_undefined__",
  "__vue_devtool_undefined__",
  "__vue_devtool_undefined__",
  "__vue_devtool_undefined__",
  {
    "_jv": {
      "type": "devices",
      "id": "15",
      "relationships": {
        "person": {
          "links": { "self": "/api/people/1" },
          "data": { "type": "people", "id": "1" }
        }
      },
      "links": { "self": "/api/devices/15" }
    },
    "name": "1f33c1f20ba3db7e9b45b14e3bd047c399f00437ca4aecfb676b656ab7c976bc",
    "created": "2020-04-01T10:52:23+00:00",
    "modified": "2020-04-01T10:52:23+00:00",
    "last-connected": null,
    "last-location": null
  },
  {
    "_jv": {
      "type": "devices",
      "id": "16",
      "relationships": {
        "person": {
          "links": { "self": "/api/people/1" },
          "data": { "type": "people", "id": "1" }
        }
      },
      "links": { "self": "/api/devices/16" }
    },
    "name": "Ah6y7KycXrNpshkIwj8OxrRDq9qOISTfKEAFspZvlGIbcfHJruL8kY1bKKID7TqmHBQ6N",
    "created": "2020-04-01T10:52:26+00:00",
    "modified": "2020-04-01T10:52:26+00:00",
    "last-connected": null,
    "last-location": null
  }
]

Notice how it's filling in 15 undefined records starting from to fill up the missing indexes. That's not good. Could kill the front-end if there are enough records. Also breaks contract with the UI as they are undefined.

I should point out that I'm starting with an empty store (by doing a hard refresh before making the dispatch call). Also I don't think I can offer you an example of this because it requires a working back-end?

[Noel da Costa]

Interesting. I've tried modifying the id's on the example app but I don't get the same behaviour there. I then tried replacing testapp.json with the JSONAPI response from my JSONAPI server (as above) and also couldn't replicate the behaviour.

[Noel da Costa]

Seems to be caused by the _.merge from here: #135

[Matthew Richardson]

How are you creating the empty store? Your store appears to be an array, and jsonapi-vuex expects an object as the 'root' of the store, which might explain the strange results if it isn't one.