Small component example usage with GQL

RecentEvents.js

// @flow
import React from 'react'
import { identity } from 'ramda'
import { Query } from 'react-apollo'
import { createSelector } from 'reselect'
import RecentEvent from '@/pages/photographerDashboard/app/recentEvents/RecentEvent'
import meQuery from '@/modules/query/me'
import Loader from '@/components/Loader'
import pathOrDefaultValue from '@/utils/pathOrDefaultValue'
import type { Event } from '@/modules/types/event'

type EventsSelector = Object => [] | Array<Event>

const eventsSelector: EventsSelector = createSelector(
  identity,
  pathOrDefaultValue('me.events', [], false),
)

const RecentEvents = () => (
  <Query query={meQuery}>
    {({ data, loading }) => {
      if (loading) {
        return <Loader />
      }
      const events = eventsSelector(data)

      return (
        <div className="col-lg-6 dashboard-cards-container">
          {events.map((event: Event) => (
            <RecentEvent key={event.id} event={event} />
          ))}
        </div>
      )
    }}
  </Query>
)

export default RecentEvents