react-relay 11.0.1 → 13.0.0-rc.1

package/ReactRelayQueryRenderer.js.flow

@@ -12,19 +12,6 @@
 
 'use strict';
 
-const React = require('react');
-const ReactRelayContext = require('./ReactRelayContext');
-const ReactRelayQueryFetcher = require('./ReactRelayQueryFetcher');
-const ReactRelayQueryRendererContext = require('./ReactRelayQueryRendererContext');
-
-const areEqual = require('areEqual');
-
-const {
-  createOperationDescriptor,
-  deepFreeze,
-  getRequest,
-} = require('relay-runtime');
-
 import type {ReactRelayQueryRendererContext as ReactRelayQueryRendererContextType} from './ReactRelayQueryRendererContext';
 import type {
   CacheConfig,
@@ -35,7 +22,20 @@ import type {
   Snapshot,
   Variables,
 } from 'relay-runtime';
-type RetryCallbacks = {
+
+const ReactRelayContext = require('./ReactRelayContext');
+const ReactRelayQueryFetcher = require('./ReactRelayQueryFetcher');
+const ReactRelayQueryRendererContext = require('./ReactRelayQueryRendererContext');
+const areEqual = require('areEqual');
+const React = require('react');
+const {
+  RelayFeatureFlags,
+  createOperationDescriptor,
+  deepFreeze,
+  getRequest,
+} = require('relay-runtime');
+
+type RetryCallbacks = {|
   handleDataChange:
     | null
     | (({
@@ -44,8 +44,7 @@ type RetryCallbacks = {
         ...
       }) => void),
   handleRetryAfterError: null | ((error: Error) => void),
-  ...
-};
+|};
 
 export type RenderProps<T> = {|
   error: ?Error,
@@ -96,6 +95,8 @@ type State = {|
  * - Subscribes for updates to the root data and re-renders with any changes.
  */
 class ReactRelayQueryRenderer extends React.Component<Props, State> {
+  _maybeHiddenOrFastRefresh: boolean;
+
   constructor(props: Props) {
     super(props);
 
@@ -124,6 +125,8 @@ class ReactRelayQueryRenderer extends React.Component<Props, State> {
       queryFetcher = new ReactRelayQueryFetcher();
     }
 
+    this._maybeHiddenOrFastRefresh = false;
+
     this.state = {
       prevPropsEnvironment: props.environment,
       prevPropsVariables: props.variables,
@@ -148,77 +151,37 @@ class ReactRelayQueryRenderer extends React.Component<Props, State> {
       prevState.prevPropsEnvironment !== nextProps.environment ||
       !areEqual(prevState.prevPropsVariables, nextProps.variables)
     ) {
-      const {query} = nextProps;
-      const prevSelectionReferences = prevState.queryFetcher.getSelectionReferences();
-      prevState.queryFetcher.disposeRequest();
-
-      let queryFetcher;
-      if (query) {
-        const request = getRequest(query);
-        const requestCacheKey = getRequestCacheKey(
-          request.params,
-          nextProps.variables,
-        );
-        queryFetcher = requestCache[requestCacheKey]
-          ? requestCache[requestCacheKey].queryFetcher
-          : new ReactRelayQueryFetcher(prevSelectionReferences);
-      } else {
-        queryFetcher = new ReactRelayQueryFetcher(prevSelectionReferences);
-      }
-      return {
-        prevQuery: nextProps.query,
-        prevPropsEnvironment: nextProps.environment,
-        prevPropsVariables: nextProps.variables,
-        queryFetcher: queryFetcher,
-        ...fetchQueryAndComputeStateFromProps(
-          nextProps,
-          queryFetcher,
-          prevState.retryCallbacks,
-          // passing no requestCacheKey will cause it to be recalculated internally
-          // and we want the updated requestCacheKey, since variables may have changed
-        ),
-      };
+      return resetQueryStateForUpdate(nextProps, prevState);
     }
-
     return null;
   }
 
   componentDidMount() {
+    if (
+      RelayFeatureFlags.ENABLE_QUERY_RENDERER_OFFSCREEN_SUPPORT === true &&
+      this._maybeHiddenOrFastRefresh === true
+    ) {
+      // This block only runs if the component has previously "unmounted"
+      // due to it being hidden by the Offscreen API, or during fast refresh.
+      // At this point, the current cached resource will have been disposed
+      // by the previous cleanup, so instead of attempting to
+      // do our regular commit setup, so that the query is re-evaluated
+      // (and potentially cause a refetch).
+      this._maybeHiddenOrFastRefresh = false;
+      // eslint-disable-next-line react/no-did-mount-set-state
+      this.setState(prevState => {
+        return resetQueryStateForUpdate(this.props, prevState);
+      });
+      return;
+    }
+
     const {retryCallbacks, queryFetcher, requestCacheKey} = this.state;
+    // We don't need to cache the request after the component commits
     if (requestCacheKey) {
       delete requestCache[requestCacheKey];
     }
 
-    retryCallbacks.handleDataChange = (params: {
-      error?: Error,
-      snapshot?: Snapshot,
-      ...
-    }): void => {
-      const error = params.error == null ? null : params.error;
-      const snapshot = params.snapshot == null ? null : params.snapshot;
-
-      this.setState(prevState => {
-        const {requestCacheKey: prevRequestCacheKey} = prevState;
-        if (prevRequestCacheKey) {
-          delete requestCache[prevRequestCacheKey];
-        }
-
-        // Don't update state if nothing has changed.
-        if (snapshot === prevState.snapshot && error === prevState.error) {
-          return null;
-        }
-        return {
-          renderProps: getRenderProps(
-            error,
-            snapshot,
-            prevState.queryFetcher,
-            prevState.retryCallbacks,
-          ),
-          snapshot,
-          requestCacheKey: null,
-        };
-      });
-    };
+    retryCallbacks.handleDataChange = this._handleDataChange;
 
     retryCallbacks.handleRetryAfterError = (error: Error) =>
       this.setState(prevState => {
@@ -236,22 +199,27 @@ class ReactRelayQueryRenderer extends React.Component<Props, State> {
     // Re-initialize the ReactRelayQueryFetcher with callbacks.
     // If data has changed since constructions, this will re-render.
     if (this.props.query) {
-      queryFetcher.setOnDataChange(retryCallbacks.handleDataChange);
+      queryFetcher.setOnDataChange(this._handleDataChange);
     }
   }
 
-  componentDidUpdate(): void {
+  componentDidUpdate(_prevProps: Props, prevState: State): void {
     // We don't need to cache the request after the component commits
-    const {requestCacheKey} = this.state;
+    const {queryFetcher, requestCacheKey} = this.state;
     if (requestCacheKey) {
       delete requestCache[requestCacheKey];
       // HACK
       delete this.state.requestCacheKey;
     }
+
+    if (this.props.query && queryFetcher !== prevState.queryFetcher) {
+      queryFetcher.setOnDataChange(this._handleDataChange);
+    }
   }
 
   componentWillUnmount(): void {
     this.state.queryFetcher.dispose();
+    this._maybeHiddenOrFastRefresh = true;
   }
 
   shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
@@ -261,6 +229,37 @@ class ReactRelayQueryRenderer extends React.Component<Props, State> {
     );
   }
 
+  _handleDataChange = (params: {
+    error?: Error,
+    snapshot?: Snapshot,
+    ...
+  }): void => {
+    const error = params.error == null ? null : params.error;
+    const snapshot = params.snapshot == null ? null : params.snapshot;
+
+    this.setState(prevState => {
+      const {requestCacheKey: prevRequestCacheKey} = prevState;
+      if (prevRequestCacheKey) {
+        delete requestCache[prevRequestCacheKey];
+      }
+
+      // Don't update state if nothing has changed.
+      if (snapshot === prevState.snapshot && error === prevState.error) {
+        return null;
+      }
+      return {
+        renderProps: getRenderProps(
+          error,
+          snapshot,
+          prevState.queryFetcher,
+          prevState.retryCallbacks,
+        ),
+        snapshot,
+        requestCacheKey: null,
+      };
+    });
+  };
+
   render(): React.Element<typeof ReactRelayContext.Provider> {
     const {renderProps, relayContext} = this.state;
     // Note that the root fragment results in `renderProps.props` is already
@@ -334,6 +333,41 @@ function getRequestCacheKey(
   });
 }
 
+function resetQueryStateForUpdate(
+  props: Props,
+  prevState: State,
+): $Shape<State> {
+  const {query} = props;
+
+  const prevSelectionReferences =
+    prevState.queryFetcher.getSelectionReferences();
+  prevState.queryFetcher.disposeRequest();
+
+  let queryFetcher;
+  if (query) {
+    const request = getRequest(query);
+    const requestCacheKey = getRequestCacheKey(request.params, props.variables);
+    queryFetcher = requestCache[requestCacheKey]
+      ? requestCache[requestCacheKey].queryFetcher
+      : new ReactRelayQueryFetcher(prevSelectionReferences);
+  } else {
+    queryFetcher = new ReactRelayQueryFetcher(prevSelectionReferences);
+  }
+  return {
+    prevQuery: props.query,
+    prevPropsEnvironment: props.environment,
+    prevPropsVariables: props.variables,
+    queryFetcher: queryFetcher,
+    ...fetchQueryAndComputeStateFromProps(
+      props,
+      queryFetcher,
+      prevState.retryCallbacks,
+      // passing no requestCacheKey will cause it to be recalculated internally
+      // and we want the updated requestCacheKey, since variables may have changed
+    ),
+  };
+}
+
 function fetchQueryAndComputeStateFromProps(
   props: Props,
   queryFetcher: ReactRelayQueryFetcher,
@@ -390,7 +424,7 @@ function fetchQueryAndComputeStateFromProps(
       );
       const querySnapshot = queryFetcher.fetch({
         environment: genericEnvironment,
-        onDataChange: retryCallbacks.handleDataChange,
+        onDataChange: null,
         operation,
       });
 

package/ReactRelayRefetchContainer.js.flow

@@ -12,34 +12,12 @@
 
 'use strict';
 
-const React = require('react');
-const ReactRelayContext = require('./ReactRelayContext');
-const ReactRelayQueryFetcher = require('./ReactRelayQueryFetcher');
-
-const areEqual = require('areEqual');
-const buildReactRelayContainer = require('./buildReactRelayContainer');
-const getRootVariablesForFragments = require('./getRootVariablesForFragments');
-const warning = require('warning');
-
-const {getContainerName} = require('./ReactRelayContainerUtils');
-const {assertRelayContext} = require('./RelayContext');
-const {
-  Observable,
-  createFragmentSpecResolver,
-  createOperationDescriptor,
-  getDataIDsFromObject,
-  getRequest,
-  getSelector,
-  getVariablesFromObject,
-  isScalarAndEqual,
-} = require('relay-runtime');
-
 import type {
-  $RelayProps,
-  ObserverOrCallback,
   GeneratedNodeMap,
+  ObserverOrCallback,
   RefetchOptions,
   RelayRefetchProp,
+  $RelayProps,
 } from './ReactRelayTypes';
 import type {
   CacheConfig,
@@ -52,6 +30,25 @@ import type {
 } from 'relay-runtime';
 import type {FragmentSpecResolver} from 'relay-runtime';
 
+const buildReactRelayContainer = require('./buildReactRelayContainer');
+const getRootVariablesForFragments = require('./getRootVariablesForFragments');
+const {getContainerName} = require('./ReactRelayContainerUtils');
+const ReactRelayContext = require('./ReactRelayContext');
+const ReactRelayQueryFetcher = require('./ReactRelayQueryFetcher');
+const {assertRelayContext} = require('./RelayContext');
+const areEqual = require('areEqual');
+const React = require('react');
+const {
+  Observable,
+  createFragmentSpecResolver,
+  createOperationDescriptor,
+  getDataIDsFromObject,
+  getRequest,
+  getVariablesFromObject,
+  isScalarAndEqual,
+} = require('relay-runtime');
+const warning = require('warning');
+
 type ContainerProps = $FlowFixMeProps;
 
 type ContainerState = {
@@ -119,7 +116,7 @@ function createContainerWithFragments<
 
     componentDidMount() {
       this._isUnmounted = false;
-      this._subscribeToNewResolver();
+      this._subscribeToNewResolverAndRerenderIfStoreHasChanged();
     }
 
     componentDidUpdate(prevProps: ContainerProps, prevState: ContainerState) {
@@ -133,7 +130,9 @@ function createContainerWithFragments<
         this._queryFetcher && this._queryFetcher.dispose();
         this._refetchSubscription && this._refetchSubscription.unsubscribe();
 
-        this._subscribeToNewResolver();
+        this._subscribeToNewResolverAndRerenderIfStoreHasChanged();
+      } else {
+        this._rerenderIfStoreHasChanged();
       }
     }
 
@@ -250,16 +249,26 @@ function createContainerWithFragments<
       return false;
     }
 
-    _subscribeToNewResolver() {
+    _rerenderIfStoreHasChanged() {
       const {data, resolver} = this.state;
+      // External values could change between render and commit.
+      // Check for this case, even though it requires an extra store read.
+      const maybeNewData = resolver.resolve();
+      if (data !== maybeNewData) {
+        this.setState({data: maybeNewData});
+      }
+    }
+
+    _subscribeToNewResolverAndRerenderIfStoreHasChanged() {
+      const {data, resolver} = this.state;
+      const maybeNewData = resolver.resolve();
 
       // Event listeners are only safe to add during the commit phase,
       // So they won't leak if render is interrupted or errors.
-      resolver.setCallback(this._handleFragmentDataUpdate);
+      resolver.setCallback(this.props, this._handleFragmentDataUpdate);
 
       // External values could change between render and commit.
       // Check for this case, even though it requires an extra store read.
-      const maybeNewData = resolver.resolve();
       if (data !== maybeNewData) {
         this.setState({data: maybeNewData});
       }
@@ -321,11 +330,9 @@ function createContainerWithFragments<
         typeof refetchVariables === 'function'
           ? refetchVariables(this._getFragmentVariables())
           : refetchVariables;
-      // $FlowFixMe[cannot-spread-interface]
       fetchVariables = {...rootVariables, ...fetchVariables};
       const fragmentVariables = renderVariables
-        ? // $FlowFixMe[cannot-spread-interface]
-          {...fetchVariables, ...renderVariables}
+        ? {...fetchVariables, ...renderVariables}
         : fetchVariables;
 
       const cacheConfig: ?CacheConfig = options
@@ -441,12 +448,8 @@ function createContainerWithFragments<
     };
 
     render() {
-      const {
-        componentRef,
-        __relayContext,
-        __rootIsQueryRenderer,
-        ...props
-      } = this.props;
+      const {componentRef, __relayContext, __rootIsQueryRenderer, ...props} =
+        this.props;
       const {relayProp, contextForChildren} = this.state;
       return (
         <ReactRelayContext.Provider value={contextForChildren}>

package/ReactRelayTestMocker.js.flow

@@ -12,16 +12,6 @@
 
 'use strict';
 
-const areEqual = require('areEqual');
-const invariant = require('invariant');
-const warning = require('warning');
-
-const {
-  createOperationDescriptor,
-  isRelayModernEnvironment,
-  Network,
-} = require('relay-runtime');
-
 import type {
   CacheConfig,
   ConcreteRequest,
@@ -32,6 +22,15 @@ import type {
   Variables,
 } from 'relay-runtime';
 
+const areEqual = require('areEqual');
+const invariant = require('invariant');
+const {
+  Network,
+  createOperationDescriptor,
+  isRelayModernEnvironment,
+} = require('relay-runtime');
+const warning = require('warning');
+
 export type DataWriteConfig = {
   query: ConcreteRequest,
   variables: Variables,
@@ -66,7 +65,7 @@ let nextId = 0;
 
 class ReactRelayTestMocker {
   _environment: IEnvironment;
-  _defaults: {[string]: $PropertyType<NetworkWriteConfig, 'payload'>, ...} = {};
+  _defaults: {[string]: NetworkWriteConfig['payload'], ...} = {};
   _pendingFetches: Array<PendingFetch> = [];
 
   constructor(env: IEnvironment) {
@@ -118,7 +117,6 @@ class ReactRelayTestMocker {
    * annoying to test (e.g. client_mutation_id, actor_id)
    */
   static stripUnused(variables: Variables): Variables {
-    // $FlowFixMe[prop-missing]
     if (variables.input) {
       const toRemove = [
         'client_mutation_id',
@@ -126,7 +124,6 @@ class ReactRelayTestMocker {
         'clientMutationId',
         'actorId',
       ];
-      // $FlowFixMe[cannot-spread-interface]
       const strippedVariables = {...variables, input: {...variables.input}};
       toRemove.forEach(item => (strippedVariables.input[item] = undefined));
       return strippedVariables;
@@ -143,7 +140,11 @@ class ReactRelayTestMocker {
    * their components behave under error conditions.
    */
   _mockNetworkLayer(env: IEnvironment): IEnvironment {
-    const fetch = (request, variables, cacheConfig) => {
+    const fetch = (
+      request: RequestParameters,
+      variables: Variables,
+      cacheConfig: CacheConfig,
+    ) => {
       let resolve;
       let reject;
       const promise = new Promise((res, rej) => {
@@ -314,6 +315,7 @@ class ReactRelayTestMocker {
     );
 
     const realPayload =
+      // $FlowFixMe[incompatible-call]
       typeof payload === 'function' ? payload(toResolve.variables) : payload;
 
     // if there are errors, reject the query

package/ReactRelayTypes.js.flow

@@ -14,7 +14,7 @@
 
 import type {
   Disposable,
-  FragmentReference,
+  FragmentType,
   GraphQLTaggedNode,
   IEnvironment,
   Observer,
@@ -94,7 +94,7 @@ export type RefetchOptions = {|
  *
  */
 export type $FragmentRef<T> = {
-  +$fragmentRefs: $PropertyType<T, '$refType'>,
+  +$fragmentSpreads: T['$fragmentType'],
   ...
 };
 
@@ -105,14 +105,14 @@ export type $FragmentRef<T> = {
 // prettier-ignore
 export type $RelayProps<Props, RelayPropT = RelayProp> = $ObjMap<
   $Diff<Props, { relay: RelayPropT | void, ... }>,
-  & (<T: { +$refType: empty, ... }>( T) =>  T)
-  & (<T: { +$refType: empty, ... }>(?T) => ?T)
-  & (<TRef: FragmentReference, T: { +$refType: TRef, ... }>(                 T ) =>                  $FragmentRef<T> )
-  & (<TRef: FragmentReference, T: { +$refType: TRef, ... }>(?                T ) => ?                $FragmentRef<T> )
-  & (<TRef: FragmentReference, T: { +$refType: TRef, ... }>( $ReadOnlyArray< T>) =>  $ReadOnlyArray< $FragmentRef<T>>)
-  & (<TRef: FragmentReference, T: { +$refType: TRef, ... }>(?$ReadOnlyArray< T>) => ?$ReadOnlyArray< $FragmentRef<T>>)
-  & (<TRef: FragmentReference, T: { +$refType: TRef, ... }>( $ReadOnlyArray<?T>) =>  $ReadOnlyArray<?$FragmentRef<T>>)
-  & (<TRef: FragmentReference, T: { +$refType: TRef, ... }>(?$ReadOnlyArray<?T>) => ?$ReadOnlyArray<?$FragmentRef<T>>)
+  & (<T: { +$fragmentType: empty, ... }>( T) =>  T)
+  & (<T: { +$fragmentType: empty, ... }>(?T) => ?T)
+  & (<TFragmentType: FragmentType, T: { +$fragmentType: TFragmentType, ... }>(                 T ) =>                  $FragmentRef<T> )
+  & (<TFragmentType: FragmentType, T: { +$fragmentType: TFragmentType, ... }>(?                T ) => ?                $FragmentRef<T> )
+  & (<TFragmentType: FragmentType, T: { +$fragmentType: TFragmentType, ... }>( $ReadOnlyArray< T>) =>  $ReadOnlyArray< $FragmentRef<T>>)
+  & (<TFragmentType: FragmentType, T: { +$fragmentType: TFragmentType, ... }>(?$ReadOnlyArray< T>) => ?$ReadOnlyArray< $FragmentRef<T>>)
+  & (<TFragmentType: FragmentType, T: { +$fragmentType: TFragmentType, ... }>( $ReadOnlyArray<?T>) =>  $ReadOnlyArray<?$FragmentRef<T>>)
+  & (<TFragmentType: FragmentType, T: { +$fragmentType: TFragmentType, ... }>(?$ReadOnlyArray<?T>) => ?$ReadOnlyArray<?$FragmentRef<T>>)
   & (<T>(T) => T),
 >;
 

package/RelayContext.js.flow

@@ -12,11 +12,11 @@
 
 'use strict';
 
-const invariant = require('invariant');
-const isRelayEnvironment = require('./isRelayEnvironment');
-
 import type {RelayContext} from 'relay-runtime';
 
+const isRelayEnvironment = require('./isRelayEnvironment');
+const invariant = require('invariant');
+
 /**
  * Asserts that the input is a matches the `RelayContext` type defined in
  * `RelayEnvironmentTypes` and returns it as that type.

package/__flowtests__/ReactRelayFragmentContainer-flowtest.js.flow

@@ -12,11 +12,10 @@
 
 'use strict';
 
-const React = require('react');
-
 const {
   createContainer: createFragmentContainer,
 } = require('../ReactRelayFragmentContainer');
+const React = require('react');
 const {graphql} = require('relay-runtime');
 
 /**

package/__flowtests__/ReactRelayPaginationContainer-flowtest.js.flow

@@ -12,11 +12,10 @@
 
 'use strict';
 
-const React = require('react');
-
 const {
   createContainer: createPaginationContainer,
 } = require('../ReactRelayPaginationContainer');
+const React = require('react');
 const {graphql} = require('relay-runtime');
 
 /**
@@ -63,10 +62,15 @@ const Foo = createPaginationContainer(
   {
     viewer: graphql`
       fragment ReactRelayPaginationContainerFlowtest_viewer on Viewer {
-        all_friends(after: $cursor, first: $count) @connection {
-          edges {
-            node {
-              __typename
+        account_user {
+          friends(after: $cursor, first: $count)
+            @connection(
+              key: "ReactRelayPaginationContainerFlowtest_viewer__friends"
+            ) {
+            edges {
+              node {
+                __typename
+              }
             }
           }
         }
@@ -75,7 +79,7 @@ const Foo = createPaginationContainer(
   },
   {
     direction: 'forward',
-    getConnectionFromProps: props => props.viewer.all_friends,
+    getConnectionFromProps: props => props.viewer.account_user.friends,
     // $FlowFixMe[cannot-spread-interface]
     getFragmentVariables: (vars, totalCount) => ({
       ...vars,

package/__flowtests__/ReactRelayRefetchContainer-flowtest.js.flow

@@ -12,11 +12,10 @@
 
 'use strict';
 
-const React = require('react');
-
 const {
   createContainer: createRefetchContainer,
 } = require('../ReactRelayRefetchContainer');
+const React = require('react');
 const {graphql} = require('relay-runtime');
 
 /**
@@ -62,10 +61,15 @@ const Foo = createRefetchContainer(
   {
     viewer: graphql`
       fragment ReactRelayRefetchContainerFlowtest_viewer on Viewer {
-        all_friends(after: $cursor, first: $count) @connection {
-          edges {
-            node {
-              __typename
+        account_user {
+          friends(after: $cursor, first: $count)
+            @connection(
+              key: "ReactRelayRefetchContainerFlowtest_viewer__friends"
+            ) {
+            edges {
+              node {
+                __typename
+              }
             }
           }
         }