Massively simplifies the process of working with JSON:API data on the frontend.
- Nests included objects on resources ๐ธ
- Normalizes data structures ๐
- Converts all object keys to camelCased values ๐ซ
- Written in TypeScript ๐
- Compliant with JSON:API v1.0 Spec ๐
- Rigorously tested ๐ฌ
{
"data": {
"type": "store",
"id": "1",
"attributes": {
"name": "Mercer Island Book Store",
"created_at": "2019-06-30T22:33:41+0000",
"updated_at": "2019-06-30T22:33:41+0000"
},
"relationships": {
"owner": {
"data": {
"id": "2",
"type": "owner"
}
}
}
},
"included": [
{
"type": "owner",
"id": "2",
"attributes": {
"full_name": "John Doe",
"created_at": "2019-06-30T22:33:41+0000",
"updated_at": "2019-06-30T22:33:41+0000"
},
"relationships": {
"address": {
"data": {
"id": "3",
"type": "address"
}
}
}
},
{
"type": "address",
"id": "3",
"attributes": {
"street": "123 Test Ave",
"type": "commercial",
"zip_code": "12345",
"created_at": "2019-06-30T22:33:41+0000",
"updated_at": "2019-06-30T22:33:41+0000"
},
"relationships": {
"driveway": {
"data": {
"id": "4",
"type": "driveway"
}
}
}
},
{
"type": "driveway",
"id": "4",
"attributes": {
"type": "parking_lot",
"created_at": "2019-06-30T22:33:41+0000",
"updated_at": "2019-06-30T22:33:41+0000"
}
}
]
}
{
data: {
id: '1',
name: 'Mercer Island Book Store',
createdAt: '2019-06-30T22:33:41+0000',
updatedAt: '2019-06-30T22:33:41+0000',
owner: {
id: '2',
fullName: 'John Doe',
createdAt: '2019-06-30T22:33:41+0000',
updatedAt: '2019-06-30T22:33:41+0000',
address: {
id: '3',
street: '123 Test Ave',
type: 'commercial',
zipCode: '12345',
createdAt: '2019-06-30T22:33:41+0000',
updatedAt: '2019-06-30T22:33:41+0000',
driveway: {
id: '4',
type: 'parking_lot',
createdAt: '2019-06-30T22:33:41+000',
updatedAt: '2019-06-30T22:33:41+0000',
}
}
}
}
deserialized: true,
}
Pair with Axios interceptors for a seamless experience.
import { deserialize } from 'json-api-deserialize';
axios.interceptors.response.use((response) => {
return {
...response,
...deserialize(response.data),
};
}, (error) => {
return Promise.reject(error);
});
const fetchBookstore = async () => {
const { data: store } = await get('/store/1?include=owner');
console.log(store.owner.fullName); // ๐ John Doe
};
yarn add json-api-deserialize
npm i json-api-deserialize
deserialize(rawJsonApiDocument, options?): deserializedResponseObject | rawJsonApiDocument;
Options:
- Normalize (boolean, default: true)
- Flattens the deserialized response object to spread
attributes
andrelationships
properties to the same level asid
- Converts all object keys to camelCase variants
- Flattens the deserialized response object to spread
deserialize
returns a deserialized response object and falls back to the raw response object if an exception is caught.