import React from 'react';
import {graphql, QueryRenderer} from 'react-relay';
import {Link} from 'react-router-dom';

import environment from '../graphqlEnvironment';

function RelayTest() {
  return (
    <QueryRenderer
      environment={environment}
      query={graphql`
        query relayTestQuery {
          manyPokemon {
            id
            iid
            nickname
          }
        }
      `}
      render={({error, props}) => {
        if (error) {
          return <div>Error!</div>;
        }
        if (!props) {
          return <div>Loading...</div>;
        }
        return (
          <ul>
            {props.manyPokemon.map(pkmn => (
              <li key={pkmn.id}>
                <Link to={'/pokemon/' + pkmn.id}>
                  [{pkmn.iid}] {pkmn.id}: {pkmn.nickname}
                </Link>
              </li>
            ))}
          </ul>
        );
      }}
      variables={{}}
    />
  );
}

export default RelayTest;