// GET '/graphql'
{
  allTodoes(first: 1) {
    text
    complete
  }
}

schema {
  query: Query
  mutation: Mutation
  subscription: Subscription
}

type Query {
  allTodoes(first: Int): [Todo]
}

type Todo {  
  id: ID!
  text: String!
  complete: Boolean!
}

import ApolloClient from 'apollo-boost'
import { ApolloProvider } from 'react-apollo'

const client = new ApolloClient({
  uri: "https://your-ad-here/graphql"
})

const ApolloWrapper = () => (
  <ApolloProvider client={client}>
    <App/>
  </ApolloProvider>
)

import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

export const client = new ApolloClient({
  link: new HttpLink({ 
    uri: "https://time-travel-today/graphql" 
  }),
  cache: new InMemoryCache()
});

const TODOS = gql`query todos {
  allTodoes { id text complete }
}`

const withTodos = graphql(TODOS, {
  props: ({ data }) => {
    if (data.loading) return { loading: true }
    if (data.error) return { hasErrors: true }
    return {
      todos: data.allTodoes || [],
    }
  },
});

export default withTodos(App)

class App extends Component {
  render() {
    return (
      { this.props.loading && <CircularProgress /> }
      { this.props.hasErrors && <div>Woot can't load todos!😱<div/> }
      { this.props.todos && this.props.todos.map(todo => (
        <Todo key={todo.id} todo={todo}/>
      )) }
    );
  }
}

const TODOS = gql`query todos {
  allTodoes { id text complete }
}`;

const Todos = () => (
  <Query query={TODOS}>
    {({ loading, error, data }) => {
      if (loading) return <CircularProgress/>;
      if (error) return <div>Woot can't load todos!😱<div/>;

      return data.allTodoes.map(todo => (
        <Todo key={todo.id} todo={todo}/>
      ));
    }}
  </Query>
);

const ApolloCache = () => (
  <ApolloConsumer>
    {(client) => (
      <pre>{client.extract()}</pre>
    )}
  </ApolloConsumer>
)