feat: support auto graphql query types, add formatting tools (#903)

Co-authored-by: 代小呆 <[email protected]>

.github/workflows/lint-check.yml

@@ -30,5 +30,5 @@ jobs:
           key: ${{ runner.os }}-dep-${{ steps.node-version.outputs.ver }}-${{ hashFiles('**/package-lock.json') }}
 
       - run: yarn install
-
+      - run: yarn workspace example node ../genSchema
       - run: yarn lint

.gitignore

@@ -8,3 +8,5 @@ node_modules
 
 yarn-error.log
 .vscode
+
+__generated__/

.graphqlconfig

@@ -0,0 +1,15 @@
+{
+  "name": "GraphQL Schema",
+  "schemaPath": "schema.graphql",
+  "extensions": {
+    "endpoints": {
+      "Default GraphQL Endpoint": {
+        "url": "http://localhost:8080/___graphql",
+        "headers": {
+          "user-agent": "JS GraphQL"
+        },
+        "introspect": false
+      }
+    }
+  }
+}

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged -c .lintstagedrc.json

.husky/prepare-commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+exec </dev/tty && npx cz --hook

.lintstagedrc.json

@@ -0,0 +1,3 @@
+{
+  "gatsby-theme-oi-wiki/src/**/*.{js,jsx,ts,tsx}": "eslint --fix"
+}

example/gatsby-config.js

@@ -7,8 +7,8 @@ module.exports = {
   },
   plugins: [
     {
-        resolve: "gatsby-theme-oi-wiki",
-        options: {},
+      resolve: "gatsby-theme-oi-wiki",
+      options: {},
     }
   ]
 }

gatsby-theme-oi-wiki/.eslintrc.js

@@ -1,3 +1,6 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require('path')
+
 module.exports = {
   env: {
     browser: true,
@@ -24,6 +27,7 @@ module.exports = {
   plugins: [
     'react',
     '@typescript-eslint',
+    'graphql',
   ],
   rules: {
     'react/prop-types': [0],
@@ -36,6 +40,11 @@ module.exports = {
     '@typescript-eslint/explicit-module-boundary-types': ['off'],
     '@typescript-eslint/no-explicit-any': [0],
     'react/jsx-curly-brace-presence': [2, 'never'],
+    'graphql/template-strings': ['error', {
+      env: 'relay',
+      tagName: 'graphql',
+      schemaJsonFilepath: path.resolve(__dirname, 'src/__generated__/gatsby-introspection.json'),
+    }],
   },
   overrides: [
     {

gatsby-theme-oi-wiki/gatsby-config.js

@@ -1,42 +1,58 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path')
 
-const isProd = process.env.PRODUCTION === 'true' || process.env.RENDER === 'true'
-const condition = (cond, v) => cond ? [v] : []
-if (isProd && process.env.gatsby_executing_command !== 'build') {
+const IS_EXEC_BUILD = process.env.gatsby_executing_command === 'build'
+const IS_PROD = process.env.PRODUCTION === 'true' ||
+                process.env.NODE_ENV === 'production' ||
+                process.env.RENDER === 'true'
+
+/**
+ * 根据条件生成配置，需要展开
+ * @param cond boolean 条件
+ * @param v any 配置
+ * @returns {[v]} 返回 [v] 或 []
+ */
+const needPlugin = (cond, v) => (cond ? [v] : [])
+
+// 提供一些警告
+if (IS_PROD && !IS_EXEC_BUILD) {
   console.warn('Using production configurations in non-build environment')
-}
-if (!isProd && process.env.CI === 'true') {
+} else if (!IS_PROD && process.env.CI === 'true') {
   console.warn('Using development configurations in build environment')
 }
 
-const mathRehype = process.env.gatsby_executing_command === 'build'
-  ? [require('rehype-mathjax/chtml'),
-    { fontURL: 'https://cdn.jsdelivr.net/npm/mathjax@3.0.5/es5/output/chtml/fonts/woff-v2' }]
+const fontURL = 'https://cdn.jsdelivr.net/npm/[email protected]/es5/output/chtml/fonts/woff-v2'
+const mathRehype = IS_EXEC_BUILD
+  ? [require('rehype-mathjax/chtml'), { fontURL }]
   : [require('rehype-mathjax/browser')]
 
 module.exports = {
   siteMetadata: {
     title: 'OI Wiki',
-    description: 'Guide for OI',
+    description: 'OI Wiki 是一个编程竞赛知识整合站点，提供有趣又实用的编程竞赛知识以及其他有帮助的内容，帮助广大编程竞赛爱好者更快更深入地学习编程竞赛',
     author: 'OI Wiki Team',
     siteUrl: 'https://ng.oi-wiki.org',
   },
   plugins: [
-    'gatsby-source-local-git',
+    {
+      resolve: 'gatsby-source-local-git',
+    },
     {
       resolve: 'gatsby-source-filesystem',
       options: {
-        name: './docs/',
-        path: path.resolve('./docs/'),
+        name: './docs',
+        path: path.resolve('./docs'),
       },
     },
-    ...condition(isProd, 'gatsby-plugin-sharp'),
-    ...condition(isProd, 'gatsby-transformer-sharp'),
+    ...needPlugin(IS_PROD, 'gatsby-plugin-sharp'),
+    {
+      resolve: 'gatsby-transformer-sharp',
+    },
     {
       resolve: 'gatsby-transformer-remark-rehype',
       options: {
         plugins: [
-          ...condition(isProd, {
+          ...needPlugin(IS_PROD, {
             resolve: 'gatsby-remark-images',
             options: {
               maxWidth: 900,
@@ -53,11 +69,11 @@ module.exports = {
             },
           },
           /** {
-            resolve: `gatsby-remark-autolink-headers`,
-            options: {
-              isIconAfterHeader: true,
-            },
-          }, */
+              resolve: `gatsby-remark-autolink-headers`,
+              options: {
+                isIconAfterHeader: true,
+              },
+            }, */
           {
             resolve: 'gatsby-local-autolink-headers',
             options: {
@@ -90,9 +106,13 @@ module.exports = {
         },
       },
     },
-    'gatsby-plugin-catch-links',
-    'gatsby-plugin-react-helmet',
-    ...condition(isProd, {
+    {
+      resolve: 'gatsby-plugin-catch-links',
+    },
+    {
+      resolve: 'gatsby-plugin-react-helmet',
+    },
+    ...needPlugin(IS_PROD, {
       resolve: 'gatsby-plugin-manifest',
       options: {
         name: 'OI Wiki',
@@ -132,6 +152,35 @@ module.exports = {
         },
       },
     },
+    {
+      resolve: 'gatsby-plugin-typegen',
+      options: {
+        outputPath: path.resolve(__dirname, 'src/__generated__/gatsby-types.d.ts'),
+        emitSchema: {
+          [path.resolve(__dirname, 'src/__generated__/gatsby-schema.graphql')]: true,
+          [path.resolve(__dirname, 'src/__generated__/gatsby-introspection.json')]: true,
+          'src/__generated__/gatsby-schema.graphql': true,
+        },
+        emitPluginDocuments: {
+          [path.resolve(__dirname, 'src/__generated__/gatsby-plugin-documents.graphql')]: true,
+        },
+      },
+    },
+    // {
+    //   resolve: 'gatsby-plugin-ts',
+    //   options: {
+    //     tsloader: {
+    //       loglevel: 'warn',
+    //     },
+    //     forktscheckerplugin: {
+    //       eslint: true,
+    //     },
+    //     filename: 'types/graphql-types.ts',
+    //     codegen: true,
+    //     codegendelay: 250,
+    //     alwayscheck: false,
+    //   },
+    // },
     // {
     //   resolve: 'gatsby-plugin-advanced-sitemap',
     //   options: {

gatsby-theme-oi-wiki/gatsby-node.js

@@ -1,16 +1,17 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const _ = require('lodash')
 const git = require('simple-git')
 const { createFilePath } = require('gatsby-source-filesystem')
 exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
     resolve: {
-       alias: {
-          path: require.resolve("path-browserify")
-       },
-       fallback: {
-         fs: false,
-       }
-    }
+      alias: {
+        path: require.resolve('path-browserify'),
+      },
+      fallback: {
+        fs: false,
+      },
+    },
   })
 }
 const gitQuery = async function (prop) {

gatsby-theme-oi-wiki/gatsby-ssr.js

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-
 const React = require('react')
 const script = require('./static/script')
 

gatsby-theme-oi-wiki/package.json

@@ -31,6 +31,8 @@
     "gatsby-plugin-offline": "^4.8.0",
     "gatsby-plugin-react-helmet": "^4.8.0",
     "gatsby-plugin-sharp": "^3.8",
+    "gatsby-plugin-ts": "^3.0.0",
+    "gatsby-plugin-typegen": "^2.2.4",
     "gatsby-remark-copy-linked-files": "^4.5.0",
     "gatsby-remark-images": "^5.6",
     "gatsby-source-filesystem": "^3.6.0",
@@ -61,12 +63,14 @@
     "@typescript-eslint/parser": "^3.10.1",
     "eslint": "^7.29.0",
     "eslint-config-standard": "^16.0.3",
+    "eslint-plugin-graphql": "^4.0.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.1.2",
     "eslint-plugin-standard": "^5.0.0",
     "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.24",
+    "ts-graphql-plugin": "^2.1.3",
     "typescript": "^4.3.5"
   },
   "optionalDependencies": {

gatsby-theme-oi-wiki/src/components/Seo.tsx

@@ -27,7 +27,7 @@ const SEO: React.FC<Props> = (props: Props) => {
     datePublished,
   } = props
   const { pathname } = useLocation()
-  const { site } = useStaticQuery(query)
+  const { site } = useStaticQuery<GatsbyTypes.SEOQuery>(query)
 
   const {
     defaultTitle,