From 59bdd179c34d0c5675347bd3833a2a1edf135a6e Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Thu, 29 Mar 2018 14:25:33 -0400 Subject: move to a single instance of apollo on the server --- frontend/components/SingleItem.js | 4 ++++ frontend/lib/initApollo.js | 3 +++ frontend/lib/withData.js | 31 ++++++++++++++++++++----------- 3 files changed, 27 insertions(+), 11 deletions(-) diff --git a/frontend/components/SingleItem.js b/frontend/components/SingleItem.js index 53d5b9f..d284619 100644 --- a/frontend/components/SingleItem.js +++ b/frontend/components/SingleItem.js @@ -24,6 +24,10 @@ const SingleItem = props => ( {({ data: { items }, loading, error }) => { if (loading) return

Loading...

; + { + console.log(`---Loading: ${loading}-----`); + console.log('--------\n\n\n'); + } const [item] = items; return ( diff --git a/frontend/lib/initApollo.js b/frontend/lib/initApollo.js index f8a363b..4204bdc 100644 --- a/frontend/lib/initApollo.js +++ b/frontend/lib/initApollo.js @@ -1,4 +1,5 @@ import ApolloClient from 'apollo-boost'; +import { InMemoryCache } from 'apollo-boost'; import fetch from 'isomorphic-fetch'; import { endpoint } from '../config'; @@ -12,6 +13,8 @@ let apolloClient = null; function create(initialState) { return new ApolloClient({ uri: endpoint, + cache: new InMemoryCache().restore(initialState || {}), + ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once) request: operation => { if (typeof localStorage !== 'undefined' && localStorage.getItem('token')) { operation.setContext({ diff --git a/frontend/lib/withData.js b/frontend/lib/withData.js index 76ab7d9..41cb2d4 100644 --- a/frontend/lib/withData.js +++ b/frontend/lib/withData.js @@ -10,6 +10,8 @@ function getComponentDisplayName(Component) { return Component.displayName || Component.name || 'Unknown'; } +let myApollo; + export default ComposedComponent => class WithData extends React.Component { static displayName = `WithData(${getComponentDisplayName(ComposedComponent)})`; @@ -29,12 +31,19 @@ export default ComposedComponent => // Run all GraphQL queries in the component tree // and extract the resulting data - console.log('Trying...'); - console.log(ctx.query); + const apollo = initApollo(); + myApollo = apollo; + try { + console.log('Rendering SSR'); + const url = { + query: ctx.query, + asPath: ctx.asPath, + pathname: ctx.pathname, + }; // Run all GraphQL queries - await getDataFromTree(, { + await getDataFromTree(, { router: { asPath: ctx.asPath, pathname: ctx.pathname, @@ -43,8 +52,7 @@ export default ComposedComponent => client: apollo, }); } catch (error) { - // console.log(ctx.query); - console.log('An error Happened SSR'); + console.log('An error Happened with Server Side Rendering'); console.log(error); // Prevent Apollo Client GraphQL errors from crashing SSR. // Handle them in components via the data.error prop: @@ -70,14 +78,15 @@ export default ComposedComponent => }; } - constructor(props) { - super(props); - this.apollo = initApollo(this.props.serverState.apollo.data); - } - + // constructor(props) { + // super(props); + // this.apollo = initApollo(this.props.serverState.apollo.data); + // } render() { + console.log('Second RENDER'); + console.log(myApollo); return ( - + ); -- cgit v1.3