Structuring a map-heavy app with app router
Unanswered
Barbary Lion posted this in #help-forum
Barbary LionOP
I'm looking for help figuring out how to structure my app with the app router. It's a trip planning app, where the map is the centerpiece of most pages while the other content is in the sidebar. (Such as input fields, itineraries, route info, etc) I figured what makes the most sense is having the sidebar be the actual pages, while the map is contained in the layout. That way, I can have a route for each different function in the app, such as viewing an itinerary or viewing a location's details, etc.
The issue is that I don't know if this structure allows me to use data from the "sidebar" components in each page in map layers. For example, displaying a route shape on a map layer (which is in the layout) from an itinerary loaded in the page. I was also hoping to use RSCs to load the itineraries, but I'm not sure how to do that. I had the idea of using a Context provider in the layout which allows me to pass data back to the map, but then I lose a lot of the nice responsive prop-passing features of react-map-gl.
Anyone with more experience structuring App Router apps might have a better idea of how to accomplish this! Maybe I should just give up on keeping things in the layout and put everything in the pages? Or use a portal somehow to move the Map component into the page (this feels too hacky to me)?
The issue is that I don't know if this structure allows me to use data from the "sidebar" components in each page in map layers. For example, displaying a route shape on a map layer (which is in the layout) from an itinerary loaded in the page. I was also hoping to use RSCs to load the itineraries, but I'm not sure how to do that. I had the idea of using a Context provider in the layout which allows me to pass data back to the map, but then I lose a lot of the nice responsive prop-passing features of react-map-gl.
Anyone with more experience structuring App Router apps might have a better idea of how to accomplish this! Maybe I should just give up on keeping things in the layout and put everything in the pages? Or use a portal somehow to move the Map component into the page (this feels too hacky to me)?
30 Replies
@Ray do you mean parallel routes?
Barbary LionOP
I'm not using parallel routes, maybe I should be? I just have the map directly in the layout, and then the children prop is used for the sidebar.
I think parallel routes would have the same problem
I think parallet routes work good for this
Barbary LionOP
Getting data into the map layers
How do you manage state between them though?
what data you would need it the sidebar?
Barbary LionOP
zustand is interesting! I will check that out
you could wrap the data loader function with react cache
then call it in
@sidebar and @mapit will dedup the request for you
Barbary LionOP
here's the layout of the app. The sidebar is the Next.js page, while the map in the back is rendered by the layout file. But now I need to render map layers based on what's going on in the sidebar. for example, I'd like to highlight a route on the map as user mouses over the itineraries in the sidebar. I guess I could put the currently highlighted itinerary in state?
use searchParams?
Barbary LionOP
true, the state is managed in the url ATM so you can paste in a url and it will load the same page again
right
Barbary LionOP
i'm interested in the idea of just caching the api query and executing it again in the map component
sometime we don't need client state at all
Barbary LionOP
and then read the url for the currently "selected" one
yea and it can be shared with the url
which you can't do with client state
Barbary LionOP
ok, so I need to research how to do the caching with Apollo client and app router. in theory i should be able to just execute the same query in the map parallel route and it will use the cached version? or i guess one of them will use the cached version
@Barbary Lion ok, so I need to research how to do the caching with Apollo client and app router. in theory i should be able to just execute the same query in the map parallel route and it will use the cached version? or i guess one of them will use the cached version
yes but you need to use
cache from react which will dedup the same requestBarbary LionOP
this doesn't really work very well because when you route to different routes it renders a new <Map> which resets the zoom and position and all that
how do you change the route?
Barbary LionOP
well just using the back button resets it
i also use router.push()
but it also makes sense that it would, since each route has its own <Map> in the parallel route. I need to use the same instance of <Map> across the whole app so that it keeps its state if the user has moved it around