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

with-apollo example using Apollo 2 (#3180)

* Updated dependencies related to Apollo and React.

* Updated libs with Apollo 2 new set of modules.

* Updated to Apollo 2 react integration modules.

* Updated withData to separate apollo state from the app's state.
This commit is contained in:
Sebastian 2017-10-28 05:19:56 -02:00 committed by Tim Neutkens
parent b937ed3644
commit 741f211331
6 changed files with 24 additions and 18 deletions

View file

@ -1,4 +1,5 @@
import { gql, graphql } from 'react-apollo'
import { graphql } from 'react-apollo'
import gql from 'graphql-tag'
import ErrorMessage from './ErrorMessage'
import PostUpvoter from './PostUpvoter'

View file

@ -1,5 +1,6 @@
import React from 'react'
import { gql, graphql } from 'react-apollo'
import { graphql } from 'react-apollo'
import gql from 'graphql-tag'
function PostUpvoter ({ upvote, votes, id }) {
return (

View file

@ -1,4 +1,5 @@
import { gql, graphql } from 'react-apollo'
import { graphql } from 'react-apollo'
import gql from 'graphql-tag'
function Submit ({ createPost }) {
function handleSubmit (e) {

View file

@ -1,4 +1,6 @@
import { ApolloClient, createNetworkInterface } from 'react-apollo'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import fetch from 'isomorphic-fetch'
let apolloClient = null
@ -10,14 +12,15 @@ if (!process.browser) {
function create (initialState) {
return new ApolloClient({
initialState,
connectToDevTools: process.browser,
ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once)
networkInterface: createNetworkInterface({
link: new HttpLink({
uri: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn', // Server URL (must be absolute)
opts: { // Additional fetch() options like `credentials` or `headers`
credentials: 'same-origin'
opts: {
credentials: 'same-origin' // Additional fetch() options like `credentials` or `headers`
}
})
}),
cache: new InMemoryCache().restore(initialState || {}),
})
}

View file

@ -48,12 +48,9 @@ export default ComposedComponent => {
Head.rewind()
// Extract query data from the Apollo store
const state = apollo.getInitialState()
serverState = {
apollo: {
// Only include the Apollo data state
data: state.data
data: apollo.cache.extract()
}
}
}
@ -66,7 +63,7 @@ export default ComposedComponent => {
constructor (props) {
super(props)
this.apollo = initApollo(this.props.serverState)
this.apollo = initApollo(this.props.serverState.apollo.data)
}
render () {

View file

@ -7,13 +7,16 @@
"start": "next start"
},
"dependencies": {
"graphql": "^0.9.3",
"apollo-client-preset": "^1.0.1",
"graphql": "^0.11.7",
"graphql-anywhere": "^3.1.0",
"graphql-tag": "^2.5.0",
"isomorphic-fetch": "^2.2.1",
"next": "latest",
"prop-types": "^15.5.8",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-apollo": "^1.1.3"
"react": "^16.0.0",
"react-apollo": "^2.0.0",
"react-dom": "^16.0.0"
},
"author": "",
"license": "ISC"