TRACKING: feature/redux → feature/apollo

.eslintrc.js

@@ -46,6 +46,15 @@ module.exports = {
       },
     ],
 
+    // Allow only special identifiers
+    // https://eslint.org/docs/rules/no-underscore-dangle
+    'no-underscore-dangle': [
+      'error',
+      {
+        allow: ['__typename'],
+      },
+    ],
+
     // Prefer destructuring from arrays and objects
     // http://eslint.org/docs/rules/prefer-destructuring
     'prefer-destructuring': [

jest.config.js

@@ -91,6 +91,7 @@ module.exports = {
 
   transform: {
     '\\.(js|jsx)$': '<rootDir>/node_modules/babel-jest',
+    '\\.(gql|graphql)$': '<rootDir>/node_modules/jest-transform-graphql',
     '^(?!.*\\.(js|jsx|json|css|less|styl|scss|sass|sss)$)':
       '<rootDir>/tools/lib/fileTransformer.js',
   },

package.json

@@ -9,6 +9,13 @@
   "browserslist": [">1%", "last 4 versions", "Firefox ESR", "not ie < 9"],
   "dependencies": {
     "@babel/polyfill": "^7.0.0-beta.42",
+    "apollo-cache-inmemory": "^1.1.4",
+    "apollo-client": "^2.0.4",
+    "apollo-link": "^1.0.7",
+    "apollo-link-error": "^1.0.3",
+    "apollo-link-http": "^1.3.2",
+    "apollo-link-logger": "^1.1.0",
+    "apollo-link-schema": "^1.0.1",
     "bluebird": "^3.5.1",
     "body-parser": "^1.18.2",
     "classnames": "^2.2.5",
@@ -18,9 +25,12 @@
     "express-graphql": "^0.6.12",
     "express-jwt": "^5.3.1",
     "graphql": "^0.13.2",
+    "graphql-tag": "^2.6.1",
+    "graphql-tools": "^2.16.0",
     "history": "^4.7.2",
     "isomorphic-style-loader": "^4.0.0",
     "jsonwebtoken": "^8.2.0",
+    "lodash": "^4.17.5",
     "node-fetch": "^2.1.1",
     "normalize.css": "^8.0.0",
     "passport": "^0.4.0",
@@ -29,6 +39,7 @@
     "prop-types": "^15.6.1",
     "query-string": "^6.0.0",
     "react": "^16.2.0",
+    "react-apollo": "^2.0.4",
     "react-dom": "^16.2.0",
     "react-redux": "^5.0.6",
     "redux": "^3.7.2",
@@ -79,6 +90,9 @@
     "husky": "^0.14.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^22.4.3",
+    "jest-codemods": "^0.13.9",
+    "jest-transform-graphql": "^2.1.0",
+    "jscodeshift": "^0.5.0",
     "lint-staged": "^7.0.0",
     "markdown-it": "^8.4.1",
     "mkdirp": "^0.5.1",

src/client.js

@@ -16,10 +16,18 @@ import { createPath } from 'history/PathUtils';
 import App from './components/App';
 import createFetch from './createFetch';
 import configureStore from './store/configureStore';
-import history from './history';
 import { updateMeta } from './DOMUtils';
+import history from './history';
+import createApolloClient from './core/createApolloClient';
 import router from './router';
 
+// Universal HTTP client
+const fetch = createFetch(window.fetch, {
+  baseUrl: window.App.apiUrl,
+});
+
+const apolloClient = createApolloClient();
+
 // Global (context) variables that can be easily accessed from any React component
 // https://facebook.github.io/react/docs/context.html
 const context = {
@@ -32,13 +40,12 @@ const context = {
       removeCss.forEach(f => f());
     };
   },
-  // Universal HTTP client
-  fetch: createFetch(fetch, {
-    baseUrl: window.App.apiUrl,
-  }),
+  // For react-apollo
+  client: apolloClient,
   // Initialize a new Redux store
   // http://redux.js.org/docs/basics/UsageWithReact.html
-  store: configureStore(window.App.state, { history }),
+  store: configureStore(window.App.state, { fetch, history }),
+  fetch,
   storeSubscription: null,
 };
 

src/components/App.js

@@ -10,6 +10,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Provider as ReduxProvider } from 'react-redux';
+import { ApolloProvider } from 'react-apollo';
 
 const ContextType = {
   // Enables critical path CSS rendering
@@ -22,6 +23,8 @@ const ContextType = {
   // Integrate Redux
   // http://redux.js.org/docs/basics/UsageWithReact.html
   ...ReduxProvider.childContextTypes,
+  // Apollo Client
+  client: PropTypes.object.isRequired,
 };
 
 /**
@@ -59,9 +62,13 @@ class App extends React.PureComponent {
   }
 
   render() {
+    // Here, we are at universe level, sure? ;-)
+    const { client } = this.props.context;
     // NOTE: If you need to add or modify header, footer etc. of the app,
     // please do that inside the Layout component.
-    return React.Children.only(this.props.children);
+    return (
+      <ApolloProvider client={client}>{this.props.children}</ApolloProvider>
+    );
   }
 }
 

src/components/Layout/Layout.test.js

@@ -14,6 +14,7 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
+import createApolloClient from '../../core/createApolloClient';
 import App from '../App';
 import Layout from './Layout';
 
@@ -24,6 +25,8 @@ const initialState = {};
 describe('Layout', () => {
   test('renders children correctly', () => {
     const store = mockStore(initialState);
+    const client = createApolloClient();
+
     const wrapper = renderer
       .create(
         <App
@@ -32,6 +35,7 @@ describe('Layout', () => {
             fetch: () => {},
             pathname: '',
             store,
+            client,
           }}
         >
           <Layout>

src/core/createApolloClient/createApolloClient.client.js

@@ -0,0 +1,36 @@
+// @flow
+
+import { ApolloClient } from 'apollo-client';
+import { from } from 'apollo-link';
+import { onError } from 'apollo-link-error';
+import { HttpLink } from 'apollo-link-http';
+import apolloLogger from 'apollo-link-logger';
+import createCache from './createCache';
+
+const link = from([
+  onError(({ graphQLErrors, networkError }) => {
+    if (graphQLErrors)
+      graphQLErrors.map(({ message, locations, path }) =>
+        console.warn(
+          `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
+        ),
+      );
+    if (networkError) console.warn(`[Network error]: ${networkError}`);
+  }),
+  ...(__DEV__ ? [apolloLogger] : []),
+  new HttpLink({
+    uri: '/graphql',
+    credentials: 'include',
+  }),
+]);
+
+const cache = createCache();
+
+export default function createApolloClient() {
+  return new ApolloClient({
+    link,
+    cache: cache.restore(window.App.apolloState),
+    queryDeduplication: true,
+    connectToDevTools: true,
+  });
+}

src/core/createApolloClient/createApolloClient.server.js

@@ -0,0 +1,29 @@
+// @flow
+
+import { ApolloClient } from 'apollo-client';
+import { from } from 'apollo-link';
+import { onError } from 'apollo-link-error';
+import { SchemaLink } from 'apollo-link-schema';
+import createCache from './createCache';
+
+export default function createApolloClient(schema) {
+  const link = from([
+    onError(({ graphQLErrors, networkError }) => {
+      if (graphQLErrors)
+        graphQLErrors.map(({ message, locations, path }) =>
+          console.warn(
+            `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
+          ),
+        );
+      if (networkError) console.warn(`[Network error]: ${networkError}`);
+    }),
+    new SchemaLink({ ...schema }),
+  ]);
+
+  return new ApolloClient({
+    link,
+    cache: createCache(),
+    ssrMode: true,
+    queryDeduplication: true,
+  });
+}

src/core/createApolloClient/createCache.js

@@ -0,0 +1,19 @@
+// @flow
+
+import { InMemoryCache, defaultDataIdFromObject } from 'apollo-cache-inmemory';
+
+function dataIdFromObject(obj) {
+  switch (obj.__typename) {
+    case 'NewsItem':
+      return obj.link ? `NewsItem:${obj.link}` : defaultDataIdFromObject(obj);
+    default:
+      return defaultDataIdFromObject(obj);
+  }
+}
+
+export default function createCache() {
+  // https://www.apollographql.com/docs/react/basics/caching.html#configuration
+  return new InMemoryCache({
+    dataIdFromObject,
+  });
+}

src/core/createApolloClient/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "createApolloClient",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./createApolloClient.server.js",
+  "browser": "./createApolloClient.client.js"
+}

src/data/graphql/Database/schema.js

@@ -0,0 +1,31 @@
+import { merge } from 'lodash';
+
+/** * Queries ** */
+import {
+  schema as GetAllUsers,
+  queries as GetAllUsersQueries,
+  resolvers as GetAllUsersResolver,
+} from './users/GetAllUsers';
+import {
+  queries as GetLoggedInUserQueries,
+  resolvers as GetLoggedInUserResolver,
+} from './users/GetLoggedInUser';
+
+/** * Mutations ** */
+import {
+  schema as CreateUserInput,
+  mutation as CreateUser,
+  resolvers as CreateUserResolver,
+} from './users/CreateUser';
+
+export const schema = [...GetAllUsers, ...CreateUserInput];
+
+export const queries = [...GetAllUsersQueries, ...GetLoggedInUserQueries];
+
+export const mutations = [...CreateUser];
+
+export const resolvers = merge(
+  GetAllUsersResolver,
+  GetLoggedInUserResolver,
+  CreateUserResolver,
+);

src/data/graphql/Database/users/CreateUser.js

@@ -0,0 +1,65 @@
+import { User, UserProfile } from 'data/models';
+
+export const schema = [
+  `
+  # User profile data for creating a new local database user account
+  input UserProfile {
+    # A display name for the logged-in user
+    displayName: String!
+
+    # A profile picture URL
+    picture: String
+
+    # The user's gender
+    gender: String
+
+    # The user's location
+    location: String
+
+    # A website URL
+    website: String
+  }
+`,
+];
+
+export const mutation = [
+  `
+  # Creates a new user and profile in the local database
+  databaseCreateUser(
+    # The email of the new user, this email must be unique in the database
+    email: String!
+
+    # User profile information for creating a new local database user account
+    profile: UserProfile!
+  ): DatabaseUser
+`,
+];
+
+export const resolvers = {
+  Mutation: {
+    async databaseCreateUser(parent, args) {
+      // If user already exists, throw error
+      const lookupUser = await User.findOne({ where: { email: args.email } });
+
+      if (lookupUser) {
+        // eslint-disable-next-line no-throw-literal
+        throw 'User already exists!';
+      }
+
+      // Create new user with profile in database
+      const user = await User.create(
+        {
+          email: args.email,
+          profile: {
+            ...args.profile,
+          },
+        },
+        {
+          include: [{ model: UserProfile, as: 'profile' }],
+        },
+      );
+
+      return user;
+    },
+  },
+};