Fix types

src/mutations.tsx

@@ -1,19 +1,14 @@
-import { ApolloError } from "apollo-client";
+import { ApolloError, MutationUpdaterFn } from "apollo-client";
 import { DocumentNode } from "graphql";
 import React from "react";
-import {
-  Mutation,
-  MutationFn,
-  MutationResult,
-  MutationUpdaterFn
-} from "react-apollo";
+import { Mutation, MutationFunction, MutationResult } from "react-apollo";
 
 import useNotifier from "./hooks/useNotifier";
 import i18n from "./i18n";
 
 export interface TypedMutationInnerProps<TData, TVariables> {
   children: (
-    mutateFn: MutationFn<TData, TVariables>,
+    mutateFn: MutationFunction<TData, TVariables>,
     result: MutationResult<TData>
   ) => React.ReactNode;
   onCompleted?: (data: TData) => void;
@@ -21,26 +16,17 @@ export interface TypedMutationInnerProps<TData, TVariables> {
   variables?: TVariables;
 }
 
+// For some reason Mutation returns () => Element instead of () => ReactNode
 export function TypedMutation<TData, TVariables>(
   mutation: DocumentNode,
   update?: MutationUpdaterFn<TData>
 ) {
-  class StrictTypedMutation extends Mutation<TData, TVariables> {}
   return (props: TypedMutationInnerProps<TData, TVariables>) => {
     const notify = useNotifier();
-    // Obviously, this is workaround to the problem described here:
-    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/32588
-    const {
-      children,
-      onCompleted,
-      onError,
-      variables
-    } = props as JSX.LibraryManagedAttributes<
-      typeof StrictTypedMutation,
-      typeof props
-    >;
+    const { children, onCompleted, onError, variables } = props;
+
     return (
-      <StrictTypedMutation
+      <Mutation
         mutation={mutation}
         onCompleted={onCompleted}
         onError={err => {
@@ -55,8 +41,8 @@ export function TypedMutation<TData, TVariables>(
         variables={variables}
         update={update}
       >
-        {children}
-      </StrictTypedMutation>
+        {(mutateFn, result) => <>{children(mutateFn, result)}</>}
+      </Mutation>
     );
   };
 }

src/queries.tsx

@@ -1,9 +1,9 @@
+import { ApolloQueryResult } from "apollo-client";
 import { DocumentNode } from "graphql";
 import gql from "graphql-tag";
 import React from "react";
 import { Query, QueryResult } from "react-apollo";
 
-import { ApolloQueryResult } from "apollo-client";
 import AppProgress from "./components/AppProgress";
 import ErrorPage from "./components/ErrorPage/ErrorPage";
 import useNavigator from "./hooks/useNavigator";
@@ -62,31 +62,18 @@ class QueryProgress extends React.Component<QueryProgressProps, {}> {
   }
 }
 
+// For some reason Query returns () => Element instead of () => ReactNode
 export function TypedQuery<TData, TVariables>(
   query: DocumentNode
 ): React.FC<TypedQueryInnerProps<TData, TVariables>> {
-  class StrictTypedQuery extends Query<TData, TVariables> {}
-  return props => {
+  return ({ children, displayLoader, skip, variables, require }) => {
     const navigate = useNavigator();
     const pushMessage = useNotifier();
 
     return (
       <AppProgress>
-        {({ setProgressState }) => {
-          // Obviously, this is workaround to the problem described here:
-          // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/32588
-          const {
-            children,
-            displayLoader,
-            skip,
-            variables,
-            require
-          } = props as JSX.LibraryManagedAttributes<
-            typeof StrictTypedQuery,
-            typeof props
-          >;
-          return (
-            <StrictTypedQuery
+        {({ setProgressState }) => (
+          <Query
             fetchPolicy="cache-and-network"
             query={query}
             variables={variables}
@@ -132,9 +119,7 @@ export function TypedQuery<TData, TVariables>(
                   true
                 )
               ) {
-                  childrenOrNotFound = (
-                    <ErrorPage onBack={() => navigate("/")} />
-                  );
+                childrenOrNotFound = <ErrorPage onBack={() => navigate("/")} />;
               }
 
               if (displayLoader) {
@@ -149,11 +134,10 @@ export function TypedQuery<TData, TVariables>(
                 );
               }
 
-                return childrenOrNotFound;
-              }}
-            </StrictTypedQuery>
-          );
+              return <>{childrenOrNotFound}</>;
             }}
+          </Query>
+        )}
       </AppProgress>
     );
   };