Upgrade react-relay types

src/core/client/framework/lib/relay/QueryRenderer.tsx

@@ -3,23 +3,25 @@ import {
   QueryRenderer,
   QueryRendererProps as QueryRendererPropsOrig,
 } from "react-relay";
+import { OperationBase, OperationDefaults } from "relay-runtime";
 
 import { Omit } from "talk-framework/types";
 
 import { TalkContextConsumer } from "../bootstrap/TalkContext";
 
 // Omit environment as we are passing this from the context.
-export type QueryRendererProps<V, R> = Omit<
-  QueryRendererPropsOrig<V, R>,
-  "environment"
->;
+export type QueryRendererProps<
+  T extends OperationBase = OperationDefaults
+> = Omit<QueryRendererPropsOrig<T>, "environment">;
 
 /**
  * TalkQueryRenderer is a wrappper around  Relay's `QueryRenderer`.
  * It supplies the `environment` from the context and has better
  * generics type support.
  */
-class TalkQueryRenderer<V, R> extends Component<QueryRendererProps<V, R>> {
+class TalkQueryRenderer<
+  T extends OperationBase = OperationDefaults
+> extends Component<QueryRendererProps<T>> {
   public render() {
     return (
       <TalkContextConsumer>

src/core/client/stream/mutations/CreateCommentMutation.ts

@@ -9,10 +9,10 @@ import {
 } from "talk-framework/lib/relay";
 import { Omit } from "talk-framework/types";
 
-import { CreateCommentMutation as CreateCommentType } from "talk-stream/__generated__/CreateCommentMutation.graphql";
+import { CreateCommentMutation as MutationTypes } from "talk-stream/__generated__/CreateCommentMutation.graphql";
 
 export type CreateCommentInput = Omit<
-  CreateCommentType["variables"]["input"],
+  MutationTypes["variables"]["input"],
   "clientMutationId"
 >;
 
@@ -41,7 +41,7 @@ let clientMutationId = 0;
 function commit(environment: Environment, input: CreateCommentInput) {
   const me = getMe(environment)!;
   const currentDate = new Date().toISOString();
-  return commitMutationPromiseNormalized<CreateCommentType>(environment, {
+  return commitMutationPromiseNormalized<MutationTypes>(environment, {
     mutation,
     variables: {
       input: {
@@ -90,4 +90,4 @@ export const withCreateCommentMutation = createMutationContainer(
 
 export type CreateCommentMutation = (
   input: CreateCommentInput
-) => Promise<CreateCommentType["response"]["createComment"]>;
+) => Promise<MutationTypes["response"]["createComment"]>;

src/core/client/stream/queries/PermalinkViewQuery.tsx

@@ -7,10 +7,7 @@ import {
   QueryRenderer,
   withLocalStateContainer,
 } from "talk-framework/lib/relay";
-import {
-  PermalinkViewQueryResponse,
-  PermalinkViewQueryVariables,
-} from "talk-stream/__generated__/PermalinkViewQuery.graphql";
+import { PermalinkViewQuery as QueryTypes } from "talk-stream/__generated__/PermalinkViewQuery.graphql";
 import { PermalinkViewQueryLocal as Local } from "talk-stream/__generated__/PermalinkViewQueryLocal.graphql";
 
 import { Spinner } from "talk-ui/components";
@@ -23,7 +20,7 @@ interface InnerProps {
 export const render = ({
   error,
   props,
-}: ReadyState<PermalinkViewQueryResponse>) => {
+}: ReadyState<QueryTypes["response"]>) => {
   if (error) {
     return <div>{error.message}</div>;
   }
@@ -36,7 +33,7 @@ export const render = ({
 const PermalinkViewQuery: StatelessComponent<InnerProps> = ({
   local: { commentID },
 }) => (
-  <QueryRenderer<PermalinkViewQueryVariables, PermalinkViewQueryResponse>
+  <QueryRenderer<QueryTypes>
     query={graphql`
       query PermalinkViewQuery($commentID: ID!) {
         comment(id: $commentID) {
@@ -45,7 +42,7 @@ const PermalinkViewQuery: StatelessComponent<InnerProps> = ({
       }
     `}
     variables={{
-      commentID,
+      commentID: commentID!,
     }}
     render={render}
   />

src/core/client/stream/queries/StreamQuery.tsx

@@ -5,10 +5,7 @@ import {
   QueryRenderer,
   withLocalStateContainer,
 } from "talk-framework/lib/relay";
-import {
-  StreamQueryResponse,
-  StreamQueryVariables,
-} from "talk-stream/__generated__/StreamQuery.graphql";
+import { StreamQuery as QueryTypes } from "talk-stream/__generated__/StreamQuery.graphql";
 import { StreamQueryLocal as Local } from "talk-stream/__generated__/StreamQueryLocal.graphql";
 import { Spinner } from "talk-ui/components";
 import StreamContainer from "../containers/StreamContainer";
@@ -17,7 +14,10 @@ interface InnerProps {
   local: Local;
 }
 
-export const render = ({ error, props }: ReadyState<StreamQueryResponse>) => {
+export const render = ({
+  error,
+  props,
+}: ReadyState<QueryTypes["response"]>) => {
   if (error) {
     return <div>{error.message}</div>;
   }
@@ -32,7 +32,7 @@ export const render = ({ error, props }: ReadyState<StreamQueryResponse>) => {
 const StreamQuery: StatelessComponent<InnerProps> = ({
   local: { assetID, authRevision },
 }) => (
-  <QueryRenderer<StreamQueryVariables, StreamQueryResponse>
+  <QueryRenderer<QueryTypes>
     query={graphql`
       query StreamQuery($assetID: ID!, $authRevision: Int!) {
         asset(id: $assetID) {
@@ -47,7 +47,7 @@ const StreamQuery: StatelessComponent<InnerProps> = ({
       }
     `}
     variables={{
-      assetID,
+      assetID: assetID!,
       authRevision,
     }}
     render={render}