How to structure an App Router project for frequent data fetching
Unanswered
Bengal posted this in #help-forum
BengalOP
I have a map with hundreds of thousands of possible polygons in a database. I am using supabase to fetch the relevent features based on the map location. When the user pans or changes the zoom level to show a new area of the map, I need to call an async supabase function to fetch the relevant data. I also then need to update several other sibling components to the Map component.
I'm having trouble understanding how to structure this app in the App Router world. I guess I should create a Route Handler (formerly API Route) to fetch the data for the various components? I can't use
I'm having trouble understanding how to structure this app in the App Router world. I guess I should create a Route Handler (formerly API Route) to fetch the data for the various components? I can't use
await inside client components, so I put the API fetch inside a useEffect hook? But what's the right way to share the map's state so all the components can call the Route Handler with the correct arguments?5 Replies
BengalOP
I'd really like to avoid putting 4 decimal numbers in the URL to pass the current viewport to sibling components via the search params. ðŸ™
BengalOP
I suppose another alternative is to make the enclosing component a client component too, and pass updater functions like the old days. That's just like a Pages Router project, but with all the client component restrictions. 😕
BengalOP
I gave up on App Router and went back to the Pages Router. Works great.
I can't use await inside client components, so I put the API fetch inside a useEffect hook?You can use await inside client components. You just have to call it the
sync way. (Yes using useEffect haha).But what's the right way to share the map's state so all the components can call the Route Handler with the correct arguments?Have you tried delving into async state management like React Query?
I suppose another alternative is to make the enclosing component a client component too, and pass updater functions like the old days. That's just like a Pages Router project, but with all the client component restrictions. 😕I mean, pages route is all client component so... 😕