React-apollo: Typescript typings do not work with React 15 and react-apollo 2.1.3

[pasih]

First of all, correct me if I'm wrong but I assume react-apollo 2.1.3 is meant to be compatible with React 15 (peerDependencies lists React versions down to 14.x).

Currently, I'm having difficulty getting the combination of React 15, Typescript and react-apollo 2.1.3 to work.

Intended outcome:

Working app. :)

Actual outcome:

work/tests/ts-apollo-test/node_modules/react-apollo/ApolloProvider.d.ts
(25,5): Property 'render' in type 'ApolloProvider<TCache>' is not assignable to the same property in base type 'Component<ApolloProviderProps<TCache>, {}>'.
  Type '() => ReactNode' is not assignable to type '() => false | Element | null'.
    Type 'ReactNode' is not assignable to type 'false | Element | null'.
      Type 'undefined' is not assignable to type 'false | Element | null'.

I assume this is somehow related to React 16's extended idea of an element (strings, arrays etc. are included) and Apollo assuming a React 16-style ReactNode. React 15 types have a more limited definition of ReactNode.

How to reproduce the issue:

Here's a repository that reproduces the issue:

https://github.com/pasih/react15-apollo-ts-issue

(Just npm install and you should already see the error in your editor. If not, try compiling the app).

Version

• [email protected]
• [email protected]
• [email protected]
• [email protected]
• @types/[email protected]
• @types/[email protected]

Issue Labels

• [x] has-reproduction
• [ ] feature
• [ ] docs
• [ ] blocking
• [ ] good first issue

[pierrebiver]

The example from the website does not work neither:

import React from "react";
import gql from "graphql-tag";
import { graphql, ChildDataProps } from "react-apollo";

const HERO_QUERY = gql`
  query GetCharacter($episode: Episode!) {
    hero(episode: $episode) {
      name
      id
      friends {
        name
        id
        appearsIn
      }
    }
  }
`;

type Hero = {
  name: string;
  id: string;
  appearsIn: string[];
  friends: Hero[];
};

type Response = {
  hero: Hero;
};

type InputProps = {
  episode: string
};

type Variables = {
  episode: string
};

type ChildProps = ChildDataProps<InputProps, Response, Variables>;

const withCharacter = graphql<InputProps, Response, Variables, ChildProps>(HERO_QUERY, {
  options: ({ episode }) => ({
    variables: { episode }
  }),
  props: ({ data }) => ({ ...data })
});

export default withCharacter(({ loading, hero, error }) => {
  if (loading) return <div>Loading</div>;
  if (error) return <h1>ERROR</h1>;
  return ...// actual component with data;
});

I use:

• [email protected]
• [email protected]
• [email protected]
• [email protected]

[reem]

Yup, also having this exact issue. Deleting the re-declaration of render in the type declaration for ApolloProvider fixes the issue.

EDIT: Not only ApolloProvider, but every single component type exported by react-apollo has this problem, it basically renders the library entirely unusable with react 15 - this should be a maximum priority issue.

[lukebarton]

I think @pierrebiver's issue is separate - but I'm experiencing what he reports with that example - the example fails type checks specifically with:

[ts]
Argument of type '{ options: ({ episode }: InputProps) => { variables: { episode: string; }; }; props: ({ data }: O...' is not assignable to parameter of type 'OperationOption<InputProps, Response, Variables, ChildDataProps<InputProps, Response, Variables>>'.
  Types of property 'props' are incompatible.
    Type '({ data }: OptionProps<InputProps, Response, OperationVariables>) => { error?: ApolloError; netwo...' is not assignable to type '(props: OptionProps<InputProps, Response, OperationVariables>, lastProps?: void | ChildDataProps<...'.
      Type '{ error?: ApolloError; networkStatus: number; loading: boolean; variables: OperationVariables; fe...' is not assignable to type 'ChildDataProps<InputProps, Response, Variables>'.
        Type '{ error?: ApolloError; networkStatus: number; loading: boolean; variables: OperationVariables; fe...' is not assignable to type 'InputProps'.
          Property 'episode' is missing in type '{ error?: ApolloError; networkStatus: number; loading: boolean; variables: OperationVariables; fe...'.

[ebenoist]

Just ran into this as well. It would seem that these components are simply not useable if using React 15.6 type definitions. I'd be happy to PR @reem's fix if this is desirable.

[cchu08]

Yeah is anybody else running into issues with Gatsby, apollo, and typescript? Since Gatsby uses React 15.6, I'm running into the same issue as well.

[rosskevin]

Update your stack of dependencies and potentially rebuild your workspace - ncu -a && rm -rf node_modules && yarn install. Given the stack of dependencies used these can get out of date, but as of now they are working.