[react-relay] Add generics to QueryRenderer to type variables and response.

types/react-relay/index.d.ts

@@ -7,7 +7,7 @@
 //                 Cameron Knight <https://github.com/ckknight>
 //                 Kaare Hoff Skovgaard <https://github.com/kastermester>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.8
+// TypeScript Version: 2.9
 
 // Prettified with:
 // $ prettier --parser typescript --tab-width 4 --semi --trailing-comma es5 --write --print-width 120 \
@@ -88,24 +88,30 @@ export const graphql: GraphqlInterface;
 // ~~~~~~~~~~~~~~~~~~~~~
 // ReactRelayQueryRenderer
 // ~~~~~~~~~~~~~~~~~~~~~
-export interface QueryRendererProps {
+
+export type QueryRendererGenerics = { variables: object; response: object };
+
+export interface QueryRendererProps<T extends QueryRendererGenerics> {
     cacheConfig?: RelayRuntimeTypes.CacheConfig;
     environment: RelayRuntimeTypes.Environment;
     query?: RelayRuntimeTypes.GraphQLTaggedNode | null;
-    render(readyState: ReadyState): React.ReactElement<any> | undefined | null;
-    variables: RelayRuntimeTypes.Variables;
+    render(readyState: ReadyState<T["response"]>): React.ReactElement<any> | undefined | null;
+    variables: T["variables"];
     rerunParamExperimental?: RelayRuntimeTypes.RerunParam;
 }
-export interface ReadyState {
+export interface ReadyState<T> {
     error: Error | undefined | null;
-    props: { [propName: string]: any } | undefined | null;
+    props: T | undefined | null;
     retry?(): void;
 }
-export interface QueryRendererState {
-    readyState: ReadyState;
-}
-export class ReactRelayQueryRenderer extends React.Component<QueryRendererProps, QueryRendererState> {}
-export class QueryRenderer extends ReactRelayQueryRenderer {}
+
+export class ReactRelayQueryRenderer<T extends QueryRendererGenerics> extends React.Component<QueryRendererProps<T>> {}
+export class QueryRenderer<
+    T extends QueryRendererGenerics = {
+        variables: RelayRuntimeTypes.Variables;
+        response: { [propName: string]: any };
+    }
+> extends ReactRelayQueryRenderer<T> {}
 
 // ~~~~~~~~~~~~~~~~~~~~~
 // createFragmentContainer

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

@@ -1,3 +1,5 @@
+// tslint:disable:interface-over-type-literal
+
 import * as React from "react";
 import { Environment, Network, RecordSource, Store, ConnectionHandler, FragmentReference } from "relay-runtime";
 
@@ -28,8 +30,21 @@ const modernEnvironment = new Environment({ network, store });
 // ~~~~~~~~~~~~~~~~~~~~~
 // Modern QueryRenderer
 // ~~~~~~~~~~~~~~~~~~~~~
+
+// Artifact produced by relay-compiler-language-typescript
+type MyQueryRendererVariables = {
+    pageID: string;
+};
+type MyQueryRendererResponse = {
+    name: string;
+};
+type MyQueryRenderer = {
+    variables: MyQueryRendererVariables;
+    response: MyQueryRendererResponse;
+};
+
 const MyQueryRenderer = (props: { name: string; show: boolean }) => (
-    <QueryRenderer
+    <QueryRenderer<MyQueryRenderer>
         environment={modernEnvironment}
         query={
             props.show
@@ -82,7 +97,6 @@ type StoryLike = (storyID: string) => void;
 // Artifact produced by relay-compiler-language-typescript
 declare const _Story_story$ref: unique symbol;
 type Story_story$ref = typeof _Story_story$ref;
-// tslint:disable-next-line:interface-over-type-literal
 type Story_story = {
     readonly id: string;
     readonly text: string;
@@ -173,7 +187,6 @@ declare const _FeedStories_feed$ref: unique symbol;
 type FeedStories_feed$ref = typeof _FeedStories_feed$ref;
 declare const _FeedStory_edges$ref: unique symbol;
 type FeedStory_edges$ref = typeof _FeedStory_edges$ref;
-// tslint:disable-next-line:interface-over-type-literal
 type FeedStories_feed = {
     readonly edges: ReadonlyArray<{
         readonly node: {
@@ -184,7 +197,6 @@ type FeedStories_feed = {
     }>;
     readonly " $refType": FeedStories_feed$ref;
 };
-// tslint:disable-next-line:interface-over-type-literal
 type FeedStory_edges = ReadonlyArray<{
     readonly publishedAt: string;
     readonly " $refType": FeedStory_edges$ref;
@@ -255,7 +267,6 @@ const Feed = (() => {
 // Artifact produced by relay-compiler-language-typescript
 declare const _UserFeed_user$ref: unique symbol;
 type UserFeed_user$ref = typeof _UserFeed_user$ref;
-// tslint:disable-next-line:interface-over-type-literal
 type UserFeed_user = {
     readonly feed: {
         readonly pageInfo: {