[Flight] Basic Streaming Suspense Support #17285
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
When something suspends a new chunk is created.
The WHATWG API is designed to be pulled recursively. We should refactor to favor that approach.
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 387c233:
|
Size changes (stable)ReactDOM: size: 🔺+62.2%, gzip: 🔺+58.2% Details of bundled changes.Comparing: 62ef250...387c233 react-dom
react-server
react-flight
|
Size changes (experimental)ReactDOM: size: 0.0%, gzip: -0.0% Details of bundled changes.Comparing: 62ef250...387c233 react-dom
react-server
react-flight
|
gaearon
approved these changes
Nov 6, 2019
| x.then(ping, ping); | ||
| return; | ||
| } else { | ||
| // This errored, we need to serialize this error to the |
|
If connection dies, how do I implement a Retry button? |
|
Error boundary and do the request from the root again. |
|
Let me rephrase the tests question. Do you want me to write tests? 😄 |
|
I can also just make an app.. |
|
If you want to write tests that would be great. Like the suspending and error cases. |
|
Cool, I'll do that. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This adds basic Suspense support to Flight by streaming the response.
First it sends one line with the root JSON model. Within the model holes are replaced with "$" followed by a hex ID. E.g. "$12AB3".
Subsequent lines begin with "J" followed by a hex ID.
So an example response may look something like:
The client suspends if you try to access an unresolved value. Once a new line comes in it unsuspends that part of the model.
Currently this suspending is implemented as a getter but it could also be a Proxy. However, more likely is that we'll hide this behind an explicit API that unwraps both components and its data in the future.
Errors
If the server errors while rendering one of the models that error is encoded with an "E" prefix:
When this happens, the previously suspended part of the model now resolves and starts throwing an error on the client. This will then be caught by an error boundary on the client. Unrelated parts of the response can still continue rendering though.
If the connection dies, then all remaining pending promises resolve and start throwing an error which are caught by error boundaries. Previously resolved parts don't error though.
There's a prioritization scheme so errors are emitted at lower priority in the stream than models.
Future Additions
I added a comment describing the protocol. The protocol also includes space for a few other types of data.