move to a single instance of apollo on the server

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 => (
   <Query query={SINGLE_ITEM_QUERY} variables={{ id: props.id }}>
     {({ data: { items }, loading, error }) => {
       if (loading) return <p>Loading...</p>;
+      {
+        console.log(`---Loading: ${loading}-----`);
+        console.log('--------\n\n\n');
+      }
       const [item] = items;
       return (
         <SingleItemStyles>
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(<ComposedComponent ctx={ctx} {...composedInitialProps} />, {
+        await getDataFromTree(<ComposedComponent ctx={ctx} url={url} {...composedInitialProps} />, {
           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 (
-        <ApolloProvider client={this.apollo}>
+        <ApolloProvider client={myApollo}>
           <ComposedComponent {...this.props} />
         </ApolloProvider>
       );