Product Query [4]: Research passing context down to inner blocks instead of the query

[sunyatasattva]

Currently, the Query Loop block is responsible for building up the query, it then passes it down to the Post Template block which passes it again down to each of the inner blocks. This means that inner blocks are responsible for their own fetching of data, which is inefficient and, especially editor-side, makes the loading of the block a bit slower than it could be, and also quite error prone (as some requests may fail, while others succeed).

On the front-end, this also happens, but built-in caching likely makes the performance impact negligible.

This issue is about a research spike about:

1. Confirming that the performance impact on the front-end is negligible.
2. Research if we could have the parent block do one request and then pass down the context of the entire object to its inner blocks. Perhaps the Products block could pass down an array of products, or, if we can't, we could try to see if the Product Template could make each request and then pass the item down.

We'd like to see if this is possible without modifications to Gutenberg. If those are necessary, the scope of this issue is also to understand how difficult would that be.

The deliverable of this issue should likely be a P2 post with the research results.

[dinhtungdu]

Here is my initial investigation for this issue, I'm posting it here as it's in progress. I'm gonna AFK for the rest of the week so I will unassign myself from this issue, if anyone is interested, please feel free to take over.

On the frontend

The Products block is server-side rendered on the front end, so for now, there isn't any performance issue on the front end. In the future, new inner blocks of the Post Template block can fetch data on the front end, but I think it's the developer's responsibility to integrate with the current structure, for example:

• Try to make it server-side rendered.
• Inject required data through PHP render_block callback.
• Ensure the critical/contentful part of the block is serverside to prevent content/layout shift issues while fetching data on the front end.

On the backend

Let's take a look at the default Products block

Screen.Recording.2023-02-22.at.07.35.57.mov

 

• There are 9 requests to http://wc.local/wp-json/wp/v2/product/{id} by the Product Title block on this line.
• There are 9 requests to http://wc.local/wp-json/wc/store/v1/products by our shared hook withProductDataContext on this line. This is the current way we pass the context down to inner blocks. Inner blocks use useProductDataContext to retrieve the context.
• Products block already fetches data for all products before each individual request above.

So, to avoid making additional requests for data that we already have, we can try to reuse the data fetched by the Products (Query loop) block instead of fetching piece by piece again in <OriginalComponentWithContext/>.

[kmanijak]

Outcome ref: per0F9-tT-p2