Normalize GraphQL response data

Ionut Achim — Sat, 29 Dec 2018 21:00:46 +0000

We all love GraphQL and we want to use it. There are tons of libraries and clients out there that help us do that with ease, but there is still one problem... How do you persist that data?

Yes, everything is all great when the response mirrors the exact structure we asked for, but we don't want to cache it that way, do we? We probably want a normalized version of that data which we can persist to our store and read/modify it efficiently. Flux or Redux stores work best with normalized data and there are also GraphQL clients you can use to execute queries on the local cache/state (blips or apollo-link-state), in which case, we definitely need to persist normalized data.

GraphQLNormalizr is simple, fast, light-weight and it provides all the tools needed to do just that, the only requirement is that you include the id and __typename fields for all the nodes (but it can do that for you if you're too lazy or you want to keep your sources thin).

monojack / graphql-normalizr

Normalize GraphQL responses for persisting in the client cache/state

graphql-normalizr

Normalize GraphQL responses for persisting in the client cache/state.

Not related, in any way, to normalizr, just shamelessly piggybacking on its popularity. Also, "normalizEr" is taken...

TL;DR: Transforms:

{
  "data": {
    "findUser": [
      {
        "__typename": "User"
        "id": "5a6efb94b0e8c36f99fba013",
        "email": "Lloyd.Nikolaus@yahoo.com",
        "posts": [
          {
            "__typename": "BlogPost",
            "id": "5a6efb94b0e8c36f99fba016",
            "title": "Dolorem voluptatem molestiae",
            "comments": [
              {
                "__typename": "Comment",
                "id": "5a6efb94b0e8c36f99fba019",
                "message": "Alias quod est voluptatibus aut quis sunt aut numquam."
              },
              {
                "__typename": "Comment",
                "id": "5a6efb94b0e8c36f99fba01b",
                "message": "Harum quia asperiores nemo."
              },
              {
                "__typename": "Comment",
                "id": "5a6efb94b0e8c36f99fba01c",
                "message":

…

View on GitHub

DEV Community: Ionut Achim

Normalize GraphQL response data

monojack / graphql-normalizr

Normalize GraphQL responses for persisting in the client cache/state

graphql-normalizr