wip

3 files changed, 106 insertions, 68 deletions

diff --git a/frontend/lib/initApollo-OLD.js b/frontend/lib/initApollo-OLD.js
new file mode 100644
index 0000000..e86c7e1
--- /dev/null
+++ b/frontend/lib/initApollo-OLD.js
@@ -0,0 +1,92 @@
+import { ApolloClient } from 'apollo-client';
+import { ApolloLink, from } from 'apollo-link';
+import { HttpLink } from 'apollo-link-http';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+import fetch from 'isomorphic-fetch';
+import { withClientState } from 'apollo-link-state';
+import { endpoint } from '../config';
+
+let apolloClient = null;
+
+// Polyfill fetch() on the server (used by apollo-client)
+if (!process.browser) {
+  global.fetch = fetch;
+}
+
+function create(initialState) {
+  // Create a new Cache
+  const cache = new InMemoryCache().restore(initialState || {});
+  // First we create three peices of middleware
+  const stateLink = withClientState({
+    cache,
+    defaults: {
+      uiData: {
+        __typename: 'UIData',
+        isConnected: true,
+        isCartOpen: false,
+      },
+    },
+    resolvers: {
+      Mutation: {
+        setLocalData: (_, values, { cache }) => {
+          const data = {
+            uiData: {
+              __typename: 'UIData',
+              ...values,
+            },
+          };
+          cache.writeData({ data });
+          return null;
+        },
+      },
+    },
+  });
+
+  // 1. Create a link for local state to be managed in Apollo
+
+  // 2. connect to our GraphQL API
+  const httpLink = new HttpLink({
+    uri: endpoint, // Server URL (must be absolute)
+    opts: {
+      credentials: 'same-origin',
+    },
+  });
+
+  // 3. One to tack on our auth token on each request
+  const authMiddleware = new ApolloLink((operation, forward) => {
+    const headers = {};
+
+    if (typeof localStorage !== 'undefined' && localStorage.getItem('token')) {
+      headers.authorization = `Bearer ${localStorage.getItem('token')}`;
+    }
+
+    operation.setContext({ headers });
+    return forward(operation);
+  });
+
+  return new ApolloClient({
+    connectToDevTools: process.browser,
+    ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once)
+    link: from([stateLink, authMiddleware, httpLink]),
+    cache,
+    defaultOptions: {
+      query: { errorPolicy: 'all' },
+      mutate: { errorPolicy: 'all' },
+    },
+  });
+}
+
+export default function initApollo(initialState) {
+  // Make sure to create a new client for every server-side request so that data
+  // isn't shared between connections (which would be bad)
+  if (!process.browser) {
+    return create(initialState);
+  }
+
+  // Reuse client on the client-side
+  if (!apolloClient) {
+    apolloClient = create(initialState);
+  }
+
+  return apolloClient;
+}
diff --git a/frontend/lib/initApollo.js b/frontend/lib/initApollo.js
index e86c7e1..f8a363b 100644
--- a/frontend/lib/initApollo.js
+++ b/frontend/lib/initApollo.js
@@ -1,77 +1,25 @@
-import { ApolloClient } from 'apollo-client';
-import { ApolloLink, from } from 'apollo-link';
-import { HttpLink } from 'apollo-link-http';
-import { InMemoryCache } from 'apollo-cache-inmemory';
+import ApolloClient from 'apollo-boost';
 import fetch from 'isomorphic-fetch';
-import { withClientState } from 'apollo-link-state';
 import { endpoint } from '../config';
 
-let apolloClient = null;
-
 // Polyfill fetch() on the server (used by apollo-client)
 if (!process.browser) {
   global.fetch = fetch;
 }
 
-function create(initialState) {
-  // Create a new Cache
-  const cache = new InMemoryCache().restore(initialState || {});
-  // First we create three peices of middleware
-  const stateLink = withClientState({
-    cache,
-    defaults: {
-      uiData: {
-        __typename: 'UIData',
-        isConnected: true,
-        isCartOpen: false,
-      },
-    },
-    resolvers: {
-      Mutation: {
-        setLocalData: (_, values, { cache }) => {
-          const data = {
-            uiData: {
-              __typename: 'UIData',
-              ...values,
-            },
-          };
-          cache.writeData({ data });
-          return null;
-        },
-      },
-    },
-  });
-
-  // 1. Create a link for local state to be managed in Apollo
-
-  // 2. connect to our GraphQL API
-  const httpLink = new HttpLink({
-    uri: endpoint, // Server URL (must be absolute)
-    opts: {
-      credentials: 'same-origin',
-    },
-  });
-
-  // 3. One to tack on our auth token on each request
-  const authMiddleware = new ApolloLink((operation, forward) => {
-    const headers = {};
-
-    if (typeof localStorage !== 'undefined' && localStorage.getItem('token')) {
-      headers.authorization = `Bearer ${localStorage.getItem('token')}`;
-    }
-
-    operation.setContext({ headers });
-    return forward(operation);
-  });
+let apolloClient = null;
 
+function create(initialState) {
   return new ApolloClient({
-    connectToDevTools: process.browser,
-    ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once)
-    link: from([stateLink, authMiddleware, httpLink]),
-    cache,
-    defaultOptions: {
-      query: { errorPolicy: 'all' },
-      mutate: { errorPolicy: 'all' },
+    uri: endpoint,
+    request: operation => {
+      if (typeof localStorage !== 'undefined' && localStorage.getItem('token')) {
+        operation.setContext({
+          headers: {
+            authorization: `Bearer ${localStorage.getItem('token')}`,
+          },
+        });
+      }
     },
   });
 }
diff --git a/frontend/lib/withData.js b/frontend/lib/withData.js
index 0c68f49..b784653 100644
--- a/frontend/lib/withData.js
+++ b/frontend/lib/withData.js
@@ -12,6 +12,7 @@ function getComponentDisplayName(Component) {
 export default ComposedComponent =>
   class WithData extends React.Component {
     static displayName = `WithData(${getComponentDisplayName(ComposedComponent)})`;
+
     static propTypes = {
       serverState: PropTypes.object.isRequired,
     };
@@ -61,10 +62,7 @@ export default ComposedComponent =>
       };
     }
 
-    constructor(props) {
-      super(props);
-      this.apollo = initApollo(this.props.serverState.apollo.data);
-    }
+    apollo = initApollo(this.props.serverState.apollo.data);
 
     render() {
       return (