Add GraphQL batched queries count to PerfBar

What does this MR do and why?

In Performance Bar, we have a dropdown with all the requests executed after the page was loaded.

We use the Apollo client to send our GraphQL requests from the client, and it Batches multiple queries into one request to minimize the data sent over the wire. More in: https://www.apollographql.com/blog/apollo-client/performance/batching-client-graphql-queries/

Previously, Performance Bar didn't display that and only showed the first query in the batch.

Previously, this could've created a potential confusion where it looked like a single GraphQL query performed a lot of work (DB queries, Redis calls, Mem usage, etc), but in fact, these were multiple (e.g. 10 different) queries batched together.

This change makes it clear when we look into the performance stats of the batched queries.

Screenshots or screen recordings

Now in the Performance bar, you will notice [X queries batched] hint for such queries:

Screenshot_2023-04-03_at_16.29.36

You could check the contents in the Network tab:

Screenshot_2023-04-03_at_16.30.42

Screenshot_2023-04-03_at_16.30.26

In future MRs, we want to expand the display of batched queries inside the Perf Bar.

How to set up and validate locally

Open any issue page, e.g. http://localhost:3000/flightjs/Flight/-/issues/10

Check that you have some batched queries.

You could verify through the inspector that these were batched and sent in one request.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Aleksei Lipniagov

Merge request reports

Loading