[Flight] Simulate fetch to third party in fixture (#33484)
This adds some I/O to go get the third party thing to test how it overlaps. With #33482, this is what it looks like. The await gets cut off when the third party component starts rendering. I.e. after the latency to start. <img width="735" alt="Screenshot 2025-06-08 at 5 42 46 PM" src="https://github.com/user-attachments/assets/f68d9a84-05a1-4125-b3f0-8f3e4eaaa5c1" /> This doesn't fully simulate everything because it should actually also simulate each chunk of the stream coming back too. We could wrap the ReadableStream to simulate that. In that scenario, it would probably get some awaits on the chunks at the end too.
Sebastian Markbåge committed
Jun 9, 2025 at 10:04 UTC
428ab8200128d9421828dbe644c3448d21ea8c45
1 file changed
+26
-7
fixtures/flight/src/App.js
+26
-7
@@ -43,7 +43,7 @@ async function Bar({children}) {
43
}
44
45
async function ThirdPartyComponent() {
46
- return delay('hello from a 3rd party', 30);
46
+ return await delay('hello from a 3rd party', 30);
47
}
48
49
let cachedThirdPartyStream;
@@ -52,16 +52,35 @@ let cachedThirdPartyStream;
52
// That way it gets the owner from the call to createFromNodeStream.
53
const thirdPartyComponent = <ThirdPartyComponent />;
54
55
-function fetchThirdParty(noCache) {
55
+function simulateFetch(cb, latencyMs) {
56
+ return new Promise(resolve => {
57
+ // Request latency
58
+ setTimeout(() => {
59
+ const result = cb();
60
+ // Response latency
61
+ setTimeout(() => {
62
+ resolve(result);
63
+ }, latencyMs);
64
+ }, latencyMs);
65
+ });
66
+}
67
+
68
+async function fetchThirdParty(noCache) {
69
// We're using the Web Streams APIs for tee'ing convenience.
57
- const stream =
58
- cachedThirdPartyStream && !noCache
59
- ? cachedThirdPartyStream
60
- : renderToReadableStream(
70
+ let stream;
71
+ if (cachedThirdPartyStream && !noCache) {
72
+ stream = cachedThirdPartyStream;
73
+ } else {
74
+ stream = await simulateFetch(
75
+ () =>
76
+ renderToReadableStream(
77
thirdPartyComponent,
78
{},
79
{environmentName: 'third-party'}
64
- );
80
+ ),
81
+ 25
82
+ );
83
+ }
84
85
const [stream1, stream2] = stream.tee();
86
cachedThirdPartyStream = stream1;