gc-codesnippets

import React from 'react'
​
class Post extends React.Component {
​
  render () {
    return (
      <div className='pa3 bg-black-05 ma3'>
        <div
          className='w-100'
          style={{

gc-codesnippets

import React from 'react'
import Post from './Post'
​
const mockPostData = [
  {
    node: {
      id: "1",
      description: "Howdy Partner",
      imageUrl: "http://www.cutestpaw.com/wp-content/uploads/2015/09/s-Howdy-partner.jpeg"
    }

gc-codesnippets

import React, { Component } from 'react'
import ListPage from './ListPage'
class App extends Component {
  render() {
    return (
      <ListPage />
    )
  }
}
export default App

gc-codesnippets

import {
  createFragmentContainer,
  graphql
} from 'react-relay'

gc-codesnippets

export default createFragmentContainer(Post, graphql`
  fragment Post_post on Post {
    id
    description
    imageUrl
  }
`)

gc-codesnippets

import {
  createFragmentContainer,
  graphql
} from 'react-relay'

gc-codesnippets

export default createFragmentContainer(ListPage, graphql`
  fragment ListPage_viewer on Viewer {
    allPosts(last: 100, orderBy: createdAt_DESC) @connection(key: "ListPage_allPosts", filters: []) {
      edges {
        node {
          ...Post_post
        }
      }
    }
  }

gc-codesnippets

{this.props.viewer.allPosts.edges.map(({node}) =>
  <Post key={node.__id} post={node} />
)}

gc-codesnippets

import {
  QueryRenderer,
  graphql
} from 'react-relay'
import environment from './Environment'

gc-codesnippets

const AppAllPostQuery = graphql`
  query AppAllPostQuery {
    viewer {
      ...ListPage_viewer
    }
  }
`