React-apollo: 2.5.4: Broken <Query> typescript typings

[stnwk]

Hi :)

Since I upgraded to react-apollo 2.5.4 typescript was throwing an error at me for the following code (see code sandbox).

import * as React from "react";
import { Query } from "react-apollo";
import { DocumentNode } from "graphql";

type InnerProps<Variables> = {
  variables: Variables;
};

const createQueryComponentWorking = <Data extends object, Variables>(
  query: DocumentNode
) => {
  return ({ variables }: InnerProps<Variables>) => {
    return (
      // working without passing Variables
      // <Query<Data> query={query} variables={variables}>

      // not working with Variables :(
      <Query<Data, Variables> query={query} variables={variables}>
        {result => {
          console.log({ result });

          return null;
        }}
      </Query>
    );
  };
};

Code Sandbox

https://codesandbox.io/s/100z70v6j3

Error

Type '{ children: (result: any) => any; query: DocumentNode; variables: Variables; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Query<Data, Variables>> & Pick<Readonly<QueryProps<Data, Variables>> & Readonly<{ children?: ReactNode; }>, Exclude<...> | ... 13 more ... | Exclude<...>> & Pick<...> & Pick<...>'.
  Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Query<Data, Variables>> & Pick<Readonly<QueryProps<Data, Variables>> & Readonly<{ children?: ReactNode; }>, Exclude<...> | ... 13 more ... | Exclude<...>> & Pick<...> & Pick<...>'

Version

• [email protected]
• [email protected]

Do you have any idea how to fix this / what's causing it? Thanks :)

[JoshRobertson]

It seems to be a bug in the @types/react package as of 16.8.13: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34589

pin @types/react to 16.8.12 should solve it until a proper fix is merged there.

[jarcoal]

I'm still seeing this issue with @types/react version 16.8.17. Can anyone else confirm?

[Jayphen]

Confirmed.

[bencooper222]

Confirmed

[trival]

Still confirmed with @types/react version 16.8.19

[evenfrost]

Still present in 16.8.20. Seems closing this: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34589 haven't fixed it as fix was published in 16.8.15: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/35045#issuecomment-487694362.

[JoshRobertson]

Created issue with DefinitelyTyped here:
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/36406

[ferdaber]

Hi! Hailing from DefinitelyTyped here-- can someone point me to the Query type definitions so I can take a better look?

[JoshRobertson]

@ferdaber this is the one I'm using currently:
https://github.com/apollographql/react-apollo/blob/v2.5.6/src/Query.tsx

export default class Query<TData = any, TVariables = OperationVariables> extends React.Component<QueryProps<TData, TVariables>> {
    static contextTypes: {
        client: PropTypes.Requireable<object>;
        operations: PropTypes.Requireable<object>;
        renderPromises: PropTypes.Requireable<object>;
    };
    static propTypes: {
        client: PropTypes.Requireable<object>;
        children: PropTypes.Validator<(...args: any[]) => any>;
        fetchPolicy: PropTypes.Requireable<string>;
        notifyOnNetworkStatusChange: PropTypes.Requireable<boolean>;
        onCompleted: PropTypes.Requireable<(...args: any[]) => any>;
        onError: PropTypes.Requireable<(...args: any[]) => any>;
        pollInterval: PropTypes.Requireable<number>;
        query: PropTypes.Validator<object>;
        variables: PropTypes.Requireable<object>;
        ssr: PropTypes.Requireable<boolean>;
        partialRefetch: PropTypes.Requireable<boolean>;
        returnPartialData: PropTypes.Requireable<boolean>;
    };
    context: QueryContext | undefined;
    private client;
    private queryObservable?;
    private querySubscription?;
    private previousData;
    private refetcherQueue?;
    private hasMounted;
    private operation?;
    private lastResult;
    constructor(props: QueryProps<TData, TVariables>, context: QueryContext);
    fetchData(): Promise<ApolloQueryResult<any>> | boolean;
    componentDidMount(): void;
    componentWillReceiveProps(nextProps: QueryProps<TData, TVariables>, nextContext: QueryContext): void;
    componentWillUnmount(): void;
    componentDidUpdate(prevProps: QueryProps<TData, TVariables>): void;
    render(): React.ReactNode;
    private extractOptsFromProps;
    private initializeQueryObservable;
    private setOperations;
    private updateQuery;
    private startQuerySubscription;
    private removeQuerySubscription;
    private resubscribeToQuery;
    private updateCurrentData;
    private handleErrorOrCompleted;
    private getQueryResult;
}

[hwillson]

React Apollo has been refactored to use React Hooks behind the scenes for everything, which means a lot has changed since this issue was opened (and a lot of outstanding issues have been resolved). We'll close this issue off, but please let us know if you're still encountering this problem using React Apollo >= 3.1.0. Thanks!

[jerlam06]

I had the same issue, so I downgraded to the version 16.8.7 of @types/react. No more type issues.

[evenfrost]

@hwillson still encountering it with [email protected]. Is it going to be fixed or migrating to hooks is the only option now? I understand you want to stay on the edge but there are a lot of large projects that still use Query/Mutation component approach, and migrating to new logic at once may be quite problematic, given the fact that project won't build now due to errors.

[jarcoal]

Still an issue with react-apollo 3.1.2, however I believe it's changed a bit since 2.X. I was able to resolve most issues by specifying any for TData on all <Query> or <Mutation> that didn't otherwise have a specified typing.

Examples: <Query<any> ...> and <Mutation<any> ...>

[dready]

Still an issue and any is no solution for me. Any news?

[samwightt]

This issue needs to be reopened as it's still an issue with the latest version of Apollo.

[miketmoore]

I recreated this problem here: https://codesandbox.io/s/github/miketmoore/react-apollo-typescript-issue

It is also available here: https://github.com/miketmoore/react-apollo-typescript-issue/tree/master/

Here is the error message:

Type '{ children: (queryProps: any) => ReactNode; query: DocumentNode; displayName?: string; skip?: boolean; onCompleted?: (data: TData) => void; onError?: (error: ApolloError) => void; ssr?: boolean; ... 8 more ...; returnPartialData?: boolean; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Query<TData, TVariables>> & Pick<Readonly<QueryProps<TData, TVariables>> & Readonly<{ children?: ReactNode; }>, Exclude<...> | ... 14 more ... | Exclude<...>> & Pick<...> & Pick<...>'.

I have tried a lot of different things to satisfy this type inconsistency, but cannot find a reasonable solution. FWIW, I don't think using the any type is a real solution.