terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

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

Browse source
This commit is contained in:
Thomas Vogel 2017-11-16 11:18:25 +01:00 committed by Tim Neutkens
parent 7c9d350091
commit abe0aebcc0
2 changed files with 10 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
examples/with-apollo/components/PostList.js
View file

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

12
examples/with-apollo/components/Submit.js
View file

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