ngrx/data entity data service

Question

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.

Answer 1

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).

Answer 2

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.

Answer 3

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 }

Answer 4

HttpClient requests are made in DefaultDataService.execute(). To make these requests the DefaultDataService instance uses an HttpClient instance that was injected into the DefaultDataServiceFactory instance used to create it (to create the DefaultDataService that is).

As other users have suggested you can provide alternative DefaultDataServiceConfig to DefaultDataServiceFactory that will be used by DefaultDataServiceFactory.create<T>() to create the DefaultDataService. For example, you could change the root path of api to a full endpoint of your choosing such as https://my-endpoint/. Note that because ngrx/data's default endpoint path is api the HttpClient will recognise this as a relative path and use the default protocol + host + port - so if you're running in angular dev mode it will be localhost:4200.

If you want more control over the http requests you could also use a custom DataServiceFactory by extending DefaultDataServiceFactory and injecting your own HttpClient instance - this way you can also hook up interceptors if you have more complex needs.