@zephraph => [TSLint] Rule to warn about using QueryRenderer

src/Artsy/Relay/SystemQueryRenderer.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+/* tslint:disable-next-line:no-query-renderer-import */
 import { QueryRenderer, QueryRendererProps } from "react-relay"
 import { OperationType } from "relay-runtime"
 

src/Components/Publishing/ToolTip/TooltipsDataLoader.tsx

@@ -1,12 +1,12 @@
 import { TooltipsDataLoaderQueryResponse } from "__generated__/TooltipsDataLoaderQuery.graphql"
 import { TooltipsDataLoaderQuery } from "__generated__/TooltipsDataLoaderQuery.graphql"
 import * as Artsy from "Artsy"
+import { SystemQueryRenderer } from "Artsy/Relay/SystemQueryRenderer"
 import { getArtsySlugsFromArticle } from "Components/Publishing/Constants"
 import { ArticleData } from "Components/Publishing/Typings"
 import { keyBy } from "lodash"
 import PropTypes from "prop-types"
 import React, { Component } from "react"
-import { QueryRenderer } from "react-relay"
 import { graphql } from "react-relay"
 import { ArticleProps } from "../Article"
 
@@ -39,7 +39,7 @@ export class TooltipsDataLoader extends Component<Props> {
     }
 
     return (
-      <QueryRenderer<TooltipsDataLoaderQuery>
+      <SystemQueryRenderer<TooltipsDataLoaderQuery>
         environment={relayEnvironment}
         query={graphql`
           query TooltipsDataLoaderQuery(

src/DevTools/MockRelayRenderer.tsx

@@ -4,6 +4,7 @@ import { renderWithLoadProgress } from "Artsy/Relay/renderWithLoadProgress"
 import { SystemQueryRenderer } from "Artsy/Relay/SystemQueryRenderer"
 import { IMocks } from "graphql-tools/dist/Interfaces"
 import React from "react"
+/* tslint:disable-next-line:no-query-renderer-import */
 import { QueryRenderer } from "react-relay"
 import {
   Environment,

tslint.json

@@ -17,6 +17,7 @@
     "no-console": false,
     "no-import-un-mocked": true,
     "no-namespace": [true, "allow-declarations"],
+    "no-query-renderer-import": true,
     "no-switch-case-fall-through": true,
     "no-unused-expression": false,
     "no-var-requires": false,

tslint/README.md

@@ -1,6 +1,6 @@
 ## Steps to adding a custom TSLint rule
 
-1.  Make a new file, the name is important, it must be camel-case and not a `.ts` file (the `@ts-check` declaration at the top of each file uses JSDoc to check types while developing rules – [read here](https://github.com/Microsoft/TypeScript/wiki/Type-Checking-JavaScript-Files) for more info).
+1.  Make a new file, the name is important, it must be camel-case and not a `.ts` file (the `@ts-check` declaration at the top of each file uses JSDoc to check types while developing rules – [read here](https://github.com/Microsoft/TypeScript/wiki/Type-Checking-JavaScript-Files) for more info). The suffix must be `...Rule.js`.
 1.  You will need to convert your camelCase name to kebab-case and add it to the [`tslint.json`](../tslint.json)
 
     E.g. `noDoingAnythingRule.js` -> `no-doing-anything` and:

tslint/noQueryRendererImportRule.js

@@ -0,0 +1,50 @@
+// @ts-check
+
+const Lint = require("tslint")
+const ts = require("typescript")
+
+const message = "Did you mean to use `SystemQueryRenderer` instead?"
+
+class Rule extends Lint.Rules.AbstractRule {
+  /**
+   * @param {ts.SourceFile} sourceFile
+   */
+  apply(sourceFile) {
+    // Skip storybook and test files.
+    if (
+      sourceFile.fileName.includes(".story") ||
+      sourceFile.fileName.includes(".test")
+    ) {
+      return []
+    }
+
+    return this.applyWithWalker(
+      new NoQueryRendererImportWalker(sourceFile, this.getOptions())
+    )
+  }
+}
+
+class NoQueryRendererImportWalker extends Lint.RuleWalker {
+  visitImportDeclaration(node) {
+    const importSource = node.moduleSpecifier.text
+
+    if (importSource === "react-relay") {
+      const namedBindings = node.importClause.namedBindings
+      const namedImports =
+        namedBindings &&
+        namedBindings.elements &&
+        namedBindings.elements.map(e => e.getText())
+
+      if (namedImports.includes("QueryRenderer")) {
+        this.addFailure(
+          this.createFailure(node.getStart(), node.getWidth(), message)
+        )
+      }
+    }
+
+    // call the base version of this visitor to actually parse this node
+    super.visitImportDeclaration(node)
+  }
+}
+
+module.exports = { Rule: Rule }