repro for #5000

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

@@ -10,7 +10,7 @@
  */
 
 'use strict';
 import type {RelayMockEnvironment} from '../../../relay-test-utils/RelayModernMockEnvironment';
 import type {
   useRefetchableFragmentNodeTest1FragmentRefetchQuery$data,
   useRefetchableFragmentNodeTest1FragmentRefetchQuery$variables,
@@ -38,6 +38,7 @@
 import type {OperationDescriptor, Variables} from 'relay-runtime';
 import type {Query} from 'relay-runtime/util/RelayRuntimeTypes';
 
+const {MockPayloadGenerator} = require('relay-test-utils');
 const RelayEnvironmentProvider = require('../RelayEnvironmentProvider');
 const useRefetchableFragmentInternal = require('../useRefetchableFragmentInternal');
 const invariant = require('invariant');
@@ -822,6 +823,64 @@
       expect(isOperationRetained(refetchQuery)).toBe(true);
     });
 
+    it.only('refetches new variables correctly when refetching same id and queued resolver', () => {
+      const renderer = renderFragment();
+      const initialUser = {
+        id: '1',
+        name: 'Alice',
+        profile_picture: null,
+        ...createFragmentRef('1', query),
+      };
+      expectFragmentResults([{data: initialUser}]);
+
+      // Mock network response upfront
+      environment.mock.queueOperationResolver(operation =>
+        MockPayloadGenerator.generate(operation, {
+          Node: () => ({
+            __typename: 'User',
+            id: '1',
+            name: 'Alice',
+            profile_picture: {
+              uri: 'scale32',
+            },
+            username: 'useralice',
+          }),
+        }),
+      );
+
+      TestRenderer.act(() => {
+        refetch({scale: 32});
+      });
+
+      // Assert that fragment is refetching with the right variables and
+      // suspends upon refetch
+      const refetchVariables = {
+        id: '1',
+        scale: 32,
+      };
+      refetchQuery = createOperationDescriptor(
+        gqlRefetchQuery,
+        refetchVariables,
+        {force: true},
+      );
+      expectFragmentIsRefetching(renderer, {
+        refetchVariables,
+        refetchQuery,
+      });
+
+      // Assert fragment is rendered with new data
+      const refetchedUser = {
+        id: '1',
+        name: 'Alice',
+        profile_picture: {
+          uri: 'scale32',
+        },
+        ...createFragmentRef('1', refetchQuery),
+      };
+      expectFragmentResults([{data: refetchedUser}]);
+      expect(isOperationRetained(refetchQuery)).toBe(true);
+    });
+
     it('with correct id from refetchable fragment when using nested fragment', () => {
       // Populate store with data for query using nested fragment
       TestRenderer.act(() => {

packages/relay-test-utils/RelayModernMockEnvironment.js

@@ -214,6 +214,12 @@
     const {id, text} = request;
     const cacheID = id ?? text;
 
+    console.log('DEBUG: MockEnvironment.execute', {
+      request,
+      variables,
+      pendingOperations,
+    });
+
     let cachedPayload = null;
     if (
       (cacheConfig?.force == null || cacheConfig?.force === false) &&
@@ -232,6 +238,12 @@
         areEqual(op.request.variables, variables),
     );
 
+    console.log('DEBUG: MockEnvironment.execute', {
+      currentOperation,
+      pendingOperations,
+      resolversQueueLength: resolversQueue.length,
+    });
+
     // Handle network responses added by
     if (currentOperation != null && resolversQueue.length > 0) {
       const currentResolver = resolversQueue[0];