04a_using_the_component.jsx

// This is a functional version of code snippet #4:
// https://gist.github.com/bw/4d33f7f4d4cc096c51e923612338de94

import React, { Component } from 'react';
import { graphql } from 'react-apollo';

import Spinner from 'UI/components/Spinner';
import ContactItem from 'UI/components/items/ContactItem';

import getContactItemList from './ContactItemList.graphql';

const getContactItemList = ({
  // Deconstruct the Apollo data object (given to us via props)
  data: { user, loading },
}) => {
  if (loading) return <Spinner />;
  
  return (
    <div className="contactList">
      <h1>Hey, {user.name}!</h1>
      <h2>These contacts need your action:</h2>
      {user.contactsNeedingAction.map((contact, index) => (
        <ContactItem contact={contact} key={index} />
      ))}
      <h2>And here is everyone else:</h2>
      {user.otherContacts.map((contact, index) => (
        <ContactItem contact={contact} key={index} />
      ))}
    </div>
  );
};

// Use the react-apollo HOC (higher order component) to fetch our data.
export default graphql(ContactItemListQuery)(ContactItemList);