Merge pull request #25914 from ckknight/react-relay-query-null

[@types/react-relay] QueryRendererProps["query"] can be null

types/react-relay/index.d.ts

@@ -4,6 +4,7 @@
 //                 Matt Martin <https://github.com/voxmatt>
 //                 Eloy Durán <https://github.com/alloy>
 //                 Nicolas Pirotte <https://github.com/npirotte>
+//                 Cameron Knight <https://github.com/ckknight>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.6
 
@@ -76,7 +77,7 @@ export const graphql: GraphqlInterface;
 export interface QueryRendererProps {
     cacheConfig?: RelayRuntimeTypes.CacheConfig;
     environment: RelayRuntimeTypes.Environment;
-    query: RelayRuntimeTypes.GraphQLTaggedNode;
+    query?: RelayRuntimeTypes.GraphQLTaggedNode | null;
     render(readyState: ReadyState): React.ReactElement<any> | undefined | null;
     variables: RelayRuntimeTypes.Variables;
     rerunParamExperimental?: RelayRuntimeTypes.RerunParam;

types/react-relay/test/react-relay-tests.tsx

@@ -28,16 +28,16 @@ const modernEnvironment = new Environment({ network, store });
 // ~~~~~~~~~~~~~~~~~~~~~
 // Modern QueryRenderer
 // ~~~~~~~~~~~~~~~~~~~~~
-const MyQueryRenderer = (props: { name: string }) => (
+const MyQueryRenderer = (props: { name: string, show: boolean }) => (
     <QueryRenderer
         environment={modernEnvironment}
-        query={graphql`
+        query={props.show ? graphql`
             query ExampleQuery($pageID: ID!) {
                 page(id: $pageID) {
                     name
                 }
             }
-        `}
+        ` : null}
         variables={{
             pageID: "110798995619330",
         }}
@@ -52,6 +52,23 @@ const MyQueryRenderer = (props: { name: string }) => (
     />
 );
 
+const MyEmptyQueryRenderer = () => (
+    <QueryRenderer
+        environment={modernEnvironment}
+        // NOTE: let's intentionally leave out `query`
+        // query={undefined}
+        variables={{}}
+        render={({ error, props }) => {
+            if (error) {
+                return <div>{error.message}</div>;
+            } else if (props) {
+                throw new Error('This code path should never be hit');
+            }
+            return <div>Loading</div>;
+        }}
+    />
+);
+
 // ~~~~~~~~~~~~~~~~~~~~~
 // Modern RefetchContainer
 // ~~~~~~~~~~~~~~~~~~~~~