[react-relay] Add experimental useSubscription hook typing (DefinitelyTyped#44915)

* [react-relay] Add experimental useSubscription hook typing

* [react-relay] Mute linter about no-unnecessary-generics

* [react-relay] Fix wrong disable linter command

* [react-relay] Fix wrong location of the linter comment

Author: Christian Ivicevic

types/react-relay/index.d.ts

@@ -10,6 +10,7 @@
 //                 Jared Kass <https://github.com/jdk243>
 //                 Renan Machado <https://github.com/renanmav>
 //                 Janic Duplessis <https://github.com/janicduplessis>
+//                 Christian Ivicevic <https://github.com/ChristianIvicevic>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 3.3
 

types/react-relay/lib/hooks.d.ts

@@ -16,3 +16,4 @@ export { useMutation } from './relay-experimental/useMutation';
 export { usePreloadedQuery } from './relay-experimental/usePreloadedQuery';
 export { useRefetchableFragment } from './relay-experimental/useRefetchableFragment';
 export { useRelayEnvironment } from './relay-experimental/useRelayEnvironment';
+export { useSubscription } from './relay-experimental/useSubscription';

types/react-relay/lib/relay-experimental/useSubscription.d.ts

@@ -0,0 +1,8 @@
+import { GraphQLSubscriptionConfig, OperationType, requestSubscription } from 'relay-runtime';
+
+export function useSubscription<TSubscriptionPayload extends OperationType>(
+    // The actual subtype of OperationType is required to allow for type inferrence inside GraphQLSubscriptionConfig.
+    // tslint:disable-next-line:no-unnecessary-generics
+    config: GraphQLSubscriptionConfig<TSubscriptionPayload>,
+    requestSubscriptionFn?: typeof requestSubscription,
+): void;

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

@@ -1,6 +1,14 @@
 import * as React from 'react';
 
-import { Environment, RecordSource, Store, Network, commitMutation, FragmentRefs } from 'relay-runtime';
+import {
+    Environment,
+    RecordSource,
+    Store,
+    Network,
+    commitMutation,
+    FragmentRefs,
+    GraphQLSubscriptionConfig,
+} from 'relay-runtime';
 import {
     fetchQuery,
     graphql,
@@ -13,7 +21,8 @@ import {
     useRefetchableFragment,
     usePaginationFragment,
     useBlockingPaginationFragment,
-    useMutation
+    useMutation,
+    useSubscription,
 } from 'react-relay/hooks';
 
 const source = new RecordSource();
@@ -748,7 +757,7 @@ function Mutation() {
                 readonly id: string;
                 readonly viewer_does_like?: boolean | null;
                 readonly like_count?: number | null;
-            }
+            };
         } | null;
     }
 
@@ -758,13 +767,13 @@ function Mutation() {
                 readonly id: string;
                 readonly viewer_does_like?: boolean | null;
                 readonly like_count?: number | null;
-            }
+            };
         } | null;
     }
 
     interface FeedbackLikeMutationVariables {
         input: {
-            id: string,
+            id: string;
             text: string;
         };
     }
@@ -788,7 +797,7 @@ function Mutation() {
             }
         `);
         if (isInFlight) {
-          return <div>loading</div>;
+            return <div>loading</div>;
         }
         return (
             <button
@@ -814,13 +823,60 @@ function Mutation() {
                         optimisticResponse: {
                             feedback_like: {
                                 feedback: {
-                                    id: "1"
-                                }
-                            }
-                        }
+                                    id: '1',
+                                },
+                            },
+                        },
                     });
                 }}
             />
         );
     };
 }
+
+/**
+ * Tests for useSubscription
+ * see https://relay.dev/docs/en/experimental/api-reference#usesubscription
+ */
+function Subscription() {
+    interface SubscriptionVariables {
+        id: string;
+    }
+    interface SubscriptionResponse {
+        readonly store: {
+            readonly id: string;
+            readonly value1: number;
+            readonly value2: number;
+        };
+    }
+    interface Subscription {
+        readonly response: SubscriptionResponse;
+        readonly variables: SubscriptionVariables;
+    }
+
+    interface Props {
+        id: string;
+    }
+
+    return function SubscriptionComponent({ id }: Props) {
+        const subscriptionConfig: GraphQLSubscriptionConfig<Subscription> = React.useMemo(
+            () => ({
+                subscription: graphql`
+                    subscription subscriptionComponentSubscription($id: ID!) {
+                        store(id: $id) {
+                            id
+                            value1
+                            value2
+                        }
+                    }
+                `,
+                variables: { id },
+            }),
+            [id],
+        );
+
+        useSubscription(subscriptionConfig);
+
+        return <p>The subscription has been started in the background.</p>;
+    };
+}