How to flatten data between Jbuilder and Normalizr - normalization

Question

I'm working on a small Vue project with a Rails API, and am having issues figuring out the best way to normalize my data. I'm using Jbuilder on the backend and wanting to flatten/normalize the data that comes through so that it's easier to access in the frontend, I fear that I'm just not quite "getting" how to get Normalizr to work correctly.
Currently for the jbuilder, I've got several things related to a user that I eventually want stored in Vuex.
get_current_user.json.jbuilder
json.user #user
# All of user's lists and associated categories and items
json.lists #user.lists do |list|
json.(list, :id, :name, :active, :user_id)
json.categories list.categories do |category|
json.(category, :id, :name, :user_id, :created_at, :updated_at, :list_id)
json.items category.items do |item|
json.(item, :id, :name, :website, :price, :information, :notes, :category_id, :quantity)
end
end
end
# User's total hiking miles
json.total_m #user.m_by_month
# User's upcoming trips properties
json.upcoming_trips #user.upcoming_trips do |trip|
json.(trip, :id, :name, :start_date, :end_date, :data_id, :list_id)
# User's todo items
json.todos trip.todo_items.sort_by {|t| t[:position]} do |todo|
json.(todo, :id, :title, :completed, :position, :upcoming_trip_id, :user_id)
end
# User's shopping list items
json.shopping_list_items trip.shopping_list_items.sort_by {|s| s[:position]} do |item|
json.(item, :id, :title, :completed, :position, :quantity, :upcoming_trip_id, :user_id)
end
# User's trip details
json.trip_details hike.trip_details.order(updated_at: :desc) do |detail|
json.(detail, :id, :trip_type, :label, :url, :upcoming_trip_id)
end
end
So then on the front end, before normalizing, the user object is essentially:
- user (Object)
- packs (Array)
- categories (Array)
- items (Array)
- total_m (Array)
- upcoming_trips (Array)
- shopping_list_items (Array)
- todos (Array)
- trip_details (Array)
- user (Object)
schema.js
import { schema } from 'normalizr';
// Define user schema
export const userSchema = new schema.Entity('user');
export const itemSchema = new schema.Entity('items', {
user: userSchema,
});
export const listSchema = new schema.Entity('lists', {
user: userSchema,
items: [itemSchema],
});
// Define category schema
export const categorySchema = new schema.Entity('categories', {
user: userSchema,
packs: [listSchema],
});
// Define upcoming trip schema
export const upcomingTripSchema = new schema.Entity('upcomingTrips', {
user: userSchema,
categories: [categorySchema],
});
After calling const normalizedUser = normalize(user, userSchema), I'll receive something like:
{
- entities (Object)
- user (Object)
- undefined (Object)
- lists (Array)
- total_m (Array)
- upcoming_trips (Array)
- user (Object)
- result: undefined
}
The good thing is that since I have control over the front- and back-end, I can modify it however I want. Does anyone have any suggestions? I would greatly appreciate the help!

Answer 1

Thank you for that interesting question. If this were me, I would use the power of the back-end ActiveRecord queries and JBuilder to produce the JSON out of the API exactly as I want to consume it. The use of normalizr as a secondary filter would be unnecessary.
One thing that concerns me is the duplication of schema necessary to have normalizr working. You have the schema in Rails, and then another schema in JS. Changing one necesitates change to the other. Keeping them aligned creates integration problems.
As such, this isn't quite an answer but rather a question and suggestion. What is normalizr doing that can't be done with ARel and JBuilder? Having the Rails schema and a sample of the target JSON, someone might give you the ARel/JBuilder to produce the JSON.