Merge pull request #6 from piglovesyou/use-apollo-client-2-point-5

Use apollo client 2 point 5

package.json

@@ -14,16 +14,15 @@
   ],
   "dependencies": {
     "@babel/polyfill": "^7.0.0",
-    "apollo-cache-inmemory": "^1.2.10",
-    "apollo-client": "^2.4.2",
-    "apollo-link": "^1.2.3",
-    "apollo-link-error": "^1.1.1",
-    "apollo-link-http": "^1.5.5",
+    "apollo-cache-inmemory": "^1.5.0",
+    "apollo-client": "^2.5.0",
+    "apollo-link": "^1.2.8",
+    "apollo-link-error": "^1.1.7",
+    "apollo-link-http": "^1.5.11",
     "apollo-link-logger": "^1.2.3",
-    "apollo-link-schema": "^1.1.1",
-    "apollo-link-state": "^0.4.2",
-    "apollo-server": "^2.1.0",
-    "apollo-server-express": "^2.1.0",
+    "apollo-link-schema": "^1.1.6",
+    "apollo-server": "^2.4.8",
+    "apollo-server-express": "^2.4.8",
     "body-parser": "^1.18.3",
     "classnames": "^2.2.6",
     "cookie-parser": "^1.4.3",
@@ -43,7 +42,7 @@
     "prop-types": "^15.6.2",
     "query-string": "^6.1.0",
     "react": "^16.5.2",
-    "react-apollo": "^2.1.11",
+    "react-apollo": "^2.5.0",
     "react-dom": "^16.5.2",
     "sequelize": "^4.38.1",
     "serialize-javascript": "^1.5.0",

src/core/createApolloClient/createApolloClient.client.js

@@ -3,21 +3,18 @@ import { from } from 'apollo-link';
 import { onError } from 'apollo-link-error';
 import { HttpLink } from 'apollo-link-http';
 import apolloLogger from 'apollo-link-logger';
-import { withClientState } from 'apollo-link-state';
+import gql from 'graphql-tag';
 import createCache from './createCache';
-import { resolvers as clientSideResolvers } from '../../data/graphql/OnMemoryState/schema';
+import {
+  resolvers as clientResolvers,
+  schema as clientSchema,
+} from '../../data/graphql/OnMemoryState/schema';
 
 export default function createApolloClient() {
-  const cache = createCache();
-
-  const stateLink = withClientState({
-    cache,
-    defaults: window.App.initialState,
-    resolvers: clientSideResolvers,
-  });
+  // Restore cache defaults to make the same one in server.js
+  const cache = createCache().restore(window.App.cache);
 
   const link = from([
-    stateLink,
     onError(({ graphQLErrors, networkError }) => {
       if (graphQLErrors)
         graphQLErrors.map(({ message, locations, path }) =>
@@ -36,7 +33,9 @@ export default function createApolloClient() {
 
   return new ApolloClient({
     link,
-    cache: cache.restore(window.App.cache),
+    cache,
+    typeDefs: gql(clientSchema),
+    resolvers: clientResolvers,
     queryDeduplication: true,
     connectToDevTools: true,
   });

src/core/createApolloClient/createApolloClient.server.js

@@ -1,19 +1,24 @@
 import { ApolloClient } from 'apollo-client';
 import { from } from 'apollo-link';
-import { withClientState } from 'apollo-link-state';
 import { onError } from 'apollo-link-error';
 import { SchemaLink } from 'apollo-link-schema';
+import merge from 'lodash.merge';
+import gql from 'graphql-tag';
 import createCache from './createCache';
+import {
+  resolvers as clientResolvers,
+  schema as clientSchema,
+  defaults as cacheDefaults,
+} from '../../data/graphql/OnMemoryState/schema';
 
-export default function createApolloClient(schema, initialState) {
+export default function createApolloClient(schema, partialCacheDefaults) {
   const cache = createCache();
-  const stateLink = withClientState({
-    cache,
-    defaults: initialState,
-    resolvers: {},
+
+  cache.writeData({
+    data: merge(cacheDefaults, partialCacheDefaults),
   });
+
   const link = from([
-    stateLink,
     onError(({ graphQLErrors, networkError }) => {
       if (graphQLErrors)
         graphQLErrors.map(({ message, locations, path }) =>
@@ -29,6 +34,8 @@ export default function createApolloClient(schema, initialState) {
   return new ApolloClient({
     link,
     cache,
+    typeDefs: gql(clientSchema),
+    resolvers: clientResolvers,
     ssrMode: true,
     queryDeduplication: true,
   });

src/data/graphql/OnMemoryState/schema.js

@@ -8,12 +8,16 @@ import {
   mutations as networkStatusMutation,
 } from './networkStatus';
 
-// Below are used for apollo-link-state and not used in GraphQL server.
+import { schema as userSchema, queries as userQueries } from './user';
+
+// Used by both GraphQL Server and Apollo Client
+export const schema = [...userSchema, ...networkStatusSchema];
+
+// Below are only used by Apollo Client
 export const defaults = merge(networkStatusDefaults);
 export const resolvers = merge(networkStatusResolvers);
 
-// Below are used for GraphQL introspection that generates Flow types by apollo:codegen.
-// These are not used in runtime.
-export const schema = merge(networkStatusSchema);
-export const queries = merge(networkStatusQuery);
-export const mutations = merge(networkStatusMutation);
+// Below are used by GraphQL Server for Introspection
+// that generates Flow types by apollo:codegen.
+export const queries = [...networkStatusQuery, ...userQueries];
+export const mutations = [...networkStatusMutation];

src/data/graphql/OnMemoryState/user.js

@@ -0,0 +1,13 @@
+export const schema = [
+  `
+  type User {
+    id: String!
+  }
+`,
+];
+
+export const queries = [
+  `
+  user: User
+`,
+];

src/server.js

@@ -30,7 +30,6 @@ import schema from './data/schema';
 // import assets from './asset-manifest.json'; // eslint-disable-line import/no-unresolved
 import chunks from './chunk-manifest.json'; // eslint-disable-line import/no-unresolved
 import config from './config';
-import createInitialState from './core/createInitialState';
 
 process.on('unhandledRejection', (reason, p) => {
   console.error('Unhandled Rejection at:', p, 'reason:', reason);
@@ -134,17 +133,15 @@ app.get('*', async (req, res, next) => {
       styles.forEach(style => css.add(style._getCss()));
     };
 
-    const initialState = createInitialState({
-      user: req.user || null,
-    });
-
     const apolloClient = createApolloClient(
       {
         schema: makeExecutableSchema(schema),
         // This is a context consumed in GraphQL Resolvers
         context: { req },
       },
-      initialState,
+      {
+        user: req.user || null,
+      },
     );
 
     // Global (context) variables that can be easily accessed from any React component
@@ -186,10 +183,9 @@ app.get('*', async (req, res, next) => {
     data.scripts = Array.from(scripts);
     data.app = {
       apiUrl: config.api.clientUrl,
-      // Cache for client-side apolloClient
-      cache: context.client.extract(),
-      // Initial state for client-side stateLink
-      initialState,
+
+      // To restore apollo cache in client.js
+      cache: apolloClient.extract(),
     };
 
     const html = ReactDOM.renderToStaticMarkup(<Html {...data} />);