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:
// 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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment