Using flow with react-apollo

.flowconfig

[libs]
./node_modules/react-apollo/lib/index.js.flow
./node_modules/apollo-client/lib/index.js.flow

component.js

// @flow
import React from "react";
import gql from "graphql-tag";
import { graphql } from "react-apollo";

import type { DocumentNode } from "graphql";
import type { OperationComponent } from "react-apollo";

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

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

export type Response = {
  hero: Hero,
};

export const withCharacter: OperationComponent<Response> = graphql(HERO_QUERY, {
  options: () => ({
    variables: { episode: "JEDI" },
  }),
});

export default withCharacter(({ data: { loading, hero, error } }) => {
  if (loading) return <div>Loading</div>;
  if (error) return <h1>ERROR</h1>;
  return (
    <div>
      {hero &&
        <div>
          <h3>{hero.name}</h3>
          {hero.friends.map(friend =>
            <h6 key={friend.id}>
              {friend.name}:
              {" "}{friend.appearsIn.map(x => x.toLowerCase()).join(", ")}
            </h6>
          )}
        </div>}
    </div>
  );
}

full.js

// @flow
import React from "react";
import gql from "graphql-tag";
import { graphql } from "react-apollo";

import type { DocumentNode } from "graphql";
import type { OperationComponent, QueryProps } from "react-apollo";

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

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

export type Response = {
  hero: Hero,
};

export type Props = Response & QueryProps;
export type InputProps = {
  episode: string,
};

export const withCharacter: OperationComponent<
  Response,
  InputProps,
  Props
> = graphql(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 (
    <div>
      {hero &&
        <div>
          <h3>{hero.name}</h3>
          {hero.friends.map(friend =>
            <h6 key={friend.id}>
              {friend.name}:
              {" "}{friend.appearsIn.map(x => x.toLowerCase()).join(", ")}
            </h6>
          )}
        </div>}
    </div>
  );
}

options-error.js

export const withCharacter: OperationComponent<
  Response,
  InputProps
> = graphql(HERO_QUERY, {
  options: ({ episode }) => ({
    // $ExpectError [string] This type cannot be compared to number
    variables: { episode: episode > 1 },
  })
});

props-error.js

export const withCharacter: OperationComponent<
  Response,
  InputProps,
  Props
> = graphql(HERO_QUERY, {
  options: ({ episode }) => ({
    variables: { episode },
  }),
  props: ({ data, ownProps }) => ({
    ...data,
    // $ExpectError [string] This type cannot be compared to number
    episode: ownProps.episode > 1,
    // $ExpectError property `isHero`. Property not found on object type
    isHero: data && data.hero && data.hero.isHero,
  }),
});

render-error.js

export default withCharacter(({ loading, hero, error }) => {
  // $ExpectError [number] this type cannot be compared to boolean
  if (loading > 1) return <div>Loading</div>;
  if (error) return <h1>error.name</h1>;
  return ...;
}

wrapped-props-error.js

// @flow
import React from "react";
import ApolloClient, { createNetworkInterface } from "apollo-client";
import { ApolloProvider } from "react-apollo";

import Character from "./Character";

export const networkInterface = createNetworkInterface({
  uri: "https://mpjk0plp9.lp.gql.zone/graphql",
});
export const client = new ApolloClient({ networkInterface });

export default () =>
  <ApolloProvider client={client}>
    // $ExpectError property `episode`. Property not found in. See: src/Character.js:43
    <Character />
  </ApolloProvider>;

wrapped-props.js

// @flow
import React from "react";
import gql from "graphql-tag";
import { graphql } from "react-apollo";

import type { DocumentNode } from "graphql";
import type { OperationComponent } from "react-apollo";

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

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

export type Response = {
  hero: Hero,
};

export type InputProps = {
  episode: string,
};

export const withCharacter: OperationComponent<
  Response,
  InputProps
> = graphql(HERO_QUERY, {
  options: ({ episode }) => ({
    variables: { episode },
  }),
});

export default withCharacter(({ data: { loading, hero, error } }) => {
  if (loading) return <div>Loading</div>;
  if (error) return <h1>ERROR</h1>;
  return (
    <div>
      {hero &&
        <div>
          <h3>{hero.name}</h3>
          {hero.friends.map(friend =>
            <h6 key={friend.id}>
              {friend.name}:
              {" "}{friend.appearsIn.map(x => x.toLowerCase()).join(", ")}
            </h6>
          )}
        </div>}
    </div>
  );
}