Front-end time-consuming Query optimization

[ahonn]

Some pages in the front-end query data are processed through a huge graphql query, which may cause the server to process the request very time-consumingly (combine different APIs and return the data after calculation).

In this case, we can optimize the request by splitting the query to reduce the time consumption and avoid request timeout.

Query

• https://github.com/utxostack/rgbpp-explorer/blob/28a262948ff00edc0add9ee4fc822ccb2a7268dd/frontend/src/app/%5Blang%5D/address/%5Baddress%5D/transactions/ckb.tsx#L18C1-L90C3
• https://github.com/utxostack/rgbpp-explorer/blob/28a262948ff00edc0add9ee4fc822ccb2a7268dd/frontend/src/app/%5Blang%5D/address/%5Baddress%5D/transactions/btc.tsx#L16C1-L150C3
• https://github.com/utxostack/rgbpp-explorer/blob/28a262948ff00edc0add9ee4fc822ccb2a7268dd/frontend/src/app/%5Blang%5D/transaction/%5Btx%5D/page.tsx#L11C1-L127C3
• https://github.com/utxostack/rgbpp-explorer/blob/28a262948ff00edc0add9ee4fc822ccb2a7268dd/frontend/src/app/%5Blang%5D/block/ckb/%5BhashOrHeight%5D/transactions/page.tsx#L13C1-L80C3
• https://github.com/utxostack/rgbpp-explorer/blob/28a262948ff00edc0add9ee4fc822ccb2a7268dd/frontend/src/app/%5Blang%5D/block/btc/%5BhashOrHeight%5D/transactions/page.tsx#L14C1-L77C3

All queries basically contain a list of transactions. When there is only one query on a page, the time consumption may increase, resulting in a Vercel Function timeout.

A better way to split this part of the query to:

• a query for querying the overall data and the transaction id list
• a query for querying the details of the transaction.

cc @Flouse @yuche @Vibes-INS