Upgrade for gatsby v3 (#130)

* fix: allow to be installed with npm7+ and graphql@14 Downgrade `@graphql-codegen/*` to 1.17.0 such that it would use `@graphql-tools/[email protected]` which uses `relay-compiler@9`, the last version supporting `graphql@14`. * fix: allow users to use any version of typescript at their choice * fix: ignore errors from @types/webpack * fix: update the endpoint for graphql-pokemon see lucasbento/graphql-pokemon#15 * chore: add a github actions for ensuring install is possible on npm7 * feat: support gatsby v3 * style: reformat the code for eslint * v2 maintenance update for Gatsby v2, GraphQL 14 and npm7 (#129) * fix: allow to be installed with npm7+ and graphql@14 Downgrade `@graphql-codegen/*` to 1.17.0 such that it would use `@graphql-tools/[email protected]` which uses `relay-compiler@9`, the last version supporting `graphql@14`. * fix: allow users to use any version of typescript at their choice * fix: ignore errors from @types/webpack * fix: update the endpoint for graphql-pokemon see lucasbento/graphql-pokemon#15 * chore: add a github actions for ensuring install is possible on npm7 * v2.7.3 Co-authored-by: Derek Nguyen <[email protected]>
d4rekanguok · May 30, 2021 · d13a713 · d13a713
1 parent 8928933
commit d13a713
Show file tree

Hide file tree

Showing 10 changed files with 5,039 additions and 5,958 deletions.
diff --git a/package.json b/package.json
@@ -24,20 +24,20 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "7.11.1",
-    "@babel/preset-env": "7.11.0",
-    "@babel/preset-typescript": "7.10.4",
-    "@types/jest": "26.0.8",
-    "@typescript-eslint/eslint-plugin": "3.8.0",
-    "@typescript-eslint/parser": "3.8.0",
-    "eslint": "7.6.0",
-    "eslint-config-prettier": "6.11.0",
-    "eslint-plugin-jest": "23.20.0",
-    "eslint-plugin-prettier": "3.1.4",
-    "eslint-plugin-react": "7.20.5",
-    "graphql": "14.7.0",
-    "jest": "26.2.2",
-    "lerna": "3.22.1",
-    "prettier": "2.0.5"
+    "@babel/core": "^7.14.3",
+    "@babel/preset-env": "^7.14.2",
+    "@babel/preset-typescript": "^7.13.0",
+    "@types/jest": "^26.0.23",
+    "@typescript-eslint/eslint-plugin": "^4.25.0",
+    "@typescript-eslint/parser": "^4.25.0",
+    "eslint": "^7.27.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-jest": "^24.3.6",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.23.2",
+    "graphql": "^15.0.0",
+    "jest": "^27.0.1",
+    "lerna": "^4.0.0",
+    "prettier": "^2.3.0"
   }
 }
diff --git a/packages/gatsby-plugin-graphql-codegen/package.json b/packages/gatsby-plugin-graphql-codegen/package.json
@@ -21,32 +21,32 @@
   "author": "Derek Nguyen <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "@graphql-codegen/core": "1.17.0",
-    "@graphql-codegen/plugin-helpers": "1.17.0",
-    "@graphql-codegen/typescript": "1.17.0",
-    "@graphql-codegen/typescript-operations": "1.17.0",
-    "@graphql-tools/code-file-loader": "6.0.15",
-    "@graphql-tools/graphql-file-loader": "6.0.15",
-    "@graphql-tools/graphql-tag-pluck": "6.0.15",
-    "@graphql-tools/json-file-loader": "6.0.15",
-    "@graphql-tools/load": "6.0.15",
-    "@graphql-tools/url-loader": "6.0.15",
-    "@graphql-tools/utils": "6.0.15",
-    "fs-extra": "9.0.1",
+    "@graphql-codegen/core": "^1.17.10",
+    "@graphql-codegen/plugin-helpers": "^1.18.0",
+    "@graphql-codegen/typescript": "^1.22.0",
+    "@graphql-codegen/typescript-operations": "^1.18.0",
+    "@graphql-tools/code-file-loader": "^6.3.1",
+    "@graphql-tools/graphql-file-loader": "^6.2.7",
+    "@graphql-tools/graphql-tag-pluck": "^6.5.1",
+    "@graphql-tools/json-file-loader": "^6.2.6",
+    "@graphql-tools/load": "^6.2.8",
+    "@graphql-tools/url-loader": "^6.10.1",
+    "@graphql-tools/utils": "^7.10.0",
+    "fs-extra": "^10.0.0",
     "lodash.debounce": "4.0.8"
   },
   "peerDependencies": {
-    "gatsby": "^2.12.1",
-    "graphql": "^14.6.0",
+    "gatsby": "^3.0.0",
+    "graphql": "^15.0.0",
     "typescript": "*"
   },
   "devDependencies": {
-    "@types/fs-extra": "9.0.1",
-    "@types/lodash.debounce": "4.0.6",
-    "@types/node": "14.0.27",
-    "gatsby": "2.24.27",
-    "graphql": "14.7.0",
-    "typescript": "3.9.7"
+    "@types/fs-extra": "^9.0.0",
+    "@types/lodash.debounce": "^4.0.0",
+    "@types/node": "^15.0.0",
+    "gatsby": "^3.0.0",
+    "graphql": "^15.0.0",
+    "typescript": "^4.3.2"
   },
   "bugs": {
     "url": "https://github.com/d4rekanguok/gatsby-typescript/issues"

diff --git a/packages/gatsby-plugin-graphql-codegen/src/gatsby-node.ts b/packages/gatsby-plugin-graphql-codegen/src/gatsby-node.ts
@@ -84,10 +84,8 @@ export const onPostBootstrap: GatsbyNode['onPostBootstrap'] = async (
     codegenConfig,
   } = options
 
-  const {
-    schema,
-    program,
-  }: { schema: GraphQLSchema; program: any } = store.getState()
+  const { schema, program }: { schema: GraphQLSchema; program: any } =
+    store.getState()
   const { directory } = program
 
   const defaultConfig = {

diff --git a/packages/gatsby-plugin-graphql-codegen/src/graphql-codegen.config.test.js b/packages/gatsby-plugin-graphql-codegen/src/graphql-codegen.config.test.js
@@ -37,17 +37,17 @@ it('takes in options and returns a function that runs codegen for the schema', a
 
   expect(mockSchema).toMatchInlineSnapshot(`
     GraphQLSchema {
-      "__allowedLegacyNames": Array [],
       "__validationErrors": undefined,
       "_directives": Array [
-        "@skip",
         "@include",
+        "@skip",
         "@deprecated",
+        "@specifiedBy",
       ],
-      "_implementations": Object {},
+      "_implementationsMap": Object {},
       "_mutationType": undefined,
-      "_possibleTypeMap": Object {},
       "_queryType": "Query",
+      "_subTypeMap": Object {},
       "_subscriptionType": undefined,
       "_typeMap": Object {
         "Boolean": "Boolean",
@@ -63,7 +63,8 @@ it('takes in options and returns a function that runs codegen for the schema', a
         "__TypeKind": "__TypeKind",
       },
       "astNode": undefined,
-      "extensionASTNodes": undefined,
+      "description": undefined,
+      "extensionASTNodes": Array [],
       "extensions": undefined,
     }
   `)
@@ -92,7 +93,9 @@ it('takes in options and returns a function that runs codegen for the schema', a
   )
   expect(fs.writeFile.mock.calls[0][1]).toMatchInlineSnapshot(`
     "export type Maybe<T> = T | null;
-    export type Exact<T extends { [key: string]: any }> = { [K in keyof T]: T[K] };
+    export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+    export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
+    export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
     /** All built-in and custom scalars, mapped to their actual values */
     export type Scalars = {
       ID: string;
@@ -105,7 +108,6 @@ it('takes in options and returns a function that runs codegen for the schema', a
     export type Query = {
       example?: Maybe<Scalars['String']>;
     };
-
     "
   `)
 

diff --git a/packages/gatsby-plugin-ts/package.json b/packages/gatsby-plugin-ts/package.json
@@ -19,14 +19,14 @@
   "author": "Derek Nguyen <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "fork-ts-checker-webpack-plugin": "5.0.14",
-    "fs-extra": "9.0.1",
-    "gatsby-plugin-graphql-codegen": "^2.7.3",
-    "ts-loader": "8.0.2"
+    "fork-ts-checker-webpack-plugin": "^6.2.10",
+    "fs-extra": "^10.0.0",
+    "gatsby-plugin-graphql-codegen": "^2.7.2",
+    "ts-loader": "^9.2.2"
   },
   "peerDependencies": {
-    "gatsby": "^2.12.1",
-    "graphql": "^14.6.0",
+    "gatsby": "^3.0.0",
+    "graphql": "^15.0.0",
     "typescript": "*"
   },
   "peerDependenciesMeta": {
@@ -35,11 +35,10 @@
     }
   },
   "devDependencies": {
-    "@types/fs-extra": "9.0.1",
-    "@types/node": "14.0.27",
-    "@types/webpack": "4.41.21",
-    "gatsby": "2.24.27",
-    "typescript": "3.9.7"
+    "@types/fs-extra": "^9.0.0",
+    "@types/node": "^14.0.0",
+    "gatsby": "^3.0.0",
+    "typescript": "^4.3.2"
   },
   "bugs": {
     "url": "https://github.com/d4rekanguok/gatsby-typescript/issues"

diff --git a/packages/gatsby-plugin-ts/src/gatsby-node.ts b/packages/gatsby-plugin-ts/src/gatsby-node.ts
@@ -43,7 +43,7 @@ const getOptions: GetOptions = (pluginOptions) => ({
 })
 
 type CreateRule = (
-  jsLoader: webpack.RuleSetLoader,
+  jsLoader: webpack.RuleSetUseItem,
   options: TsOptions
 ) => webpack.RuleSetRule
 const createRule: CreateRule = (jsLoader, { tsLoader }) => ({
@@ -77,7 +77,7 @@ export const onCreateWebpackConfig: GatsbyNode['onCreateWebpackConfig'] = (
   if (!jsLoader) return
   const tsRule = createRule(jsLoader, options)
 
-  const plugins: webpack.Plugin[] = []
+  const plugins: NonNullable<webpack.Configuration['plugins']> = []
   if (typeCheck) {
     plugins.push(new FTCWebpackPlugin(forkTsCheckerPlugin))
   }

diff --git a/packages/gatsby-starter-blog-ts/package.json b/packages/gatsby-starter-blog-ts/package.json
@@ -8,43 +8,43 @@
     "url": "https://github.com/d4rekanguok/gatsby-starter-blog-ts/issues"
   },
   "dependencies": {
-    "@types/node": "14.0.27",
-    "@types/react": "16.9.44",
-    "@types/react-dom": "16.9.8",
-    "@types/typography": "0.16.3",
-    "gatsby": "2.24.27",
-    "gatsby-image": "2.4.14",
-    "gatsby-plugin-feed": "2.5.11",
-    "gatsby-plugin-google-analytics": "2.3.13",
-    "gatsby-plugin-graphql-codegen": "^2.7.3",
-    "gatsby-plugin-manifest": "2.4.21",
-    "gatsby-plugin-offline": "3.2.21",
-    "gatsby-plugin-react-helmet": "3.3.10",
-    "gatsby-plugin-sharp": "2.6.24",
-    "gatsby-plugin-ts": "^2.7.3",
-    "gatsby-plugin-typescript": "2.4.16",
-    "gatsby-plugin-typography": "2.5.10",
-    "gatsby-remark-copy-linked-files": "2.3.12",
-    "gatsby-remark-images": "3.3.24",
-    "gatsby-remark-prismjs": "3.5.10",
-    "gatsby-remark-responsive-iframe": "2.4.12",
-    "gatsby-remark-smartypants": "2.3.10",
-    "gatsby-source-filesystem": "2.3.23",
-    "gatsby-transformer-remark": "2.8.27",
-    "gatsby-transformer-sharp": "2.5.12",
-    "prismjs": "1.21.0",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
+    "@types/node": "^15.6.1",
+    "@types/react": "^17.0.8",
+    "@types/react-dom": "^17.0.5",
+    "@types/typography": "^0.16.3",
+    "gatsby": "^3.0.0",
+    "gatsby-image": "^3.0.0",
+    "gatsby-plugin-feed": "^3.0.0",
+    "gatsby-plugin-google-analytics": "^3.0.0",
+    "gatsby-plugin-graphql-codegen": "^2.7.2",
+    "gatsby-plugin-manifest": "^3.0.0",
+    "gatsby-plugin-offline": "^4.0.0",
+    "gatsby-plugin-react-helmet": "^4.0.0",
+    "gatsby-plugin-sharp": "^3.0.0",
+    "gatsby-plugin-ts": "^2.7.2",
+    "gatsby-plugin-typescript": "^3.0.0",
+    "gatsby-plugin-typography": "^3.0.0",
+    "gatsby-remark-copy-linked-files": "^4.3.0",
+    "gatsby-remark-images": "^5.3.0",
+    "gatsby-remark-prismjs": "^5.3.0",
+    "gatsby-remark-responsive-iframe": "^4.3.0",
+    "gatsby-remark-smartypants": "^4.3.0",
+    "gatsby-source-filesystem": "^3.0.0",
+    "gatsby-transformer-remark": "^4.3.0",
+    "gatsby-transformer-sharp": "^3.6.0",
+    "prismjs": "^1.23.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-helmet": "6.1.0",
-    "react-typography": "0.16.19",
-    "typeface-merriweather": "0.0.72",
-    "typeface-montserrat": "0.0.75",
-    "typescript": "3.9.7",
-    "typography": "0.16.19",
-    "typography-theme-wordpress-2016": "0.16.19"
+    "react-typography": "^0.16.20",
+    "typeface-merriweather": "^1.1.13",
+    "typeface-montserrat": "^1.1.13",
+    "typography": "^0.16.21",
+    "typography-theme-wordpress-2016": "^0.16.19"
   },
   "devDependencies": {
-    "prettier": "2.0.5"
+    "prettier": "^2.3.0",
+    "typescript": "^4.3.2"
   },
   "homepage": "https://github.com/d4rekanguok/gatsby-starter-blog-ts#readme",
   "keywords": [

diff --git a/packages/gatsby-starter-ts/package.json b/packages/gatsby-starter-ts/package.json
@@ -5,26 +5,26 @@
   "version": "2.7.3",
   "author": "Kyle Mathews <[email protected]>",
   "dependencies": {
-    "@types/react": "16.9.44",
-    "@types/react-dom": "16.9.8",
-    "@types/react-helmet": "6.1.0",
-    "gatsby": "2.24.27",
-    "gatsby-image": "2.4.14",
-    "gatsby-plugin-manifest": "2.4.21",
-    "gatsby-plugin-offline": "3.2.21",
-    "gatsby-plugin-react-helmet": "3.3.10",
-    "gatsby-plugin-sharp": "2.6.24",
-    "gatsby-plugin-ts": "^2.7.3",
-    "gatsby-source-filesystem": "2.3.23",
-    "gatsby-transformer-sharp": "2.5.12",
-    "graphql-tag": "2.11.0",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-helmet": "6.1.0",
-    "typescript": "3.9.7"
+    "@types/react": "^17.0.8",
+    "@types/react-dom": "^17.0.5",
+    "@types/react-helmet": "^6.1.1",
+    "gatsby": "^3.0.0",
+    "gatsby-image": "^3.0.0",
+    "gatsby-plugin-manifest": "^3.0.0",
+    "gatsby-plugin-offline": "^4.0.0",
+    "gatsby-plugin-react-helmet": "^4",
+    "gatsby-plugin-sharp": "^3.0.0",
+    "gatsby-plugin-ts": "^2.7.2",
+    "gatsby-source-filesystem": "^3.0.0",
+    "gatsby-transformer-sharp": "^3.6.0",
+    "graphql-tag": "^2.12.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-helmet": "^6.1.0"
   },
   "devDependencies": {
-    "prettier": "2.0.5"
+    "prettier": "^2.3.0",
+    "typescript": "^4.3.2"
   },
   "keywords": [
     "gatsby"

diff --git a/packages/gatsby-starter-ts/src/components/seo.tsx b/packages/gatsby-starter-ts/src/components/seo.tsx
@@ -41,10 +41,10 @@ const SEO: React.FC<Props> = ({
     `
   )
 
-  const {
-    author,
-    description: siteDescription,
-  } = ensureKeys(site?.siteMetadata, [`author`, `description`])
+  const { author, description: siteDescription } = ensureKeys(
+    site?.siteMetadata,
+    [`author`, `description`]
+  )
 
   const metaDescription = description ?? siteDescription