Question

I m interested in getting feedback on the architecture of a web app I ve inherited. Some useful context:

App is client-side rendered, written in React and uses Apollo GraphQL for data fetching. SSR is out of scope and adds more complexity than can be justified for an admin tool.
App has a few main top-level routes. The entry point to the app is a dashboard listing a huge number of "projects". Each project has a dedicated page (let s call it the Project Detail Page or PDP). A project consists of a bunch of project details/metadata, several assets, and posts that consume those assets.
Using the PDP as an example, the page makes tons of small GraphQL queries (around 30 for an average page). There s a query to get all the project metadata. For each asset, there is one query to get the asset details and another to resolve its thumbnail. And for each post, there are also two queries.

我们再次希望改进这一申请的执行。为此,我 cur惜目前的最佳做法是这里的数据集束结构。我就此发表了意见(见下文),如果这是一个好的做法,希望得到反馈。

<>结构>

Having many small useQuerys distributed around the app is convenient for getting access to the relevant data in the places that care about that data. So, to that end, the current approach works nicely. I d like to avoid implementing large scale state management (like Redux) as I think it complicates things and adds an unnecessary intermediate layer a lot of the time.
However, having many small queries adds a lot of network overhead and introduces a lot of layout shift as different parts of the page resolve at different times.
My proposal would be to create a single, larger GraphQL query for each top-level page. This query would resolve the project details which includes asset IDs and post IDs, which would then be resolved into hydrated asset/post objects too before that data is returned in one payload. That way, all the granular useQuerys distributed around the app could remain in place and would basically be hitting the Apollo cache instead of the network. In a nutshell, using one big query to hydrate the cache and using it as a state management solution almost.

这种做法是否有意义? 我不是想什么?

Answer 1

One of the strengths of GraphQL is the ability to fetch exactly the data that you use in the UI, fetching this data from the backend in one query. It is also a good practice to keep representational components free from side effects. So, your idea to fetch more data in fewer querues makes total sense.

You don t need global state with apollo-client cache.
child components will not make requests but will receive project assets as a props.

有一个明显的例外。请允许我说,与你的项目一样,你需要打上你希望接受和显示网页的候选人名单。在这种情况下,将这一清单单独挑出一个问题,使之更易于执行设想,这或许是明智的。

Another things to consider:

You can play with fetchPolicy to control caching behaviour
Fragments might be helpful
Keep an eye on depth of your queries. You might need to optimize your graphql backend to keep things fast.

友情链接