[Toolchain] Update Relay to support new TypeScript compiler option

.babelrc

@@ -1,7 +1,7 @@
 {
   "presets": ["es2015", "stage-3", "react"],
   "plugins": [
-    ["relay", { "compat": true, "schema": "data/schema.graphql" }],
+    ["relay", { "artifactDirectory": "./src/__generated__" }],
     [
       "styled-components",
       {

.gitattributes

@@ -0,0 +1 @@
+src/__generated__/*.graphql.ts linguist-generated

.gitignore

@@ -1,18 +1,17 @@
-node_modules
+.DS_Store
 .awcache
-.fusebox
+.cache-loader/
 .env
-out*
-dist
-.DS_Store
 .storybook/.DS_Store
-assets/reaction-force.js
 .storybook/manager.js
-reaction-force.js
-reaction-force.js.map
-dist
 .vscode/cSpell.json
-yarn-error.log
+assets/reaction-force.js
+dist
+dist
+node_modules
 npm-debug.log
-__generated__
+out*
 package-lock.json
+reaction-force.js
+reaction-force.js.map
+yarn-error.log

.storybook/webpack.config.js

@@ -3,12 +3,13 @@ const fs = require("fs")
 const path = require("path")
 const sharify = require("./sharify")
 
+const ForkTsCheckerNotifierWebpackPlugin = require("fork-ts-checker-notifier-webpack-plugin")
+const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin")
+
 const webpack = require("webpack")
 const merge = require("webpack-merge")
 const genDefaultConfig = require("@storybook/react/dist/server/config/defaults/webpack.config.js")
 
-const { CheckerPlugin } = require("awesome-typescript-loader")
-
 env.load()
 
 /**
@@ -26,7 +27,20 @@ const sharifyPath = sharify({
   METAPHYSICS_ENDPOINT,
 })
 
-const plugins = [new CheckerPlugin()]
+const plugins = [
+  new ForkTsCheckerWebpackPlugin({
+    formatter: "codeframe",
+    formatterOptions: "highlightCode",
+    tslint: false,
+    checkSyntacticErrors: true,
+    watch: ["./src"],
+  }),
+  new ForkTsCheckerNotifierWebpackPlugin({
+    excludeWarnings: true,
+    skipFirstNotification: true,
+  }),
+]
+
 if (USER_ID && USER_ACCESS_TOKEN) {
   plugins.push(
     new webpack.DefinePlugin({
@@ -45,8 +59,11 @@ if (USER_ID && USER_ACCESS_TOKEN) {
 
 module.exports = (baseConfig, env) => {
   const config = genDefaultConfig(baseConfig, env)
+
   // The progress plugin does not play nice with `concurrently`, so remove it.
-  config.plugins = config.plugins.filter(({ constructor }) => constructor.name !== "ProgressPlugin")
+  config.plugins = config.plugins.filter(({ constructor }) => {
+    return constructor.name !== "ProgressPlugin"
+  })
 
   const merged = merge(config, {
     devtool: WEBPACK_DEVTOOL,
@@ -62,19 +79,23 @@ module.exports = (baseConfig, env) => {
     module: {
       rules: [
         {
+          test: /\.tsx?$/,
           exclude: [/node_modules/, /__tests__/],
           use: [
+            { loader: "cache-loader" },
             {
-              loader: "awesome-typescript-loader",
+              loader: "babel-loader",
               options: {
-                transpileOnly: true, // FIXME: This is only for the duration of fixing all build issues during Relay migration.
-                useBabel: true,
-                useCache: true,
-                useTranspileModule: true, // Supposedly faster, won’t work if/when we emit TS declaration files.
+                cacheDirectory: true,
+              },
+            },
+            {
+              loader: "ts-loader",
+              options: {
+                happyPackMode: true,
               },
             },
           ],
-          test: /\.tsx?$/,
         },
       ],
     },

package.json

@@ -23,18 +23,19 @@
     "styled-components": "^3.1.5"
   },
   "scripts": {
-    "compile": "env GRAPHQL_NO_NAME_WARNING=true yarn relay && gulp",
+    "compile": "yarn relay && gulp",
     "deploy-storybook": "yarn relay && NODE_ENV=production storybook-to-ghpages",
     "lint": "tslint -c tslint.json --project tsconfig.json",
+    "prepare": "patch-package",
     "precommit": "lint-staged",
     "prepublishOnly": "rm -rf dist && npm run compile",
     "prepush": "yarn run type-check",
     "prettier": "prettier",
     "prettier-project": "yarn run prettier-write 'src/**/*.{ts,tsx}'",
     "prettier-write": "yarn run prettier --write",
-    "relay": "env GRAPHQL_NO_NAME_WARNING=true relay-compiler --src ./src --schema data/schema.graphql --extensions ts tsx",
+    "relay": "relay-compiler --src ./src --schema data/schema.graphql --language typescript --artifactDirectory ./src/__generated__",
     "start": "yarn storybook",
-    "storybook": "node verify-node-version.js && concurrently --kill-others 'yarn relay --watch' 'env GRAPHQL_NO_NAME_WARNING=true start-storybook -p 9001'",
+    "storybook": "node verify-node-version.js && concurrently --kill-others 'yarn relay --watch' 'start-storybook -p 9001'",
     "sync-colors": "cd externals/elan && git fetch && git checkout origin/master && cp components/lib/variables/colors.json ../../data",
     "sync-schema": "cd externals/metaphysics && git fetch && git checkout origin/master && yarn install && npm run dump-schema -- ../../data",
     "sync-schema:localhost": "cd ../metaphysics && yarn dump-schema -- ../reaction/data",
@@ -43,6 +44,13 @@
     "type-check": "tsc --noEmit --pretty",
     "watch": "gulp watch"
   },
+  "resolutions": {
+    "graphql": "^0.12.3",
+    "babel-plugin-relay": "https://github.com/alloy/relay/releases/download/v1.5.0-plugin.2/babel-plugin-relay-1.5.0-plugin.2.tgz",
+    "relay-compiler": "https://github.com/alloy/relay/releases/download/v1.5.0-plugin.2/relay-compiler-1.5.0-plugin.2.tgz",
+    "relay-runtime": "https://github.com/alloy/relay/releases/download/v1.5.0-plugin.2/relay-runtime-1.5.0-plugin.2.tgz",
+    "react-relay": "https://github.com/alloy/relay/releases/download/v1.5.0-plugin.2/react-relay-1.5.0-plugin.2.tgz"
+  },
   "devDependencies": {
     "@playlyfe/gql": "^2.3.2",
     "@storybook/addon-options": "^3.2.1",
@@ -55,24 +63,27 @@
     "@types/prop-types": "^15.5.1",
     "@types/react": "^16.0.31",
     "@types/react-dom": "^16.0.3",
-    "@types/react-relay": "^1.3.1",
+    "@types/react-relay": "^1.3.3",
     "@types/react-slick": "^0.14.1",
     "@types/react-test-renderer": "^15.4.4",
-    "@types/relay-runtime": "^1.3.0",
+    "@types/relay-runtime": "^1.3.2",
     "@types/storybook__react": "^3.0.5",
-    "awesome-typescript-loader": "^3.1.2",
     "babel-core": "^6.24.0",
-    "babel-plugin-relay": "https://github.com/alloy/relay/releases/download/v1.3.0-artsy/babel-plugin-relay-1.3.0-artsy.1.tgz",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-relay": "https://github.com/alloy/relay/releases/download/v1.5.0-artsy.1/babel-plugin-relay-1.5.0-artsy.1.tgz",
     "babel-plugin-styled-components": "^1.4.0",
     "babel-preset-es2015": "^6.22.0",
     "babel-preset-react": "^6.22.0",
     "babel-preset-stage-3": "^6.22.0",
     "babel-template": "^6.2.0",
     "babel-types": "^6.2.0",
+    "cache-loader": "^1.2.0",
     "concurrently": "^3.5.0",
     "dotenv": "^4.0.0",
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-16": "^1.0.1",
+    "fork-ts-checker-notifier-webpack-plugin": "^0.2.0",
+    "fork-ts-checker-webpack-plugin": "^0.3.0",
     "graphql-config-parser": "^1.2.1",
     "gulp": "^3.9.1",
     "gulp-babel": "^6.1.2",
@@ -86,14 +97,18 @@
     "jest": "^22.1.4",
     "jest-styled-components": "^4.11.0-1",
     "lint-staged": "^4.0.0",
+    "patch-package": "^5.0.0",
+    "postinstall-prepare": "^1.0.1",
     "prettier": "^1.7.4",
     "raf": "^3.4.0",
     "react": "^16.2.0",
     "react-addons-test-utils": "^15.5.1",
     "react-dom": "^16.2.0",
     "react-test-renderer": "^16.0.0",
-    "relay-compiler": "https://github.com/alloy/relay/releases/download/v1.3.0-artsy/relay-compiler-1.3.0-artsy.1.tgz",
+    "relay-compiler": "https://github.com/alloy/relay/releases/download/v1.5.0-artsy.1/relay-compiler-1.5.0-artsy.1.tgz",
+    "relay-compiler-language-typescript": "^0.9.0",
     "styled-components": "^3.1.5",
+    "ts-loader": "^3.5.0",
     "tslint": "^4.5.0",
     "tslint-config-prettier": "^1.1.0",
     "tslint-react": "^2.4.0",
@@ -113,21 +128,18 @@
     "react-css-transition-replace": "^3.0.2",
     "react-lines-ellipsis": "^0.8.0",
     "react-markdown": "^2.5.0",
-    "react-relay": "https://github.com/alloy/relay/releases/download/v1.3.0-artsy/react-relay-1.3.0-artsy.1.tgz",
+    "react-relay": "https://github.com/alloy/relay/releases/download/v1.5.0-artsy.1/react-relay-1.5.0-artsy.1.tgz",
     "react-responsive-decorator": "^0.0.1",
     "react-sizeme": "^2.3.2",
     "react-slick": "^0.14.11",
     "react-styled-flexboxgrid": "^2.0.0",
     "react-tracking": "^4.2.1",
     "react-url-query": "^1.1.4",
     "react-waypoint": "^7.3.3",
-    "relay-runtime": "https://github.com/alloy/relay/releases/download/v1.3.0-artsy/relay-runtime-artsy.1.tgz",
+    "relay-runtime": "https://github.com/alloy/relay/releases/download/v1.5.0-artsy.1/relay-runtime-1.5.0-artsy.1.tgz",
     "sharify": "^0.1.6",
     "superagent": "^3.6.3"
   },
-  "graphql": {
-    "file": "data/schema.json"
-  },
   "prettier": {
     "semi": false,
     "singleQuote": false,

patches/graphql+0.12.3.patch

@@ -0,0 +1,24 @@
+patch-package
+--- a/node_modules/graphql/utilities/assertValidName.js
++++ b/node_modules/graphql/utilities/assertValidName.js
+@@ -41,13 +41,13 @@ function assertValidName(name) {
+  */
+ function isValidNameError(name, node) {
+   !(typeof name === 'string') ? (0, _invariant2.default)(0, 'Expected string') : void 0;
+-  if (name.length > 1 && name[0] === '_' && name[1] === '_' &&
+-  // Note: this special case is not part of the spec and exists only to
+-  // support legacy server configurations. Do not rely on this special case
+-  // as it may be removed at any time.
+-  name !== '__configs__') {
+-    return new _GraphQLError.GraphQLError('Name "' + name + '" must not begin with "__", which is reserved by ' + 'GraphQL introspection.', node);
+-  }
++  // if (name.length > 1 && name[0] === '_' && name[1] === '_' &&
++  // // Note: this special case is not part of the spec and exists only to
++  // // support legacy server configurations. Do not rely on this special case
++  // // as it may be removed at any time.
++  // name !== '__configs__') {
++  //   return new _GraphQLError.GraphQLError('Name "' + name + '" must not begin with "__", which is reserved by ' + 'GraphQL introspection.', node);
++  // }
+   if (!NAME_RX.test(name)) {
+     return new _GraphQLError.GraphQLError('Names must match /^[_a-zA-Z][_a-zA-Z0-9]*$/ but "' + name + '" does not.', node);
+   }

src/Components/Artist/MarketInsights/MarketInsights.tsx

@@ -28,7 +28,9 @@ const TooltipContainer = styled.div`
   font-size: 12px;
 `
 
-export interface MarketInsightsProps extends RelayProps, React.HTMLProps<MarketInsights> {}
+export interface MarketInsightsProps
+  extends RelayProps,
+    React.HTMLProps<MarketInsights> {}
 
 const Categories = {
   "blue-chip": "Blue Chip",
@@ -37,9 +39,12 @@ const Categories = {
 }
 
 const CategoryTooltipContent = {
-  "blue-chip": "Blue chip galleries have multiple locations internationally and participate in major art fairs.",
-  "top-established": "Top established galleries have been industry leaders in their region or specialty for decades.",
-  "top-emerging": "Top emerging dealers participate in curated, up-and-coming art fairs.",
+  "blue-chip":
+    "Blue chip galleries have multiple locations internationally and participate in major art fairs.",
+  "top-established":
+    "Top established galleries have been industry leaders in their region or specialty for decades.",
+  "top-emerging":
+    "Top emerging dealers participate in curated, up-and-coming art fairs.",
 }
 
 export class MarketInsights extends React.Component<MarketInsightsProps, null> {
@@ -53,7 +58,10 @@ export class MarketInsights extends React.Component<MarketInsightsProps, null> {
       introSentence = "Represented by a " + category.toLowerCase() + " gallery"
     }
 
-    const galleryList = map(partnerList, ({ node: partner }) => partner.name).join(", ")
+    const galleryList = map(
+      partnerList,
+      ({ node: partner }) => partner.name
+    ).join(", ")
 
     return (
       <div>
@@ -80,7 +88,11 @@ export class MarketInsights extends React.Component<MarketInsightsProps, null> {
     }
 
     // Is there an auction highlights section?
-    if (auctionResults && auctionResults.edges && auctionResults.edges.length > 0) {
+    if (
+      auctionResults &&
+      auctionResults.edges &&
+      auctionResults.edges.length > 0
+    ) {
       return true
     }
 
@@ -115,7 +127,12 @@ export class MarketInsights extends React.Component<MarketInsightsProps, null> {
           {Object.keys(groupedByCategory).map(categorySlug => {
             return (
               <div key={categorySlug}>
-                <div>{this.renderGalleryCategory(categorySlug, groupedByCategory[categorySlug])}</div>
+                <div>
+                  {this.renderGalleryCategory(
+                    categorySlug,
+                    groupedByCategory[categorySlug]
+                  )}
+                </div>
                 <br />
               </div>
             )
@@ -126,7 +143,10 @@ export class MarketInsights extends React.Component<MarketInsightsProps, null> {
   }
 
   renderAuctionHighlight() {
-    if (!this.props.artist.auctionResults || this.props.artist.auctionResults.edges.length < 1) {
+    if (
+      !this.props.artist.auctionResults ||
+      this.props.artist.auctionResults.edges.length < 1
+    ) {
       return null
     }
     const topAuctionResult = this.props.artist.auctionResults.edges[0].node
@@ -188,10 +208,13 @@ export class MarketInsights extends React.Component<MarketInsightsProps, null> {
 
 export default createFragmentContainer(
   MarketInsights,
-  graphql.experimental`
+  graphql`
     fragment MarketInsights_artist on Artist
       @argumentDefinitions(
-        partner_category: { type: "[String]", defaultValue: ["blue-chip", "top-established", "top-emerging"] }
+        partner_category: {
+          type: "[String]"
+          defaultValue: ["blue-chip", "top-established", "top-emerging"]
+        }
       ) {
       _id
       collections
@@ -213,7 +236,11 @@ export default createFragmentContainer(
           }
         }
       }
-      auctionResults(recordsTrusted: true, first: 1, sort: PRICE_AND_DATE_DESC) {
+      auctionResults(
+        recordsTrusted: true
+        first: 1
+        sort: PRICE_AND_DATE_DESC
+      ) {
         edges {
           node {
             organization