[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 (var key in require.cache) {
-      delete require.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 * as React from 'react';
+import {fetch} from 'react-fetch';
 
 import Container from './Container.js';
 
@@ -8,11 +9,17 @@ import {Counter as Counter2} from './Counter2.client.js';
 import ShowMore from './ShowMore.client.js';
 
 export default function App() {
+  const todos = fetch('http://localhost:3001/todos').json();
   return (
     <Container>
       <h1>Hello, world</h1>
       <Counter />
       <Counter2 />
+      <ul>
+        {todos.map(todo => (
+          <li key={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';
 
 import ErrorStackParser from 'error-stack-parser';
+import invariant from 'shared/invariant';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
 import {
@@ -100,6 +101,10 @@ function nextHook(): null | Hook {
   return hook;
 }
 
+function getCacheForType<T>(resourceType: () => T): T {
+  invariant(false, 'Not implemented.');
+}
+
 function readContext<T>(
   context: ReactContext<T>,
   observedBits: void | number | boolean,
@@ -298,6 +303,7 @@ function useOpaqueIdentifier(): OpaqueIDType | void {
 }
 
 const Dispatcher: 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';
 
 import invariant from 'shared/invariant';
+import {enableCache} from 'shared/ReactFeatureFlags';
 import is from 'shared/objectIs';
 
 type BasicStateAction<S> = (S => S) | S;
@@ -214,6 +215,10 @@ export function resetHooksState(): void {
   workInProgressHook = null;
 }
 
+function getCacheForType<T>(resourceType: () => T): T {
+  invariant(false, 'Not implemented.');
+}
+
 function readContext<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 @@
 
 import type {Wakeable} from 'shared/ReactTypes';
 
-import {readCache} from 'react/unstable-cache';
+import {unstable_getCacheForType} from 'react';
 
 const Pending = 0;
 const Resolved = 1;
@@ -34,16 +34,13 @@ type Result = PendingResult | ResolvedResult | RejectedResult;
 
 // TODO: this is a browser-only version. Add a separate Node entry point.
 const nativeFetch = window.fetch;
-const fetchKey = {};
-
-function readResultMap(): Map<string, Result> {
-  const resources = readCache().resources;
-  let map = resources.get(fetchKey);
-  if (map === undefined) {
-    map = new Map();
-    resources.set(fetchKey, map);
-  }
-  return map;
+
+function getResultMap(): Map<string, Result> {
+  return unstable_getCacheForType(createResultMap);
+}
+
+function createResultMap(): Map<string, Result> {
+  return new Map();
 }
 
 function toResult(thenable): Result {
@@ -120,7 +117,7 @@ Response.prototype = {
 };
 
 function preloadResult(url: string, options: mixed): Result {
-  const map = readResultMap();
+  const map = getResultMap();
   let entry = map.get(url);
   if (!entry) {
     if (options) {

packages/react-fetch/src/ReactFetchNode.js

@@ -11,8 +11,7 @@ import type {Wakeable} from 'shared/ReactTypes';
 
 import * as http from 'http';
 import * as https from 'https';
-
-import {readCache} from 'react/unstable-cache';
+import {unstable_getCacheForType} from 'react';
 
 type FetchResponse = {|
   // Properties
@@ -75,16 +74,12 @@ type RejectedResult = {|
 
 type Result<V> = PendingResult | ResolvedResult<V> | RejectedResult;
 
-const fetchKey = {};
+function getResultMap(): Map<string, Result<FetchResponse>> {
+  return unstable_getCacheForType(createResultMap);
+}
 
-function readResultMap(): Map<string, Result<FetchResponse>> {
-  const resources = readCache().resources;
-  let map = resources.get(fetchKey);
-  if (map === undefined) {
-    map = new Map();
-    resources.set(fetchKey, map);
-  }
-  return map;
+function createResultMap(): Map<string, Result<FetchResponse>> {
+  return new Map();
 }
 
 function readResult<T>(result: Result<T>): T {
@@ -166,7 +161,7 @@ Response.prototype = {
 };
 
 function preloadResult(url: string, options: mixed): Result<FetchResponse> {
-  const map = readResultMap();
+  const map = getResultMap();
   let entry = map.get(url);
   if (!entry) {
     if (options) {

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

@@ -10,86 +10,112 @@
 'use strict';
 
 describe('ReactFetchNode', () => {
-  let ReactCache;
-  let ReactFetchNode;
   let http;
   let fetch;
+  let waitForSuspense;
   let server;
   let serverEndpoint;
   let serverImpl;
 
   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;
   });
 
-  async function waitForSuspense(fn) {
-    while (true) {
-      try {
-        return fn();
-      } catch (promise) {
-        if (typeof promise.then === 'function') {
-          await promise;
-        } else {
-          throw promise;
-        }
-      }
-    }
-  }
+  // @gate experimental
+  it('can fetch text from a server component', async () => {
+    serverImpl = (req, res) => {
+      res.write('mango');
+      res.end();
+    };
+    const text = await waitForSuspense(() => {
+      return fetch(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();
     };
-    await waitForSuspense(() => {
-      const response = 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');
+    const json = await waitForSuspense(() => {
+      return fetch(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();
     };
-    await waitForSuspense(() => {
-      const response = 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',
-      });
+    const response = await waitForSuspense(() => {
+      return fetch(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();
+    };
+    const outputs = await waitForSuspense(() => {
+      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 {
+      await waitForSuspense(() => {
+        return fetch('BOOM');
+      });
+    } catch (err) {
+      expect(err.message).toEqual('Invalid URL: BOOM');
+    }
+  });
 });