Regression test for client edge server data discovered missing in resolver root fragment (#4994)

Summary:
As described by jonreading81 here: #4992 (comment)

Description of root cause: #4992 (comment)

Pull Request resolved: #4994

Reviewed By: tyao1

Differential Revision: D74680616

Pulled By: captbaritone

fbshipit-source-id: ad320ef113bc1e220a5d62c02935f10940794076

Author: captbaritone

packages/react-relay/__tests__/ClientEdges-test.js

@@ -11,6 +11,8 @@
 
 'use strict';
 
+import type {ClientEdgesTestUpperName$key} from './__generated__/ClientEdgesTestUpperName.graphql';
+
 const React = require('react');
 const {
   RelayEnvironmentProvider,
@@ -24,6 +26,7 @@ const {
   RecordSource,
   RelayFeatureFlags,
   graphql,
+  readFragment,
 } = require('relay-runtime');
 const RelayObservable = require('relay-runtime/network/RelayObservable');
 const RelayModernStore = require('relay-runtime/store/RelayModernStore');
@@ -44,6 +47,23 @@ export function same_user_client_edge(): {id: string} {
   return {id: '1'};
 }
 
+/**
+ * @RelayResolver User.upper_name: String
+ * @rootFragment ClientEdgesTestUpperName
+ */
+
+export function upper_name(key: ClientEdgesTestUpperName$key): ?string {
+  const user = readFragment(
+    graphql`
+      fragment ClientEdgesTestUpperName on User {
+        name
+      }
+    `,
+    key,
+  );
+  return user?.name?.toUpperCase();
+}
+
 describe.each([[true], [false]])(
   'RelayFeatureFlags.ENABLE_ACTIVITY_COMPATIBILITY = %s',
   (activityEnabled: boolean) => {
@@ -402,5 +422,81 @@ describe.each([[true], [false]])(
       // });
       // expect(renderer?.toJSON()).toBe('Alice');
     });
+
+    it('should fetch data missing client edge to server data in resolver @rootFragment', () => {
+      function TestComponent() {
+        return (
+          <RelayEnvironmentProvider environment={environment}>
+            <React.Suspense fallback="Loading">
+              <InnerComponent />
+            </React.Suspense>
+          </RelayEnvironmentProvider>
+        );
+      }
+
+      const variables = {};
+      function InnerComponent() {
+        const data = useLazyLoadQuery(
+          graphql`
+            query ClientEdgesTest6Query {
+              me {
+                same_user_client_edge @waterfall {
+                  # No fields here means that we render without detecting any
+                  # missing data here and don't attempt to fetch the @waterfall
+                  # query.
+                  #
+                  # The same bug can be triggered by adding a field that is already
+                  # in the store for an unrelated reason.
+                  upper_name
+                  # Adding "name" here will cause the query to be fetched.
+                }
+              }
+            }
+          `,
+          variables,
+        );
+
+        return data.me?.same_user_client_edge?.upper_name;
+      }
+
+      // This will be updated when we add the new assertions as part of a fix for
+      // this bug.
+      // eslint-disable-next-line no-unused-vars
+      let renderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(<TestComponent />);
+      });
+
+      // Oops, we didn't fetch the query!
+      expect(fetchFn.mock.calls.length).toEqual(0);
+
+      // Following are the assertions that SHOULD pass.
+
+      // expect(fetchFn.mock.calls.length).toEqual(1);
+      // // We should send the client-edge query
+      // // $FlowFixMe[invalid-tuple-index] Error found while enabling LTI on this file
+      // expect(fetchFn.mock.calls[0][0].name).toBe(
+      //   'ClientEdgeQuery_ClientEdgesTest6Query_me__same_user_client_edge',
+      // );
+      // // Check variables
+      // // $FlowFixMe[invalid-tuple-index] Error found while enabling LTI on this file
+      // expect(fetchFn.mock.calls[0][1]).toEqual({id: '1'});
+      // expect(renderer?.toJSON()).toBe('Loading');
+
+      // TestRenderer.act(() => {
+      //   // This should resolve client-edge query
+      //   networkSink.next({
+      //     data: {
+      //       node: {
+      //         id: '1',
+      //         __typename: 'User',
+      //         name: 'Alice',
+      //       },
+      //     },
+      //   });
+      //   jest.runAllImmediates();
+      // });
+      // expect(renderer?.toJSON()).toBe('ALICE');
+    });
   },
 );