[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

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');
+ }
+ });
 });