Best approach to using React Query to handle deeply nested data & updates?

[austinrbrown01]

Hey All!

I'm starting a new project and React Query looks like an awesome library to use for async state management. I ran into an "issue" though regarding how to best handle some deeply nested data with regard to initial fetching and updates, and would love some input from the community on this. My data model looks something like this:

interface LongTripPlan: {
    id: string;
    tripType: string;
    budget: number;
    totalDays: number;
    totalActivities: number;
    tripSections: Array<TripSection>;
}

interface TripSection: {
    id: string;
    tripSectionType: string;
    destination: string;
    startDate: Date;
    endDate: Date;
    dayPlans: Array<DayPlan>;
}

interface DayPlan: {
    id: string;
    day: number;
    activities: Array<Activity>;
}

interface Activity: {
    id: string;
    activityType: string;
    name: string;
    description: string;
    location: string;
    cost: number;
    rating: number;
    tags: Array<string>;
} 

This is a fictitious example, but I think it gets to the crux of my question. In my application, users should be able to plan new LongTripPlans using TripSections from previous trips that they've planned. Moreover, users can create new LongTripPlans and use Activities from other trips, without copying over the entire TripSections.

Initially, I was thinking that I could provide a custom useQuery() hook for each data type, and their data would get loaded in as they rendered. However, If a LongTripPlan is composed of 40 days, each day has 5 activities, I don't want users to have to make 200 queries to get the data for a single trip -- I don't think this is the right way to do this, but correct me if I'm wrong.

My next thought was to ditch id fields on the objects below LongTripPlan and just load that data in statically, but that would reduce the users' ability to copy TripSections and Activities to new plans, since all children to a LongTripPlan would be tightly coupled to the Trip. Moreover, I'd have to send an update for an entire plan every time I modified a detail on an Activity.

Maybe I could design an endpoint /getLongTripData that would provide all of the data at once, and use this to load the initial data into each query hook? I could also create separate endpoints for updating Days, Activities, and TripSections, so that this state could be updated independent of the other components. Is this the best practice?

Would a library like immer be suited for this?

Looking forward to your thoughts!

[flawnn]

Real question for real but no real answers...

[aress31]

up!

[anth-volk]

up!