Reenable warning if fetchQuery is called in render (using new unsatable React APIs)

Reviewed By: tyao1

Differential Revision: D70524672

fbshipit-source-id: 242db550f62dafdd58596e0e93e46e3e0114ff55

Author: captbaritone

packages/react-relay/relay-hooks/__tests__/loadQuery-test.js

@@ -26,10 +26,11 @@ import type {
   Variables,
 } from 'relay-runtime';
 
-const {loadQuery} = require('../loadQuery');
+const {loadQuery, useTrackLoadQueryInRender} = require('../loadQuery');
 // Need React require for OSS build
 // eslint-disable-next-line no-unused-vars
 const React = require('react');
+const ReactTestRenderer = require('react-test-renderer');
 const {
   Network,
   Observable,
@@ -40,6 +41,7 @@ const {
   createMockEnvironment,
   disallowConsoleErrors,
   disallowWarnings,
+  expectWarningWillFire,
 } = require('relay-test-utils-internal');
 
 disallowWarnings();
@@ -945,4 +947,52 @@ describe('loadQuery', () => {
       });
     });
   });
+
+  describe('warnings', () => {
+    let Container;
+    let LoadDuringRender;
+
+    beforeEach(() => {
+      Container = (props: {children: React.Node}) => {
+        // $FlowFixMe[react-rule-hook]
+        useTrackLoadQueryInRender();
+        return props.children;
+      };
+      LoadDuringRender = (props: {name?: ?string}) => {
+        loadQuery(environment, preloadableConcreteRequest, variables, {
+          fetchPolicy: 'store-or-network',
+          __nameForWarning: props.name,
+        });
+        return null;
+      };
+    });
+
+    it('warns if called during render', () => {
+      expectWarningWillFire(
+        'Relay: `loadQuery` should not be called inside a React render function.',
+      );
+
+      ReactTestRenderer.act(() => {
+        ReactTestRenderer.create(
+          <Container>
+            <LoadDuringRender />
+          </Container>,
+        );
+      });
+    });
+
+    it('uses provided name for warning', () => {
+      expectWarningWillFire(
+        'Relay: `refetch` should not be called inside a React render function.',
+      );
+
+      ReactTestRenderer.act(() => {
+        ReactTestRenderer.create(
+          <Container>
+            <LoadDuringRender name="refetch" />
+          </Container>,
+        );
+      });
+    });
+  });
 });

packages/react-relay/relay-hooks/__tests__/useQueryLoader-live-query-test.js

@@ -56,6 +56,7 @@ const loadQuery = jest.fn().mockImplementation(() => {
 
 jest.mock('../loadQuery', () => ({
   loadQuery,
+  useTrackLoadQueryInRender: () => {},
 }));
 
 beforeEach(() => {

packages/react-relay/relay-hooks/__tests__/useQueryLoader-test.js

@@ -57,6 +57,7 @@ const loadQuery = jest.fn().mockImplementation(() => {
 
 jest.mock('../loadQuery', () => ({
   loadQuery,
+  useTrackLoadQueryInRender: () => {},
 }));
 
 describe.each([

packages/react-relay/relay-hooks/__tests__/useRefetchableFragmentNode-test.js

@@ -38,6 +38,7 @@ import type {
 import type {OperationDescriptor, Variables} from 'relay-runtime';
 import type {Query} from 'relay-runtime/util/RelayRuntimeTypes';
 
+const {useTrackLoadQueryInRender} = require('../loadQuery');
 const RelayEnvironmentProvider = require('../RelayEnvironmentProvider');
 const useRefetchableFragmentInternal = require('../useRefetchableFragmentInternal');
 const invariant = require('invariant');
@@ -368,6 +369,7 @@ describe.each([['New', useRefetchableFragmentInternal]])(
       };
 
       const ContextProvider = ({children}: {children: React.Node}) => {
+        useTrackLoadQueryInRender();
         const [env, _setEnv] = useState(environment);
         const relayContext = useMemo(() => ({environment: env}), [env]);
 

packages/react-relay/relay-hooks/loadQuery.js

@@ -31,6 +31,7 @@ import type {
 import type {OperationAvailability} from 'relay-runtime/store/RelayStoreTypes';
 
 const invariant = require('invariant');
+const React = require('react');
 const {
   __internal: {fetchQueryDeduped},
   Observable,
@@ -40,9 +41,21 @@ const {
   getRequest,
   getRequestIdentifier,
 } = require('relay-runtime');
+const warning = require('warning');
 
+let RenderDispatcher = null;
 let fetchKey = 100001;
 
+hook useTrackLoadQueryInRender() {
+  if (RenderDispatcher === null) {
+    // Flow does not know of React internals (rightly so), but we need to
+    // ensure here that this function isn't called inside render.
+    RenderDispatcher =
+      // $FlowFixMe[prop-missing]
+      React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE?.H;
+  }
+}
+
 type QueryType<T> =
   T extends Query<infer V, infer D, infer RR>
     ? {
@@ -75,6 +88,17 @@ function loadQuery<
   options?: ?LoadQueryOptions,
   environmentProviderOptions?: ?TEnvironmentProviderOptions,
 ): PreloadedQueryInner<TQuery, TEnvironmentProviderOptions> {
+  // This code ensures that we don't call loadQuery during render.
+  const CurrentDispatcher =
+    // $FlowFixMe[prop-missing]
+    React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE?.H;
+
+  warning(
+    RenderDispatcher == null || CurrentDispatcher !== RenderDispatcher,
+    'Relay: `%s` should not be called inside a React render function.',
+    options?.__nameForWarning ?? 'loadQuery',
+  );
+
   // Every time you call loadQuery, we will generate a new fetchKey.
   // This will ensure that every query reference that is created and
   // passed to usePreloadedQuery is independently evaluated,
@@ -392,4 +416,5 @@ function loadQuery<
 
 module.exports = {
   loadQuery,
+  useTrackLoadQueryInRender,
 };

packages/react-relay/relay-hooks/useEntryPointLoader.js

@@ -21,6 +21,7 @@ import type {
 } from './EntryPointTypes.flow';
 
 const loadEntryPoint = require('./loadEntryPoint');
+const {useTrackLoadQueryInRender} = require('./loadQuery');
 const useIsMountedRef = require('./useIsMountedRef');
 const {useCallback, useEffect, useRef, useState} = require('react');
 
@@ -103,6 +104,8 @@ hook useLoadEntryPoint<
    * entry point references.
    */
 
+  useTrackLoadQueryInRender();
+
   const initialEntryPointReferenceInternal =
     options?.TEST_ONLY__initialEntryPointData?.entryPointReference ??
     initialNullEntryPointReferenceState;

packages/react-relay/relay-hooks/useFragment.js

@@ -13,6 +13,7 @@
 
 import type {Fragment, FragmentType, GraphQLTaggedNode} from 'relay-runtime';
 
+const {useTrackLoadQueryInRender} = require('./loadQuery');
 const useFragmentInternal = require('./useFragmentInternal');
 const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
 const {useDebugValue} = require('react');
@@ -48,6 +49,10 @@ declare hook useFragment<TFragmentType: FragmentType, TData>(
 ): ?TData;
 
 hook useFragment(fragment: GraphQLTaggedNode, key: mixed): mixed {
+  // We need to use this hook in order to be able to track if
+  // loadQuery was called during render
+  useTrackLoadQueryInRender();
+
   const fragmentNode = getFragment(fragment);
   useStaticFragmentNodeWarning(fragmentNode, 'first argument of useFragment()');
   const data = useFragmentInternal(fragmentNode, key, 'useFragment()');

packages/react-relay/relay-hooks/useLazyLoadQuery.js

@@ -19,6 +19,7 @@ import type {
   Variables,
 } from 'relay-runtime';
 
+const {useTrackLoadQueryInRender} = require('./loadQuery');
 const useLazyLoadQueryNode = require('./useLazyLoadQueryNode');
 const useMemoOperationDescriptor = require('./useMemoOperationDescriptor');
 const useRelayEnvironment = require('./useRelayEnvironment');
@@ -50,6 +51,10 @@ hook useLazyLoadQuery<TVariables: Variables, TData>(
     UNSTABLE_renderPolicy?: RenderPolicy,
   },
 ): TData {
+  // We need to use this hook in order to be able to track if
+  // loadQuery was called during render
+  useTrackLoadQueryInRender();
+
   const environment = useRelayEnvironment();
 
   const query = useMemoOperationDescriptor(

packages/react-relay/relay-hooks/usePreloadedQuery.js

@@ -18,6 +18,7 @@ import type {
 } from './EntryPointTypes.flow';
 import type {Query, RenderPolicy, Variables} from 'relay-runtime';
 
+const {useTrackLoadQueryInRender} = require('./loadQuery');
 const useLazyLoadQueryNode = require('./useLazyLoadQueryNode');
 const useMemoOperationDescriptor = require('./useMemoOperationDescriptor');
 const useRelayEnvironment = require('./useRelayEnvironment');
@@ -66,6 +67,10 @@ hook usePreloadedQuery<
     UNSTABLE_renderPolicy?: RenderPolicy,
   },
 ): TData {
+  // We need to use this hook in order to be able to track if
+  // loadQuery was called during render
+  useTrackLoadQueryInRender();
+
   const environment = useRelayEnvironment();
   const {fetchKey, fetchPolicy, source, variables, networkCacheConfig} =
     preloadedQuery;

packages/react-relay/relay-hooks/useQueryLoader.js

@@ -23,7 +23,7 @@ import type {
   Variables,
 } from 'relay-runtime';
 
-const {loadQuery} = require('./loadQuery');
+const {loadQuery, useTrackLoadQueryInRender} = require('./loadQuery');
 const useIsMountedRef = require('./useIsMountedRef');
 const useQueryLoader_EXPERIMENTAL = require('./useQueryLoader_EXPERIMENTAL');
 const useRelayEnvironment = require('./useRelayEnvironment');
@@ -170,6 +170,7 @@ hook useQueryLoader_CURRENT<
     initialQueryReference ?? initialNullQueryReferenceState;
 
   const environment = useRelayEnvironment();
+  useTrackLoadQueryInRender();
 
   const isMountedRef = useIsMountedRef();
   const undisposedQueryReferencesRef = useRef<