Graphql-tools: Progress bar support for client-side

[linonetwo]

I'm imaging add a progress bar for every component that is fetching data. Currently apollo-client provides a loading API, which can be true, false or undefined.

But I think we can optionally provide more detailed data fetching information by adding progress like 0.3 (means 30%), and 1.0 ( means 100%) in completed.

I'd like to PR for this if it's not very hard for me. I think it's something likes addErrorLoggingToSchema that reports progress as the numerator and use AST depth of graphql query as the denominator.

How hard do you think it will be?

[linonetwo]

Dynamically reporting progress may need a socket?

[helfer]

@linonetwo I think it will be hard to build a useful progress indicator for graphql query resolution on the server (which I think is what you're proposing), simply because the progress isn't very linear.

If you're talking about a progress indicator on the client, that's going to be even harder, because it should presumably indicate how much longer the user has to wait. That information is pretty difficult to get, and it depends on latency, size of the query, size of the response, bandwidth, etc.

[linonetwo]

Linear progress is not so necessary since webpack's and ReactNativePackger's progress indicators are not linear too.

Maybe just offering a percentage? Can I know how many promises are there waiting to be resolved, to offer a brief percentage?

( number of fields in the query ) / ( how many promises are there waiting to be resolved ) = xx%

Ok if it's such a hard job, I will take another AST related project to practice myself, then return to it.

[loganpowell]

Hi @linonetwo did you ever end up making this? I would love to use it if so!

[jalovatt]

This would definitely be nice to have. Regarding what to actually include, IMO that's up to the server developer. Being able to say connection.sendLoadingMessage('fetching from external API 1 of 3') would be fine for my current project, whereas others might want to calculate the percentage of a known workload that the server has finished and pass that on.

[linonetwo]

Actually, I end up using Server Timing API with servertiming npm package and just watch the timing in devtool.

You can only see it after the response return, which makes it unable to become a progress bar. But it is nice to have timing in DevTool, it looks like this in network panel:

Maybe we can send a signal to the client every time servertiming is called? So there can be a progress bar. Maybe I will try this one day.