Hey.

Looking for some help on how to structure my dynamic search page where data (setup like labels, order of elements etc) for components list are fetch dynamically through graphql. One of these components is search like functionality with "load more" type of pagination. Overall process looks like this:

1. user enters the page under dynamic route (business requirement) which includes region/locale at the end
2. on the layout & page level there is request for page structure (twice - 1st on layout, 2nd page - as this request is being cached I don't need to pass any props)
3. based on that structure components list is being rendered (everything is dynamic, because I don't know which component might come for certain pages upfront)
4. one of these components serves search like feature, including filtering, sorting and loading more items. Worth to add that there is tons of items possible, thats why each filter, sorting or loading more action is done with graphql request to api gateway
5. here come the fun part: on actions possible above I would like to keep url search query params up to date so if user decides to share that link another one can see exactly the same output

I'm facing issues on how to structure that page to combine these features all together. So far I've tried to use url query params as state "memory" for filters and load more "pagination" but it seems to be pain because the need of handling a lot of params (around 8-10). I was wondering on introducing context api to keep state of filters and pagination, but not sure if don't stumble over other problems. Correct me if I'm wrong but because page component uses url params every change in query params triggers refetching data and rerendering whole tree.

Appreciate all suggestions and I'm open for discussion if sth is not clear enough.

Thanks!