ngrx/data entity data service

4
votes

Trying to understand the ngrx/data entity data service example here, where it says "Creating entity data services". After showing that service, the docs go on to show how to use ngrx/data in components. The part of the component I'm interested in is this:

getHeroes() {
  this.heroService.getAll();
}

The docs state that getAll() initiates an HTTP request, but I'm not sure where or how this request is actually made. In the ngrx-data repo. It states to replace the heroService with the following code:

import { Injectable } from '@angular/core';
import {
  EntityCollectionServiceBase,
  EntityCollectionServiceElementsFactory
} from 'ngrx-data';
import { Hero } from '../core';

@Injectable({ providedIn: 'root' })
export class HeroService extends EntityCollectionServiceBase<Hero> {
  constructor(serviceElementsFactory: EntityCollectionServiceElementsFactory) {
    super('Hero', serviceElementsFactory);
  }
}

The docs state ngrx-data handles getting and saving our data for us. That's great, but I don't know where this getting data is happening. I cloned the repo, checked out the finish branch and could not find something that is hitting endpoints.

E.g. the service used to call http.get(${api}/heroes) for getAll() to get all the heroes, but that's replaced by the above code, so where are these calls occurring?

I notice that the EntityCollectionServiceBase has a getAll() method. But where is the configuration of this service taking place to register the respective endpoints? I'm sure that I am missing something incredibly simple here.

3
angularngrxangular-ngrx-data

3 Answers

2
votes

Broadly speaking the EntityCollectionServiceBase dispatches actions and via the persist effect in EntityEffects the DefaultDataService is called and maps the response to its success / fail actions. See Architecture Overview

Hence if you want to access / transform the data returned from the API you extend / replace the DefaultDataService. You can register your custom data service using EntityDataService which is basically a registry of data services that gets or creates the data service (uses default if none exists).

enter image description here

1
votes

Just looking at the docs, it would appear that the DefaultDataService "Composes HTTP URLs from a root path and the entity name"

The docs also recommend checking out the Configuration section below in the docs to specify your own urls for the Entity DataService to interact with.

You can probably see the generated endpoints in use in the Network tab of dev tools while playing with the example app.

I hope this helps.

1
votes

You can register provider for it in app.module

  providers: [
{ provide: DefaultDataServiceConfig, useValue: defaultDataServiceConfig } ]

export const defaultDataServiceConfig: DefaultDataServiceConfig = {
root: 'myapi/baseurl',
timeout: 1000 * 60, // request timeout }