Apollo Client (React): Possible to get normalized data from Query object? - graphql

Question

The Query.data object of react-apollo provides data in a nested form, like so:
{
"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": "Vel veniam consectetur laborum."
},
{
"__typename": "Comment",
"id": "5a6efb94b0e8c36f99fba01e",
"message":
"Possimus beatae vero recusandae beatae quas ut commodi laboriosam."
}
]
}
]
}
]
}
I have a use case where I need the data in normalized form, like so:
{
"comments": {
"5a6efb94b0e8c36f99fba019": {
"id": "5a6efb94b0e8c36f99fba019",
"message": "Alias quod est voluptatibus aut quis sunt aut numquam."
},
"5a6efb94b0e8c36f99fba01b": {
"id": "5a6efb94b0e8c36f99fba01b",
"message": "Harum quia asperiores nemo."
},
"5a6efb94b0e8c36f99fba01c": {
"id": "5a6efb94b0e8c36f99fba01c",
"message": "Vel veniam consectetur laborum."
},
"5a6efb94b0e8c36f99fba01e": {
"id": "5a6efb94b0e8c36f99fba01e",
"message":
"Possimus beatae vero recusandae beatae quas ut commodi laboriosam."
}
},
"blogPosts": {
"5a6efb94b0e8c36f99fba016": {
"id": "5a6efb94b0e8c36f99fba016",
"title": "Dolorem voluptatem molestiae",
"comments": [
"5a6efb94b0e8c36f99fba019",
"5a6efb94b0e8c36f99fba01b",
"5a6efb94b0e8c36f99fba01c",
"5a6efb94b0e8c36f99fba01e"
]
}
},
"users": {
"5a6efb94b0e8c36f99fba013": {
"id": "5a6efb94b0e8c36f99fba013",
"email": "Lloyd.Nikolaus#yahoo.com",
"posts": ["5a6efb94b0e8c36f99fba016"]
}
}
}
Seeing as Apollo allready does cache persistance of data in normalized form, is there a way to access the relevant response data in normalized form, without the use of a separate normalizing process like with the graphql-normalizr library?
If possible I'd like to avoid the overhead of double normalization.

Answer 1

You should be able to read the flattened data in the cache with client.readFragment()
Have a look at the documentation here:
https://www.apollographql.com/docs/react/advanced/caching.html#readfragment