gc-codesnippets

render() {
  return (
    <QueryRenderer
      environment={environment}
      query={AppAllPostQuery}
      render={({error, props}) => {
        if (error) {
          return <div>{error.message}</div>
        } else if (props) {
          return <ListPage viewer={props.viewer} />

gc-codesnippets

mutation ice {
  createPost(
    input: {
      description: "Ice Cream!",
      imageUrl: "https://s-media-cache-ak0.pinimg.com/originals/b9/ba/b9/b9bab9dcacb9efde92e015af07834473.jpg",
      clientMutationId: ""
    }
  ) {
    post {
      id

gc-codesnippets

import React from 'react'
class CreatePage extends React.Component {
state = {
    description: '',
    imageUrl: '',
  }
render () {
    return (
      <div className='w-100 pa4 flex justify-center'>
        <div style={{ maxWidth: 400 }} className=''>

gc-codesnippets

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import CreatePage from './CreatePage'
import registerServiceWorker from './registerServiceWorker'
import { Router, Route, browserHistory } from 'react-router'
ReactDOM.render(
  <Router history={browserHistory}>
    <Route path='/' component={App} />
    <Route path='/create' component={CreatePage} />

gc-codesnippets

render () {
  return (
    <div className='w-100 flex justify-center'>
      <Link to='/create' className='fixed bg-white top-0 right-0 pa4 ttu dim black no-underline'>
        + New Post
      </Link>
      <div className='w-100' style={{ maxWidth: 400 }}>
        {this.props.viewer.allPosts.edges.map(({node}) =>
          <Post key={node.__id} post={node} />
        )}

gc-codesnippets

import { Link } from 'react-router'

gc-codesnippets

// 1
import {
  commitMutation,
  graphql,
} from 'react-relay'
import {ConnectionHandler} from 'relay-runtime'
import environment from './Environment'
// 2
const mutation = graphql`
  mutation CreatePostMutation($input: CreatePostInput!) {

gc-codesnippets

optimisticUpdater: (proxyStore) => {
  // 1 - create the `newPost` as a mock that can be added to the store
  const id = 'client:newPost:' + tempID++
  const newPost = proxyStore.create(id, 'Post')
  newPost.setValue(id, 'id')
  newPost.setValue(description, 'description')
  newPost.setValue(imageUrl, 'imageUrl')
// 2 - add `newPost` to the store
  const viewerProxy = proxyStore.get(viewerId)
  const connection = ConnectionHandler.getConnection(viewerProxy, 'ListPage_allPosts')

gc-codesnippets

let tempID = 0

gc-codesnippets

render () {
  return (
    <QueryRenderer
      environment={environment}
      query={CreatePageViewerQuery}
      render={({error, props}) => {
        if (error) {
          return <div>{error.message}</div>
        } else if (props) {
          return (