updated with-apollo example to update option API (#3296)

examples/with-apollo/components/PostList.js

@@ -67,7 +67,7 @@ function PostList ({ data: { loading, error, allPosts, _allPostsMeta }, loadMore
   return <div>Loading</div>
 }
 
-const allPosts = gql`
+export const allPosts = gql`
   query allPosts($first: Int!, $skip: Int!) {
     allPosts(orderBy: createdAt_DESC, first: $first, skip: $skip) {
       id
@@ -81,15 +81,16 @@ const allPosts = gql`
     }
   }
 `
+export const allPostsQueryVars = {
+  skip: 0,
+  first: POSTS_PER_PAGE
+}
 
 // The `graphql` wrapper executes a GraphQL query and makes the results
 // available on the `data` prop of the wrapped component (PostList)
 export default graphql(allPosts, {
   options: {
-    variables: {
-      skip: 0,
-      first: POSTS_PER_PAGE
-    }
+    variables: allPostsQueryVars
   },
   props: ({ data }) => ({
     data,

examples/with-apollo/components/Submit.js

@@ -1,5 +1,6 @@
 import { graphql } from 'react-apollo'
 import gql from 'graphql-tag'
+import {allPosts, allPostsQueryVars} from './PostList'
 
 function Submit ({ createPost }) {
   function handleSubmit (e) {
@@ -65,14 +66,9 @@ export default graphql(createPost, {
   props: ({ mutate }) => ({
     createPost: (title, url) => mutate({
       variables: { title, url },
-      updateQueries: {
-        allPosts: (previousResult, { mutationResult }) => {
-          const newPost = mutationResult.data.createPost
-          return Object.assign({}, previousResult, {
-            // Append the new post
-            allPosts: [newPost, ...previousResult.allPosts]
-          })
-        }
+      update: (proxy, { data: { createPost } }) => {
+        const data = proxy.readQuery({ query: allPosts, variables: allPostsQueryVars })
+        proxy.writeQuery({ query: allPosts, data: {allPosts: [createPost, ...data.allPosts]}, variables: allPostsQueryVars })
       }
     })
   })