Add schema linting

Author: damassi

.eslintrc

@@ -0,0 +1,62 @@
+const path = require("path")
+
+module.exports = {
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint", "graphql"],
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+  ],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 6,
+    project: "./tsconfig.json",
+    sourceType: "module",
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+  env: {
+    es6: true,
+    browser: true,
+    jest: true,
+    node: true,
+  },
+  rules: {
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-member-accessibility": "off",
+    "@typescript-eslint/indent": "off",
+    "@typescript-eslint/member-delimiter-style": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        argsIgnorePattern: "^_",
+      },
+    ],
+    "graphql/template-strings": [
+      "error",
+      {
+        env: "relay",
+        schemaJsonFilepath: path.resolve(__dirname, "./schema.json"),
+        tagName: "graphql",
+      },
+    ],
+    "no-console": [
+      "error",
+      {
+        allow: ["warn", "error"],
+      },
+    ],
+    "react/display-name": 0,
+    "react/prop-types": 0,
+  },
+}

.eslintrc.js

@@ -10,3 +10,4 @@ typings/
 # Gatsby files
 .cache/
 public
+schema.json

.gitignore

@@ -30,6 +30,15 @@ yarn build
 
 ![demo](https://user-images.githubusercontent.com/236943/51792565-abd93e00-2167-11e9-8bcb-87f7dccece52.gif)
 
+### GraphQL Validation
+
+Validation has been added via `eslint-plugin-graphql`:
+
+<img width="512" alt="screen shot 2019-01-26 at 6 49 01 pm" src="https://user-images.githubusercontent.com/236943/51796580-8110d900-21ab-11e9-91a7-1cc6d6a068fc.png">
+
+**TODO:** Figure out how to generate usable types for TypeScript with
+`apollo-cli`.
+
 <details>
   <summary>Gatsby API Details</summary>
 

README.md

@@ -6,10 +6,12 @@
  * See: https://www.gatsbyjs.org/docs/node-apis/
  */
 
-const path = require("path")
+const write = require("write")
 const WebpackNotifierPlugin = require("webpack-notifier")
-const { createFilePath } = require("gatsby-source-filesystem")
+const path = require("path")
 const { toLower } = require("lodash")
+const { introspectionQuery, graphql, printSchema } = require("gatsby/graphql")
+const { createFilePath } = require("gatsby-source-filesystem")
 
 // TODO: Fix apollo type generation
 // const WebpackShellPlugin = require("webpack-shell-plugin")
@@ -48,7 +50,7 @@ exports.createPages = ({ graphql, actions }) => {
   return new Promise((resolve, reject) => {
     resolve(
       graphql(`
-        {
+        query CreatePagesQuery {
           allMdx {
             edges {
               node {
@@ -114,3 +116,26 @@ exports.onCreateWebpackConfig = ({ actions }) => {
     },
   })
 }
+
+/**
+ * Generate GraphQL schema.json file to be read by tslint
+ * Thanks: https://gist.github.com/kkemple/6169e8dc16369b7c01ad7408fc7917a9
+ */
+exports.onPostBootstrap = async ({ store }) => {
+  try {
+    const { schema } = store.getState()
+    const jsonSchema = await graphql(schema, introspectionQuery)
+    const sdlSchema = printSchema(schema)
+
+    write.sync("schema.json", JSON.stringify(jsonSchema.data), {})
+    write.sync("schema.graphql", sdlSchema, {})
+
+    console.log("\n\n[gatsby-plugin-extract-schema] Wrote schema\n") // eslint-disable-line
+  } catch (error) {
+    console.error(
+      "\n\n[gatsby-plugin-extract-schema] Failed to write schema: ",
+      error,
+      "\n"
+    )
+  }
+}

gatsby-node.js

@@ -6,23 +6,14 @@
     "build": "gatsby build",
     "clean": "rm -rf .cache && yarn start",
     "develop": "nodemon --exec \"gatsby develop\"",
-    "debug": "nodemon --exec \"node --inspect-brk --no-lazy node_modules/.bin/gatsby develop\" ",
-    "emit-graphql-types": "apollo codegen:generate --tagName=graphql --target=typescript __generated__",
+    "debug": "nodemon --exec \"node --inspect-brk --no-lazy node_modules/.bin/gatsby develop\"",
     "lint": "eslint . --ext ts --ext tsx",
     "prettier-write": "prettier --write \"src/**/*.js\"",
     "release": "auto shipit",
     "start": "yarn develop",
     "test": "echo \"Write tests! -> https://gatsby.app/unit-testing\"",
     "type-check": "tsc --pretty --noEmit"
   },
-  "apollo": {
-    "client": {
-      "service": {
-        "name": "gatsby",
-        "url": "http://localhost:8000/___graphql"
-      }
-    }
-  },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged",
@@ -40,6 +31,7 @@
     "ignore": [
       ".cache/*",
       "public/*",
+      "schema.json",
       "src/*"
     ],
     "delay": "1500"
@@ -59,13 +51,14 @@
     "@types/rebass": "^0.3.4",
     "@types/styled-components": "^4.1.6",
     "@typescript-eslint/eslint-plugin": "^1.1.0",
-    "apollo": "^2.1.9",
     "auto-release-cli": "2.3.0",
     "babel-eslint": "^10.0.1",
     "eslint": "^5.12.1",
     "eslint-config-prettier": "^3.6.0",
+    "eslint-plugin-graphql": "^3.0.1",
     "eslint-plugin-react": "^7.12.4",
     "gatsby-plugin-typescript": "^2.0.3",
+    "graphql-typescript-definitions": "^0.15.0",
     "husky": "^1.3.1",
     "jest": "^24.0.0",
     "lint-staged": "^8.1.0",
@@ -111,7 +104,8 @@
     "rebass": "^3.0.1",
     "styled-components": "^4.1.3",
     "styled-system": "^3.2.1",
-    "unstated": "^2.1.1"
+    "unstated": "^2.1.1",
+    "write": "^1.0.3"
   },
   "license": "MIT",
   "publishConfig": {

package.json

@@ -5,7 +5,7 @@ export default function Home() {
   return (
     <StaticQuery
       query={graphql`
-        query {
+        query PagesQuery {
           allMdx {
             edges {
               node {

src/pages/index.tsx

@@ -4,14 +4,16 @@
     "allowSyntheticDefaultImports": true,
     "baseUrl": "./src",
     "jsx": "react",
-    "lib": ["dom", "es2015", "es2016", "es2017"],
+    "lib": ["dom", "esnext", "es2015", "es2016", "es2017"],
     "moduleResolution": "node",
     "noImplicitAny": false,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "plugins": [{
-      "name": "typescript-styled-plugin"
-    }],
+    "plugins": [
+      {
+        "name": "typescript-styled-plugin"
+      }
+    ],
     "target": "es2015"
   },
   "include": ["**/*.ts", "**/*.tsx"],