Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to fix issue when ngrx entity returned undefined for id

Tags:

ngrx-entity

why am getting this below error and how to fix this .

The entity passed to the selectId implementation returned undefined. You should probably provide your own selectId implementation. The entity that was passed:

like image 784
Amit Dubey Avatar asked Apr 23 '19 16:04

Amit Dubey


People also ask

Should isloading be a separate property in ngrx?

Spinners or other loading indicators are frequently wired up to isLoading or pending states in NgRx. Some claim that it shouldn’t be stored as a separate property and it is a derived state, which is determined by the presence of the data itself — if it’s not there it might be loading.

Should I store errors locally or in the ngrx store?

So whether to store the error locally or in the NgRx Store depends on your use case, and the latter might be a safer choice. Spinners or other loading indicators are frequently wired up to isLoading or pending states in NgRx.

What are ngrx effects in Redux state?

One thing that took a while for us to get our heads around is NgRx Effects. It’s how you deal with asynchronous actions in Redux state; in short, it gives you a hook into your Redux store to say “every time an event is dispatched, after it’s been reduced, let me know.”

What happens to observables emitted by ngrx effects when an error occurs?

If we do that, the Observable that NgRx Effects subscribes to is going to be replaced by the Observable emitted in the catchError method, and then all future values emitted from action$ are going to be ignored (the new Observable in the error handler is not subscribed to them).


Video Answer


3 Answers

Probably you are passing an entity which has no id property. So you need to override the selectId method in the EntityAdapter creation.

export const adapter: EntityAdapter<YourInterface> =
  createEntityAdapter<YourInterface>({
    selectId: nameofclass => nameofclass.yourID
  });
like image 113
Miguel Angel Magaña Avatar answered Sep 23 '22 13:09

Miguel Angel Magaña


I have fixed this issue by specifying metadata for several entities at the same time in an EntityMetadataMap:

// entity-store.module.ts

...

export function selectEventId(event: Event): number {
  return event.eventId;
}

export const entityMetadata: EntityMetadataMap = {
  User: {},
  Event: {
    selectId: selectEventId
  }
};

...
like image 42
Milena Avatar answered Sep 22 '22 13:09

Milena


This error is typically linked to missing - Entity primary key:

Every entity type must have a primary key whose value is an integer or a string. The NgRx Data library assumes that the entity has an "id" property, whose value is the primary key.

Not every entity will have a primary key property named "id". For some entities, the primary key could have any name or could be a combined value of two or more properties. In these cases, you always specify the primary key for that entity using the function:

selectId

This function returns the primary key value of the specified field/property of that entity.

For example:

Entity Villain does not have a primary key named "id", but it is named "key". For this entity, the selectId function is this:

selectId: (villain: Villain) => villain.key;

And the full declaration of the entity metadata could be something like:

File: ../entity-store.module.ts

const entityMetadata: EntityMetadataMap = {

    ...

    Villain: {
                       // We MUST specify a primary key / id field for each entity
                       // (if it does not have its own prop/field named: 'id') !!!
        selectId: (villain: Villain) => villain.key, // <--- 

                       // optional setting - filter
        filterFn: filterForVillains,
                       // optional setting - sort order
        sortComparer: sortVillains
    },

    Hero { ... },

    ....

}
like image 39
Felix Avatar answered Sep 24 '22 13:09

Felix