ngrxngrx-entityngrx-data

Should I use ngrx-data, if the content-type I'm receiving is JSON-LD + Hydra?


I love the advantages of JSON-LD, Hydra and just found out about NgRx/data.

I tried using it without customization, which obviously didn't work. Today I spend some hours on the documentation, which left me with even more question.

The important part is, that I don't want to sacrifice any information about the collection. So I can't just use custom Effects.

Any idea on how to approach this?

Collection Respond:

{
    "@context": "/contexts/Article",
    "@id": "/articles",
    "@type": "hydra:Collection",
    "hydra:member": [
        {
            "@id": "/articles/91",
            "@type": "http://schema.org/Article",
            "headline": "Neque illum sed adipisci dolorem rem.",
            "slug": "reiciendis-nesciunt-labore-voluptas",
            "author": {
                "@id": "/people/91",
                "@type": "http://schema.org/Person",
                "id": 91,
                "name": "Edd Nienow"
            },
            "publisher": null,
            "aggregateRating": null,
            "articleCreator": {
                "@id": "/people/91",
                "@type": "http://schema.org/Person",
                "name": "Edd Nienow"
            },
            "articleType": "tutorial",
            "creativeWorkStatus": "draft",
            "articleVersions": [
                {
                    "content": "Facere illo praesentium accusantium suscipit voluptatem laborum nihil sed. Aperiam doloremque mollitia nisi voluptatem facilis. Voluptatem sed aut et incidunt id et error modi.",
                    "articleBody": "Omnis et dolores enim praesentium. Temporibus nisi mollitia maiores voluptas nobis impedit.",
                    "brief": "Est quae minima ut ab eaque ut. Neque qui nemo quaerat consequatur.",
                    "wordCount": 779,
                    "image": null,
                    "createdAt": "1980-09-30T01:43:18+00:00"
                }
            ],
            "articleCategories": [],
            "articleTerms": [],
            "publishedAt": "2003-11-11T05:23:26+00:00",
            "createdAt": "1971-10-23T07:53:28+00:00"
        },
    ],
    "hydra:totalItems": 100,
    "hydra:view": {
        "@id": "/articles?page=4",
        "@type": "hydra:PartialCollectionView",
        "hydra:first": "/articles?page=1",
        "hydra:last": "/articles?page=4",
        "hydra:previous": "/articles?page=3"
    }

Single Respond:

{
    "@context": "/contexts/Article",
    "@id": "/articles/91",
    "@type": "http://schema.org/Article",
    "headline": "Neque illum sed adipisci dolorem rem.",
    "slug": "reiciendis-nesciunt-labore-voluptas",
    "author": {
        "@id": "/people/91",
        "@type": "http://schema.org/Person",
        "name": "Edd Nienow"
    },
    "publisher": null,
    "aggregateRating": null,
    "articleCreator": {
        "@id": "/people/91",
        "@type": "http://schema.org/Person",
        "name": "Edd Nienow"
    },
    "articleType": "tutorial",
    "creativeWorkStatus": "draft",
    "articleVersions": [
        {
            "content": "Facere illo praesentium accusantium suscipit voluptatem laborum nihil sed. Aperiam doloremque mollitia nisi voluptatem facilis. Voluptatem sed aut et incidunt id et error modi.",
            "articleBody": "Omnis et dolores enim praesentium. Temporibus nisi mollitia maiores voluptas nobis impedit.",
            "brief": "Est quae minima ut ab eaque ut. Neque qui nemo quaerat consequatur.",
            "wordCount": 779,
            "image": null,
            "createdAt": "1980-09-30T01:43:18+00:00"
        }
    ],
    "articleCategories": [],
    "articleTerms": [],
    "publishedAt": "2003-11-11T05:23:26+00:00",
    "createdAt": "1971-10-23T07:53:28+00:00"
}

Solution

  • I see one way to do this :

    1. Add "@" properties to your models :
    export interface HydraEntity {
        '@id': string;
        '@type': string;
    }
    
    export interface Author extends HydraEntity{
        id: number;
        name: string;
    }
    
    1. Change the way Ngrx/data handle API responses adding the additional "hydra:*" fields : https://ngrx.io/guide/data/entity-metadata#additionalcollectionstate

    You should be able to reduce your result in your state.


    I never tried it but I assumed it following this issue: https://github.com/ngrx/platform/issues/1948

    Leading to the PR: https://github.com/ngrx/platform/pull/1921