component.js.diff

+ // @flow
import React from "react";
import gql from "graphql-tag";
import { graphql } from "react-apollo";
+ import type { OperationComponent } from "react-apollo";
export const HERO_QUERY = 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, {
- export const withCharacter(({ data: { loading, hero, error } }) => {
  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>
  );
}