FraQL preview 👌

ArticleCard.js

import React from 'react'
import gql from 'fraql'

const ArticleCard = ({ article }) => (
  <div>
    <h1>{article.title}</h1>
    <p>{article.description}</p>
  </div>
)

ArticleCard.fragments = {
  article: gql`
    fragment _ on Article {
      title
      description
    }
  `
}

export default ArticleCard

ArticleList.js

import React from 'react'
import { Query } from 'apollo-client'
import gql from 'graphql-tag'
import ArticleCard from './ArticleCard'

const ARTICLES = gql`
  query Articles {
    articles {
      id
      ${ArticleCard.fragments.article}
    }
  }
`

const ArticleList = ({ articles }) => (
  <div>
    <Query query={ARTICLES}>
      {({ data }) => data.articles && data.articles.map(article => (
        <ArticleCard key={article.id} article={article} />
      ))}
    </Query>
  </div>
)

export default ArticleList