1- import ApolloClient , { createNetworkInterface } from 'apollo-client'
1+ import 'isomorphic-unfetch'
2+ import ApolloClient from 'apollo-client'
3+ import { HttpLink } from 'apollo-link-http'
4+ import { ApolloLink } from 'apollo-link'
5+ import { InMemoryCache } from 'apollo-cache-inmemory'
26import { ApolloProvider , getDataFromTree } from 'react-apollo'
37import React from 'react'
4- import { defaultProps } from 'recompose'
5- import { createStore as createReduxStore , combineReducers , applyMiddleware } from 'redux'
68
79let client = null
8- let store = null
910
10- const createClient = ( uri , opts ) => {
11- const networkInterface = createNetworkInterface ( {
11+ const getBrowserClient = ( uri , cacheOpts , initialData ) => {
12+ const link = new HttpLink ( {
1213 uri,
13- opts : {
14- credentials : 'include'
15- }
14+ credentials : 'include'
15+ } )
16+ const cache = new InMemoryCache ( cacheOpts )
17+ if ( initialData ) {
18+ cache . restore ( initialData )
19+ }
20+ return new ApolloClient ( {
21+ link,
22+ cache,
1623 } )
17- return new ApolloClient ( Object . assign ( { } , opts , {
18- networkInterface
19- } ) )
2024}
2125
22- const createSSRClient = ( uri , cookies , opts ) => {
23- const networkInterface = createNetworkInterface ( {
26+ const getServerClient = ( uri , cookies , cacheOpts ) => {
27+ let link = new HttpLink ( {
2428 uri
2529 } )
26- networkInterface . use ( [ {
27- applyMiddleware ( req , next ) {
28- if ( ! req . options . headers ) {
29- req . options . headers = { }
30- }
31- req . options . headers [ 'Cookie' ] = Object . keys ( cookies ) . map ( key => `${ key } ${ cookies [ key ] } ) . join ( '; ' )
32- next ( )
33- }
34- } ] )
35- return new ApolloClient ( Object . assign ( { } , opts , {
30+ if ( cookies && Object . keys ( cookies ) . length ) {
31+ const middlewareLink = new ApolloLink ( ( operation , forward ) => {
32+ operation . setContext ( {
33+ headers : {
34+ Cookie : Object . keys ( cookies ) . map ( key => `${ key } ${ cookies [ key ] } ) . join ( '; ' ) ,
35+ } ,
36+ } )
37+ return forward ( operation )
38+ } )
39+ link = middlewareLink . concat ( link ) ;
40+ }
41+
42+ const cache = new InMemoryCache ( cacheOpts )
43+
44+ return new ApolloClient ( {
3645 ssrMode : true ,
37- networkInterface
38- } ) )
46+ link,
47+ cache,
48+ } )
3949}
4050
41- const initClient = ( uri , cookies , opts ) => {
51+ const getClient = ( uri , cookies , cacheOpts , initialData ) => {
4252 if ( ! process . browser ) {
4353 // on server, create a new client for each request
44- return createSSRClient ( uri , cookies , opts )
54+ return getServerClient ( uri , cookies , cacheOpts )
4555 } else {
4656 // on client, create singleton
4757 if ( ! client ) {
48- client = createClient ( uri , opts )
58+ client = getBrowserClient ( uri , cacheOpts , initialData )
4959 }
5060 return client
5161 }
5262}
5363
54- const createStore = ( client , initialState ) => {
55- return createReduxStore (
56- combineReducers ( {
57- apollo : client . reducer ( )
58- } ) ,
59- initialState ,
60- applyMiddleware ( client . middleware ( ) )
61- )
62- }
63-
64- const initStore = ( client , initialState ) => {
65- if ( ! process . browser ) {
66- // on server, create a new store for each request
67- return createStore ( client , initialState )
68- } else {
69- // on client, create singleton
70- if ( ! store ) {
71- store = createStore ( client , initialState )
72- }
73- return store
74- }
75- }
76-
7764module . exports = ( { url, opts} ) => {
7865 return ( Component ) => (
7966 class extends React . Component {
8067 static getInitialProps ( ctx ) {
8168 const cookies = ctx . req && ctx . req . cookies
82- const client = initClient ( url , cookies , opts )
83- const store = initStore ( client , client . initialState )
69+ const client = getClient ( url , cookies , opts )
8470
8571 return Promise . resolve ( Component . getInitialProps ? Component . getInitialProps ( ctx ) : { } )
8672 . then ( props => {
@@ -93,41 +79,30 @@ module.exports = ({url, opts}) => {
9379 asPath : ctx . asPath
9480 }
9581 const app = (
96- < ApolloProvider client = { client } store = { store } >
82+ < ApolloProvider client = { client } >
9783 < Component url = { url } { ...props } />
9884 </ ApolloProvider >
9985 )
10086 return getDataFromTree ( app )
10187 }
10288 } )
10389 . then ( ( ) => {
104- const state = store . getState ( )
105-
106- return Object . assign ( {
107- initialState : Object . assign (
108- { } ,
109- state ,
110- {
111- apollo : {
112- data : client . getInitialState ( ) . data
113- }
114- }
115- )
116- } , props )
90+ return {
91+ initialData : client . cache . extract ( ) ,
92+ }
11793 } )
11894 } )
11995 }
12096
12197 constructor ( props ) {
12298 super ( props )
12399 // On server, this client won't be doing any work, because all work has been done in getInitialProps
124- this . client = initClient ( url , { } , opts )
125- this . store = initStore ( this . client , props . initialState )
100+ this . client = getClient ( url , { } , opts , props . initialData )
126101 }
127102
128103 render ( ) {
129104 return (
130- < ApolloProvider client = { this . client } store = { this . store } >
105+ < ApolloProvider client = { this . client } >
131106 < Component { ...this . props } />
132107 </ ApolloProvider >
133108 )
@@ -136,4 +111,4 @@ module.exports = ({url, opts}) => {
136111 )
137112}
138113
139- module . exports . clear = ( ) => client = null
114+ module . exports . clear = ( ) => client = null
0 commit comments