Add warning when pagination containers don't have @connection

Reviewed By: JenniferWang Differential Revision: D5369512 fbshipit-source-id: f5141c73a1e383b526c371d0ea0134a6df809e61
facebook · Jul 10, 2017 · 3fe68c8 · 3fe68c8
1 parent 1652e78
commit 3fe68c8
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 0 deletions.
diff --git a/packages/react-relay/modern/ReactRelayPaginationContainer.js b/packages/react-relay/modern/ReactRelayPaginationContainer.js
@@ -260,6 +260,15 @@ function findConnectionMetadata(fragments): ReactConnectionMetadata {
     const fragment = fragments[fragmentName];
     const connectionMetadata: ?Array<ConnectionMetadata> = (fragment.metadata &&
       fragment.metadata.connection: any);
+    // HACK: metadata is always set to `undefined` in classic. In modern, even
+    // if empty, it is set to null (never undefined). We use that knowlege to
+    // check if we're dealing with classic or modern
+    if (fragment.metadata !== undefined) {
+      warning(
+        connectionMetadata,
+        'ReactRelayPaginationContainer: A @connection directive must be present.',
+      );
+    }
     if (connectionMetadata) {
       invariant(
         connectionMetadata.length === 1,

diff --git a/packages/react-relay/modern/__tests__/ReactRelayPaginationContainer-test.js b/packages/react-relay/modern/__tests__/ReactRelayPaginationContainer-test.js
@@ -701,6 +701,67 @@ describe('ReactRelayPaginationContainer', () => {
     expect(environment.subscribe).not.toBeCalled();
   });
 
+  it('warns if missing @connection directive', () => {
+    jest.mock('warning');
+
+    ({UserFragment, UserQuery} = generateAndCompile(
+      `
+      query UserQuery(
+        $after: ID
+        $count: Int!
+        $id: ID!
+        $orderby: [String]
+      ) {
+        node(id: $id) {
+          id
+          ...UserFragment
+        }
+      }
+
+      fragment UserFragment on User {
+        friends(after: $after, first: $count, orderby: $orderby) {
+          edges {
+            node {
+              id
+            }
+          }
+          pageInfo {
+            endCursor
+            hasNextPage
+          }
+        }
+      }
+    `,
+    ));
+
+    TestContainer = ReactRelayPaginationContainer.createContainer(
+      TestComponent,
+      {
+        user: () => UserFragment,
+      },
+      {
+        direction: 'forward',
+        getConnectionFromProps,
+        getFragmentVariables: (vars, totalCount) => ({
+          ...vars,
+          count: totalCount,
+        }),
+        getVariables,
+        query: UserQuery,
+      },
+    );
+
+    expect(() => {
+      ReactTestRenderer.create(
+        <ContextSetter environment={environment} variables={variables}>
+          <TestContainer />
+        </ContextSetter>,
+      );
+    }).toWarn([
+      'ReactRelayPaginationContainer: A @connection directive must be present.',
+    ]);
+  });
+
   describe('hasMore()', () => {
     beforeEach(() => {
       const userPointer = environment.lookup({