Component Diff

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>
  );
}

I think line 34, where you're showing the code to be replaced, should be:

export const withCharacter = graphql(HERO_QUERY, {

34 and 40 are identical. Just caught this ~~~ (thanks for the great article!!)