package: generate graphql types on demand (#2735)

Sean Ho · seanho96 · web-flow · commit 9af79fc79401 · 2022-03-10T14:01:54.000+08:00
Co-authored-by: Sean Ho &lt;seanho96@yahoo.com&gt;
diff --git a/codegen.yml b/codegen.yml
@@ -0,0 +1,19 @@
+overwrite: true
+schema: http://localhost:8000/___graphql
+documents:
+    - ./src/**/*.{ts,tsx}
+    - ./src/components/graphql/*
+generates:
+    ./src/types/graphql.types.ts:
+        plugins:
+            - typescript
+            - typescript-operations
+        config:
+            avoidOptionals: true
+            maybeValue: 'T'
+            namingConvention:
+                enumValues: 'keep'
+# Uncomment to reformat types with prettier.
+#   hooks:
+#     afterOneFileWrite:
+#       - prettier --write
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -225,16 +225,5 @@ module.exports = {
             },
         },
         'gatsby-plugin-use-query-params',
-        {
-            resolve: `gatsby-plugin-graphql-codegen`,
-            options: {
-                fileName: `types/graphql.types.ts`,
-                documentPaths: [
-                    './src/**/*.{ts,tsx}',
-                    './src/components/graphql/*',
-                    './node_modules/gatsby-*/**/*.js',
-                ],
-            },
-        },
     ],
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -53,6 +53,9 @@
         "webpack": "^5.65.0"
     },
     "devDependencies": {
+        "@graphql-codegen/cli": "^2.6.2",
+        "@graphql-codegen/typescript": "^2.4.5",
+        "@graphql-codegen/typescript-operations": "^2.3.2",
         "@storybook/addon-actions": "^6.4.9",
         "@storybook/addon-essentials": "^6.4.9",
         "@storybook/addon-links": "^6.4.9",
@@ -73,7 +76,6 @@
         "eslint-plugin-react": "^7.28.0",
         "eslint-webpack-plugin": "^3.1.1",
         "gatsby-plugin-eslint": "^4.0.2",
-        "gatsby-plugin-graphql-codegen": "^3.1.1",
         "gatsby-plugin-styled-components": "^5.4.0",
         "gh-pages": "^3.2.3",
         "husky": "^7.0.4",
@@ -115,7 +117,9 @@
         "pre-commit-lint": "lint-staged",
         "type-check": "tsc --noEmit",
         "storybook": "start-storybook -p 6006",
-        "build:storybook": "build-storybook -c .storybook -o public/storybook"
+        "build:storybook": "build-storybook -c .storybook -o public/storybook",
+        "codegen": "graphql-codegen --config codegen.yml",
+        "codegen:watch": "graphql-codegen --config codegen.yml --watch"
     },
     "repository": {
         "type": "git",
diff --git a/src/pages/academy/blog/index.tsx b/src/pages/academy/blog/index.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import styled from 'styled-components'
 import { graphql } from 'gatsby'
-import { AllArticlesQuery } from '../../../../types/graphql.types'
 import Subscribe from '../components/_subscribe'
 import AllArticles from './_all-articles'
+import { AllArticlesQuery } from 'types/graphql.types'
 import Layout from 'components/layout/layout'
 import { SEO, Container, Flex } from 'components/containers'
 import { Header } from 'components/elements'
diff --git a/src/pages/academy/index.tsx b/src/pages/academy/index.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
 import { graphql } from 'gatsby'
 import styled from 'styled-components'
-import { AcademyIndexFragment } from '../../../types/graphql.types'
 import Subscribe from './components/_subscribe'
 import RecentFeaturedPosts from './_recent-featured-posts'
 import VideoBanner from './_video-banner'
 import Hero from './components/_hero'
 import MarketNews from './components/_market-news'
+import { AcademyIndexFragment } from 'types/graphql.types'
 import Layout from 'components/layout/layout'
 import { Container, SEO, Flex } from 'components/containers'
 import { localize, WithIntl } from 'components/localization'
diff --git a/src/pages/academy/videos/_all-videos.tsx b/src/pages/academy/videos/_all-videos.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react'
 import { StyledImg, Container, VideoGrid } from '../common/_styles'
 import VideoPlayer from '../components/_video-player'
-import { DirectusData_Videos } from '../../../../types/graphql.types'
 import VideoCard from './_video-card'
 import { VideoDataType } from './index'
+import { DirectusData_Videos } from 'types/graphql.types'
 import { Flex } from 'components/containers'
 import { cms_assets_end_point } from 'common/constants'
 import { slugify, removeSpecialCharacterUrl, queryParams } from 'common/utility'
diff --git a/src/pages/academy/videos/index.tsx b/src/pages/academy/videos/index.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import styled from 'styled-components'
 import { graphql } from 'gatsby'
-import { AllVideosQuery } from '../../../../types/graphql.types'
 import Subscribe from '../components/_subscribe'
 import AllVideos from './_all-videos'
+import { AllVideosQuery } from 'types/graphql.types'
 import Layout from 'components/layout/layout'
 import { SEO, Container, Flex } from 'components/containers'
 import { Header } from 'components/elements'
diff --git a/src/templates/article.tsx b/src/templates/article.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react'
 import { graphql } from 'gatsby'
-import { ArticleQuery } from '../../types/graphql.types'
 import {
     ArticleTitle,
     Background,
@@ -31,6 +30,7 @@ import {
 import Banner from '../pages/academy/components/_banner'
 import SideSubscriptionBanner from '../pages/academy/components/_side-subscription-banner'
 import SocialSharing from '../pages/academy/components/_social-sharing'
+import { ArticleQuery } from 'types/graphql.types'
 import { localize, WithIntl } from 'components/localization'
 import Layout from 'components/layout/layout'
 import { SEO, Show, Box, Flex, SectionContainer } from 'components/containers'
diff --git a/src/types/graphql.types.ts b/src/types/graphql.types.ts
diff --git a/types/graphql.types.ts b/types/graphql.types.ts
