[Flight] Add getCacheForType() to the dispatcher (#20315)

* Remove react/unstable_cache
We're probably going to make it available via the dispatcher. Let's remove this for now.
* Add readContext() to the dispatcher
On the server, it will be per-request.
On the client, there will be some way to shadow it.
For now, I provide it on the server, and throw on the client.
* Use readContext() from react-fetch
This makes it work on the server (but not on the client until we implement it there.)
Updated the test to use Server Components. Now it passes.
* Fixture: Add fetch from a Server Component
* readCache -> getCacheForType<T>
* Add React.unstable_getCacheForType
* Add a feature flag
* Fix Flow
* Add react-suspense-test-utils and port tests
* Remove extra Map lookup
* Unroll async/await because build system
* Add some error coverage and retry
* Add unstable_getCacheForType to Flight entry

Author: gaearon

fixtures/flight/server/cli.server.js

@@ -17,13 +17,28 @@ const app = express();
 // Application
 app.get('/',function(req,res){
 if(process.env.NODE_ENV==='development'){
-for(varkeyinrequire.cache){
-deleterequire.cache[key];
-}
+// This doesn't work in ESM mode.
+// for (var key in require.cache) {
+// delete require.cache[key];
+// }
 }
 require('./handler.server.js')(req,res);
 });
 
+app.get('/todos',function(req,res){
+res.setHeader('Access-Control-Allow-Origin','*');
+res.json([
+{
+id: 1,
+text: 'Shave yaks',
+},
+{
+id: 2,
+text: 'Eat kale',
+},
+]);
+});
+
 app.listen(3001,()=>{
 console.log('Flight Server listening on port 3001...');
 });

fixtures/flight/src/App.server.js

@@ -1,4 +1,5 @@
 import*asReactfrom'react';
+import{fetch}from'react-fetch';
 
 importContainerfrom'./Container.js';
 
@@ -8,11 +9,17 @@ import {Counter as Counter2} from './Counter2.client.js';
 importShowMorefrom'./ShowMore.client.js';
 
 exportdefaultfunctionApp(){
+consttodos=fetch('http://localhost:3001/todos').json();
 return(
 <Container>
 <h1>Hello, world</h1>
 <Counter/>
 <Counter2/>
+<ul>
+{todos.map(todo=>(
+<likey={todo.id}>{todo.text}</li>
+))}
+</ul>
 <ShowMore>
 <p>Lorem ipsum</p>
 </ShowMore>

packages/react-debug-tools/src/ReactDebugHooks.js

@@ -23,6 +23,7 @@ import type {OpaqueIDType} from 'react-reconciler/src/ReactFiberHostConfig';
 import{NoMode}from'react-reconciler/src/ReactTypeOfMode';
 
 importErrorStackParserfrom'error-stack-parser';
+importinvariantfrom'shared/invariant';
 importReactSharedInternalsfrom'shared/ReactSharedInternals';
 import{REACT_OPAQUE_ID_TYPE}from'shared/ReactSymbols';
 import{
@@ -100,6 +101,10 @@ function nextHook(): null | Hook {
 returnhook;
 }
 
+functiongetCacheForType<T>(resourceType: () => T): T{
+invariant(false,'Not implemented.');
+}
+
 functionreadContext<T>(
  context: ReactContext<T>,
  observedBits: void | number | boolean,
@@ -298,6 +303,7 @@ function useOpaqueIdentifier(): OpaqueIDType | void {
 }
 
 constDispatcher: DispatcherType={
+getCacheForType,
 readContext,
 useCallback,
 useContext,

packages/react-dom/src/server/ReactPartialRendererHooks.js

@@ -20,6 +20,7 @@ import type PartialRenderer from './ReactPartialRenderer';
 import{validateContextBounds}from'./ReactPartialRendererContext';
 
 importinvariantfrom'shared/invariant';
+import{enableCache}from'shared/ReactFeatureFlags';
 importisfrom'shared/objectIs';
 
 typeBasicStateAction<S>=(S=>S)|S;
@@ -214,6 +215,10 @@ export function resetHooksState(): void {
 workInProgressHook=null;
 }
 
+functiongetCacheForType<T>(resourceType: () => T): T{
+invariant(false,'Not implemented.');
+}
+
 functionreadContext<T>(
  context: ReactContext<T>,
  observedBits: void | number | boolean,
@@ -512,3 +517,7 @@ export const Dispatcher: DispatcherType = {
 // Subscriptions are not setup in a server environment.
 useMutableSource,
 };
+
+if (enableCache) {
+Dispatcher.getCacheForType=getCacheForType;
+}

packages/react-fetch/src/ReactFetchBrowser.js

@@ -9,7 +9,7 @@
 
 importtype{Wakeable}from'shared/ReactTypes';
 
-import{readCache}from'react/unstable-cache';
+import{unstable_getCacheForType}from'react';
 
 constPending=0;
 constResolved=1;
@@ -34,16 +34,13 @@ type Result = PendingResult | ResolvedResult | RejectedResult;
 
 // TODO: this is a browser-only version. Add a separate Node entry point.
 constnativeFetch=window.fetch;
-constfetchKey={};
-
-functionreadResultMap(): Map<string,Result>{
-constresources=readCache().resources;
-letmap=resources.get(fetchKey);
-if(map===undefined){
-map=newMap();
-resources.set(fetchKey,map);
-}
-returnmap;
+
+functiongetResultMap(): Map<string,Result>{
+returnunstable_getCacheForType(createResultMap);
+}
+
+functioncreateResultMap(): Map<string,Result>{
+returnnewMap();
 }
 
 functiontoResult(thenable): Result{
@@ -120,7 +117,7 @@ Response.prototype = {
 };
 
 functionpreloadResult(url: string,options: mixed): Result{
-constmap=readResultMap();
+constmap=getResultMap();
 letentry=map.get(url);
 if(!entry){
 if(options){

packages/react-fetch/src/ReactFetchNode.js

@@ -11,8 +11,7 @@ import type {Wakeable} from 'shared/ReactTypes';
 
 import*ashttpfrom'http';
 import*ashttpsfrom'https';
-
-import{readCache}from'react/unstable-cache';
+import{unstable_getCacheForType}from'react';
 
 typeFetchResponse={|
 // Properties
@@ -75,16 +74,12 @@ type RejectedResult = {|
 
 typeResult<V>=PendingResult|ResolvedResult<V>|RejectedResult;
 
-constfetchKey={};
+functiongetResultMap(): Map<string,Result<FetchResponse>>{
+returnunstable_getCacheForType(createResultMap);
+}
 
-functionreadResultMap(): Map<string,Result<FetchResponse>>{
-constresources=readCache().resources;
-letmap=resources.get(fetchKey);
-if(map===undefined){
-map=newMap();
-resources.set(fetchKey,map);
-}
-returnmap;
+functioncreateResultMap(): Map<string,Result<FetchResponse>>{
+returnnewMap();
 }
 
 functionreadResult<T>(result: Result<T>): T {
@@ -166,7 +161,7 @@ Response.prototype = {
 };
 
 functionpreloadResult(url: string,options: mixed): Result<FetchResponse>{
-constmap=readResultMap();
+constmap=getResultMap();
 letentry=map.get(url);
 if(!entry){
 if(options){

packages/react-fetch/src/__tests__/ReactFetchNode-test.js

@@ -10,86 +10,112 @@
 'use strict';
 
 describe('ReactFetchNode',()=>{
-letReactCache;
-letReactFetchNode;
 lethttp;
 letfetch;
+letwaitForSuspense;
 letserver;
 letserverEndpoint;
 letserverImpl;
 
 beforeEach(done=>{
 jest.resetModules();
-if(__EXPERIMENTAL__){
-ReactCache=require('react/unstable-cache');
-// TODO: A way to pass load context.
-ReactCache.CacheProvider._context._currentValue=ReactCache.createCache();
-ReactFetchNode=require('react-fetch');
-fetch=ReactFetchNode.fetch;
-}
+
+fetch=require('react-fetch').fetch;
 http=require('http');
+waitForSuspense=require('react-suspense-test-utils').waitForSuspense;
 
 server=http.createServer((req,res)=>{
 serverImpl(req,res);
 });
-server.listen(done);
-serverEndpoint=`http://localhost:${server.address().port}/`;
+serverEndpoint=null;
+server.listen(()=>{
+serverEndpoint=`http://localhost:${server.address().port}/`;
+done();
+});
 });
 
 afterEach(done=>{
 server.close(done);
 server=null;
 });
 
-asyncfunctionwaitForSuspense(fn){
-while(true){
-try{
-returnfn();
-}catch(promise){
-if(typeofpromise.then==='function'){
-awaitpromise;
-}else{
-throwpromise;
-}
-}
-}
-}
+// @gate experimental
+it('can fetch text from a server component',async()=>{
+serverImpl=(req,res)=>{
+res.write('mango');
+res.end();
+};
+consttext=awaitwaitForSuspense(()=>{
+returnfetch(serverEndpoint).text();
+});
+expect(text).toEqual('mango');
+});
 
 // @gate experimental
-it('can read text',async()=>{
+it('can fetch json from a server component',async()=>{
 serverImpl=(req,res)=>{
-res.write('ok');
+res.write(JSON.stringify({name: 'Sema'}));
 res.end();
 };
-awaitwaitForSuspense(()=>{
-constresponse=fetch(serverEndpoint);
-expect(response.status).toBe(200);
-expect(response.statusText).toBe('OK');
-expect(response.ok).toBe(true);
-expect(response.text()).toEqual('ok');
-// Can read again:
-expect(response.text()).toEqual('ok');
+constjson=awaitwaitForSuspense(()=>{
+returnfetch(serverEndpoint).json();
 });
+expect(json).toEqual({name: 'Sema'});
 });
 
 // @gate experimental
-it('can read json',async()=>{
+it('provides response status',async()=>{
 serverImpl=(req,res)=>{
 res.write(JSON.stringify({name: 'Sema'}));
 res.end();
 };
-awaitwaitForSuspense(()=>{
-constresponse=fetch(serverEndpoint);
-expect(response.status).toBe(200);
-expect(response.statusText).toBe('OK');
-expect(response.ok).toBe(true);
-expect(response.json()).toEqual({
-name: 'Sema',
-});
-// Can read again:
-expect(response.json()).toEqual({
-name: 'Sema',
-});
+constresponse=awaitwaitForSuspense(()=>{
+returnfetch(serverEndpoint);
+});
+expect(response).toMatchObject({
+status: 200,
+statusText: 'OK',
+ok: true,
 });
 });
+
+// @gate experimental
+it('handles different paths',async()=>{
+serverImpl=(req,res)=>{
+switch(req.url){
+case'/banana':
+res.write('banana');
+break;
+case'/mango':
+res.write('mango');
+break;
+case'/orange':
+res.write('orange');
+break;
+}
+res.end();
+};
+constoutputs=awaitwaitForSuspense(()=>{
+return[
+fetch(serverEndpoint+'banana').text(),
+fetch(serverEndpoint+'mango').text(),
+fetch(serverEndpoint+'orange').text(),
+];
+});
+expect(outputs).toMatchObject(['banana','mango','orange']);
+});
+
+// @gate experimental
+it('can produce an error',async()=>{
+serverImpl=(req,res)=>{};
+
+expect.assertions(1);
+try{
+awaitwaitForSuspense(()=>{
+returnfetch('BOOM');
+});
+}catch(err){
+expect(err.message).toEqual('Invalid URL: BOOM');
+}
+});
 });