cantierecreativo/redux-bees

Retrieving included data for multiple objects

Closed this issue · 4 comments

Hi, I'm using redux-bees for my project to interface with my JsonApi backend.

I'm having problems accessing data that's included with a response from my backend using the getRelationship() method.

The example included in the readme covers how to use getRelationship() and connect() to retrieve included data with a single object, but the response I'm working with has multiple objects that each map to some included data.

This is the response I get from the backend, I want to access the cities included with it.

{
    "data": [
        {
            "id": "1",
            "type": "countries",
            "attributes": {
                "title-en": "Kuwait",
                "title-ar": "الكويت"
            },
            "relationships": {
                "cities": {
                    "data": []
                }
            }
        },
        {
            "id": "2",
            "type": "countries",
            "attributes": {
                "title-en": "Egypt",
                "title-ar": "مصر"
            },
            "relationships": {
                "cities": {
                    "data": [
                        {
                            "id": "7",
                            "type": "cities"
                        },
                        {
                            "id": "8",
                            "type": "cities"
                        }
                    ]
                }
            }
        }
    ],
    "included": [
        {
            "id": "7",
            "type": "cities",
            "attributes": {
                "slug": "cairo",
                "title-en": "Cairo",
                "title-ar": "القاهرة"
            },
            "relationships": {
                "areas": {
                    "data": []
                }
            }
        },
        {
            "id": "8",
            "type": "cities",
            "attributes": {
                "slug": "alexandria",
                "title-en": "Alexandria",
                "title-ar": "الأسكندرية"
            },
            "relationships": {
                "areas": {
                    "data": []
                }
            }
        }
    ]
}

Hi, the getRelationship() selector should also support a collection of records:

if (Array.isArray(data)) {

Hi, thanks for the timely response.

The problem isn't that data is an array, the problem is that entity is an array, for example countries in the JSON I included

Oh, I see. What about just calling getRelationship() once for each country inside the connect?

What about doing this instead:

function getRelationship(state, entity, relationshipName) {
  if (!entity) {
    return undefined;
  }

  if (Array.isArray(entity)) {
    return entity.map(function(handle) {
      var data = handle.relationships[relationshipName].data;

      if (Array.isArray(data)) {
        return data.map(function(handle) {
          return getEntity(state, handle);
        });
      }

      return getEntity(state, data);
    });
  }

  var data = entity.relationships[relationshipName].data;

  if (Array.isArray(data)) {
    return data.map(function(handle) {
      return getEntity(state, handle);
    });
  }

  return getEntity(state, data);
}

This way the component receives a prop containing the included items as arrays nested under their parents' ids