gistfile1.txt

=====HOC====

AddFoo.js

const AddFoo = props => 
  <Button onClick={() => props.onAdd(props.data)} title={props.title} />

export default graphql(CreateFoo, {
  props: props => ({
    onAdd: foo => props.mutate({
      variables: foo,
      optimisticResponse: {
        __typename: 'Mutation',
        createFoo: { ...foo,  __typename: 'Foo' }
      },
      update: (proxy, { data: { createFoo } }) => {
        const data = proxy.readQuery({ query: ListFoos });
        data.listFoos.items.push(createFoo);
        proxy.writeQuery({ query: ListFoos, data });
      }
    })
  })
})(AddFoo)



Page.js

import AddFoo from './AddFoo.js';

const Page = props => 
  <AddFoo title="click me" data={{me: "cody"}} />





====== Render Props =====
Page.js

const Page = props => 
  <Mutation 
    mutation={ createFoo }
  >
    {createFoo => 
      <Button onClick={
        createFoo({
          variables: {me: "cody"},
          optimisticResponse: {
            __typename: 'Mutation',
            createFoo: { ...{me: "cody"},  __typename: 'Foo' }
          },
          update: (proxy, { data: { createFoo } }) => {
            const data = proxy.readQuery({ query: ListFoos });
            data.listFoos.items.push(createFoo);
            proxy.writeQuery({ query: ListFoos, data });
          }
        })
      } />
  </Mutation>