[relay-modern]implement getVariables() for ReactRelayRefetchContainer

packages/react-relay/modern/ReactRelayRefetchContainer.js

@@ -18,6 +18,7 @@ const RelayProfiler = require('RelayProfiler');
 const RelayPropTypes = require('RelayPropTypes');
 
 const areEqual = require('areEqual');
+const forEachObject = require('forEachObject');
 const buildReactRelayContainer = require('buildReactRelayContainer');
 const invariant = require('invariant');
 const isRelayContext = require('isRelayContext');
@@ -175,6 +176,7 @@ function createContainerWithFragments<TBase: ReactClass<*>>(
       return {
         environment: relay.environment,
         refetch: this._refetch,
+        getVariables: this._getFragmentVariables,
       };
     }
 
@@ -188,15 +190,24 @@ function createContainerWithFragments<TBase: ReactClass<*>>(
       this.setState({data: this._resolver.resolve()}, profiler.stop);
     };
 
-    _getFragmentVariables(): Variables {
+    _getFragmentVariables = (): Variables => {
       const {
         getVariablesFromObject,
       } = this.context.relay.environment.unstable_internal;
-      return getVariablesFromObject(
+
+      const fragmentVariables = getVariablesFromObject(
         this.context.relay.variables,
         fragments,
         this.props,
       );
+
+      if (this._localVariables) {
+          forEachObject(fragmentVariables, (_, key) => {
+             // $FlowFixMe
+             fragmentVariables[key] = this._localVariables[key];
+          });
+      }
+      return fragmentVariables;
     }
 
     _refetch = (
@@ -226,7 +237,7 @@ function createContainerWithFragments<TBase: ReactClass<*>>(
         // TODO t15106389: add helper utility for fetching more data
         this._pendingRefetch = null;
         callback && callback();
-        this._resolver.setVariables(fragmentVariables);
+        this._resolver.setVariables(this._getFragmentVariables());
         this.setState({data: this._resolver.resolve()});
       };
       const onError = error => {
@@ -247,6 +258,8 @@ function createContainerWithFragments<TBase: ReactClass<*>>(
       const reference = environment.retain(operation.root);
       this._references.push(reference);
 
+      // Refetch Query is very likely to contain extra variables in addition to fragentVarialbes
+      // those extra variables are mostly for fetching the field that this fragment is defined on
       this._localVariables = fetchVariables;
       if (this._pendingRefetch) {
         this._pendingRefetch.dispose();

packages/react-relay/modern/ReactRelayTypes.js

@@ -45,6 +45,7 @@ export type RelayRefetchProp = RelayProp & {
     callback: ?(error: ?Error) => void,
     options?: RefetchOptions,
   ) => Disposable,
+  getVariables: () => Variables,
 };
 
 export type RefetchOptions = {

packages/react-relay/modern/__tests__/ReactRelayRefetchContainer-test.js

@@ -29,9 +29,11 @@ describe('ReactRelayRefetchContainer', () => {
   let TestContainer;
   let UserFragment;
   let UserQuery;
+  let RefetchQuery;
 
   let environment;
   let refetch;
+  let getVariables;
   let render;
   let variables;
 
@@ -80,7 +82,7 @@ describe('ReactRelayRefetchContainer', () => {
     jest.addMatchers(RelayModernTestUtils.matchers);
 
     environment = createMockEnvironment();
-    ({UserFragment, UserQuery} = environment.mock.compile(
+    ({UserFragment, UserQuery, RefetchQuery} = environment.mock.compile(
       `
       query UserQuery(
         $id: ID!
@@ -96,11 +98,20 @@ describe('ReactRelayRefetchContainer', () => {
         id
         name @include(if: $cond)
       }
+
+      query RefetchQuery(
+        $id: ID!, $cond: Boolean!
+      ) {
+        node(id: $id) {
+          ...UserFragment @arguments(cond: $cond)
+        }
+      }
     `,
     ));
 
     render = jest.fn(props => {
       refetch = props.relay.refetch;
+      getVariables = props.relay.getVariables;
       return <div />;
     });
     variables = {};
@@ -163,6 +174,7 @@ describe('ReactRelayRefetchContainer', () => {
       relay: {
         environment: jasmine.any(Object),
         refetch: jasmine.any(Function),
+        getVariables: jasmine.any(Function),
       },
       user: null,
     });
@@ -182,6 +194,7 @@ describe('ReactRelayRefetchContainer', () => {
       relay: {
         environment: jasmine.any(Object),
         refetch: jasmine.any(Function),
+        getVariables: jasmine.any(Function),
       },
       user: null,
     });
@@ -211,6 +224,7 @@ describe('ReactRelayRefetchContainer', () => {
       relay: {
         environment: jasmine.any(Object),
         refetch: jasmine.any(Function),
+        getVariables: jasmine.any(Function),
       },
     });
     // Subscribes for updates
@@ -268,6 +282,7 @@ describe('ReactRelayRefetchContainer', () => {
       relay: {
         environment: jasmine.any(Object),
         refetch: jasmine.any(Function),
+        getVariables: jasmine.any(Function),
       },
     });
   });
@@ -306,6 +321,7 @@ describe('ReactRelayRefetchContainer', () => {
       relay: {
         environment: jasmine.any(Object),
         refetch: jasmine.any(Function),
+        getVariables: jasmine.any(Function),
       },
     });
     // Container subscribes for updates on new props
@@ -351,6 +367,7 @@ describe('ReactRelayRefetchContainer', () => {
       relay: {
         environment: jasmine.any(Object),
         refetch: jasmine.any(Function),
+        getVariables: jasmine.any(Function),
       },
     });
     // Container subscribes for updates on new props
@@ -524,6 +541,13 @@ describe('ReactRelayRefetchContainer', () => {
     let references;
 
     beforeEach(() => {
+      TestContainer = ReactRelayRefetchContainer.createContainer(
+      TestComponent,
+      {
+        user: () => UserFragment,
+      },
+      RefetchQuery,
+      );
       references = [];
       environment.retain = () => {
         const dispose = jest.fn();
@@ -548,12 +572,11 @@ describe('ReactRelayRefetchContainer', () => {
         cond: false,
         id: '4',
       };
-      const fetchedVariables = {id: '4'};
       refetch(refetchVariables, null, jest.fn());
-      expect(environment.mock.isLoading(UserQuery, fetchedVariables)).toBe(
+      expect(environment.mock.isLoading(RefetchQuery, refetchVariables)).toBe(
         true,
       );
-      environment.mock.resolve(UserQuery, {
+      environment.mock.resolve(RefetchQuery, {
         data: {
           node: {
             id: '4',
@@ -571,7 +594,7 @@ describe('ReactRelayRefetchContainer', () => {
         id: '4',
       };
       refetch(variables, null, callback);
-      await environment.mock.resolve(UserQuery, {
+      await environment.mock.resolve(RefetchQuery, {
         data: {
           node: {
             id: '4',
@@ -592,7 +615,7 @@ describe('ReactRelayRefetchContainer', () => {
       };
       refetch(variables, null, callback);
       const error = new Error('oops');
-      await environment.mock.reject(UserQuery, error);
+      await environment.mock.reject(RefetchQuery, error);
       expect(callback.mock.calls.length).toBe(1);
       expect(callback).toBeCalledWith(error);
     });
@@ -607,7 +630,7 @@ describe('ReactRelayRefetchContainer', () => {
       };
       refetch(variables, null, jest.fn());
       expect(render.mock.calls.length).toBe(1);
-      await environment.mock.resolve(UserQuery, {
+      await environment.mock.resolve(RefetchQuery, {
         data: {
           node: {
             id: '4',
@@ -630,7 +653,7 @@ describe('ReactRelayRefetchContainer', () => {
       };
       refetch(variables, null, jest.fn());
       expect(render.mock.calls.length).toBe(1);
-      await environment.mock.reject(UserQuery, new Error('oops'));
+      await environment.mock.reject(RefetchQuery, new Error('oops'));
       expect(render.mock.calls.length).toBe(1);
     });
 
@@ -673,7 +696,7 @@ describe('ReactRelayRefetchContainer', () => {
         id: '4',
       };
       refetch(variables, null, jest.fn());
-      await environment.mock.resolve(UserQuery, {
+      await environment.mock.resolve(RefetchQuery, {
         data: {
           node: {
             id: '4',
@@ -698,7 +721,7 @@ describe('ReactRelayRefetchContainer', () => {
         id: '4',
       };
       refetch(variables, null, jest.fn());
-      await environment.mock.resolve(UserQuery, {
+      await environment.mock.resolve(RefetchQuery, {
         data: {
           node: {
             id: '4',
@@ -715,5 +738,31 @@ describe('ReactRelayRefetchContainer', () => {
       expect(references.length).toBe(1);
       expect(references[0].dispose).toBeCalled();
     });
+
+      it('getVariables()', async () => {
+      expect.assertions(2);
+      let fragmentVariables = getVariables();
+      expect(fragmentVariables).toEqual({
+        cond: true
+      });
+      const callback = jest.fn();
+      variables = {
+        cond: false,
+        id: '4',
+      };
+      refetch(variables, null, callback);
+      await environment.mock.resolve(RefetchQuery, {
+        data: {
+          node: {
+            id: '4',
+            __typename: 'User',
+          },
+        },
+      });
+      fragmentVariables = getVariables();
+      expect(fragmentVariables).toEqual({
+        cond: false
+      });
+    });
   });
 });