diff --git a/examples/with-apollo/components/PostList.js b/examples/with-apollo/components/PostList.js index ecd59292..8d939ae9 100644 --- a/examples/with-apollo/components/PostList.js +++ b/examples/with-apollo/components/PostList.js @@ -67,7 +67,7 @@ function PostList ({ data: { loading, error, allPosts, _allPostsMeta }, loadMore return
Loading
} -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, diff --git a/examples/with-apollo/components/Submit.js b/examples/with-apollo/components/Submit.js index 792d3b5d..527ff33c 100644 --- a/examples/with-apollo/components/Submit.js +++ b/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 }) } }) })