Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
// This is a functional version of code snippet #4:
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, {}!</h1>
<h2>These contacts need your action:</h2>
{, index) => (
<ContactItem contact={contact} key={index} />
<h2>And here is everyone else:</h2>
{, index) => (
<ContactItem contact={contact} key={index} />
// Use the react-apollo HOC (higher order component) to fetch our data.
export default graphql(ContactItemListQuery)(ContactItemList);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment