前提・実現したいこと
GatsbyJSの公式サイトチュートリアルの内容をTypeScript化しています。
表題の通り gatsby-plugin-typegen を使って gatsby develop すると components にあるファイルの useStaticQuery の型が消えてしまうことを防ぎたいです。
どう切り分けて考えれば良いのかわからずヒントをもらえればなと思い質問しました
発生している問題・エラーメッセージ
このプラグインを使うと gatsby build した際に各components(useStaticQueryを用いた)にあるファイルまたはpagesにあるファイルに使用された graphql の型を自動生成してくれます。
自動生成された型はデフォルトでは__generated__/gatsby-types.tsのファイルが作成されそこに格納されています。
しかし自動生成後、生成された型を当てはめて gatsby develop をするとなぜか components にあるファイルのgraphqlの型だけ消えてしまいます。
具体的には__generated__/gatsby-types.tsの中から型が消えてしまいます。
gatsby developした際に生じること
下のターミナルの結果に対してコメントアウトを挿入しているようにですが、途中で型ファイルが更新後にエラーが生じます(VSCode上にて型が見つからないといった旨で怒られる)
gatsby-tutorial-typescript [main] ⚡ gatsby develop error (node:56530) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time (node:56577) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time error (node:56576) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time success open and validate gatsby-configs - 0.058s success load plugins - 5.964s success onPreInit - 0.053s success initialize cache - 0.027s success copy gatsby files - 0.199s success onPreBootstrap - 0.118s success createSchemaCustomization - 0.009s success Checking for changed pages - 0.001s success source and transform nodes - 0.250s success building schema - 0.389s info Total nodes: 56, SitePage nodes: 3 (use --verbose for breakdown) success createPages - 0.034s success Checking for changed pages - 0.001s success createPagesStatefully - 0.128s success update schema - 0.049s success write out redirect data - 0.016s success Build manifest and related icons - 0.213s success onPostBootstrap - 0.459s info bootstrap finished - 11.722s success onPreExtractQueries - 0.001s //////ここら辺で型情報が上書きされて型が消える info changed file at /Users/userHoge/gatsby-tutorial-typescript/src/__generated__/gatsby-types.ts success extract queries from components - 1.042s //////ここら辺で型情報が上書きされて型が消える info changed file at /Users/userHoge/gatsby-tutorial-typescript/src/__generated__/gatsby-types.ts success write out requires - 0.193s //////ここら辺で型情報が上書きされて型が消える info changed file at /Users/userHoge/gatsby-tutorial-typescript/src/__generated__/gatsby-types.ts success run static queries - 0.035s - 2/2 56.72/s success run page queries - 0.095s - 3/3 31.71/s success onPreExtractQueries - 0.005s success extract queries from components - 0.096s success write out requires - 0.003s success building schema - 0.391s info Total nodes: 59, SitePage nodes: 6 (use --verbose for breakdown) success createPages - 0.019s success Checking for changed pages - 0.000s success update schema - 0.053s success onPreExtractQueries - 0.005s success extract queries from components - 0.075s success write out requires - 0.001s info changed file at /Users/userHoge/gatsby-tutorial-typescript/src/__generated__/gatsby-types.ts ⠀ You can now view gatsby-starter-hello-world in the browser. ⠀ http://localhost:8000/ ⠀ View GraphiQL, an in-browser IDE, to explore your site's data and schema ⠀ http://localhost:8000/___graphql ⠀ Note that the development build is not optimized. To create a production build, use gatsby build ⠀ pathContext is deprecated. Please use pageContext instead. For migration instructions, see https://gatsby.dev/pathContext Check the following files: ⠀ build/public/app-84fa7c1fb66eb764c29e.js build/public/app-f4786afe15c7b54b6784.js ⠀ success Building development bundle - 6.988s success building schema - 0.169s info Total nodes: 59, SitePage nodes: 6 (use --verbose for breakdown) success createPages - 0.038s success Checking for changed pages - 0.000s success update schema - 0.017s success onPreExtractQueries - 0.001s success extract queries from components - 0.043s info changed file at /Users/userHoge/gatsby-tutorial-typescript/src/__generated__/gatsby-types.ts success write out requires - 0.003s success run page queries - 0.024s - 1/1 41.16/s success building schema - 0.161s info Total nodes: 59, SitePage nodes: 6 (use --verbose for breakdown) success createPages - 0.014s success Checking for changed pages - 0.000s success update schema - 0.037s success onPreExtractQueries - 0.003s success extract queries from components - 0.065s success write out requires - 0.001s info changed file at /Users/userHoge/gatsby-tutorial-typescript/src/__generated__/gatsby-types.ts success Re-building development bundle - 1.723s success building schema - 0.145s info Total nodes: 59, SitePage nodes: 6 (use --verbose for breakdown) success createPages - 0.036s success Checking for changed pages - 0.000s success update schema - 0.033s success onPreExtractQueries - 0.001s info changed file at /Users/userHoge/gatsby-tutorial-typescript/src/__generated__/gatsby-types.ts success extract queries from components - 0.106s success write out requires - 0.001s success building schema - 0.293s info Total nodes: 59, SitePage nodes: 6 (use --verbose for breakdown) success createPages - 0.009s success Checking for changed pages - 0.000s success update schema - 0.016s success onPreExtractQueries - 0.002s success extract queries from components - 0.032s success write out requires - 0.000s info changed file at /Users/userHoge/gatsby-tutorial-typescript/src/__generated__/gatsby-types.ts ///// //これより以下は省略。success Re-building development bundle以下略が無限ループで繰り返される。 /////
上記のように無限ループになります。
試したこと
gatsby-config.jsからgatsby-plugin-typegen
をコメントアウトするとgatsby develop が成功します。(無限ループしない)
補足情報(FW/ツールのバージョンなど)
strictモードは一旦外しています。
tsconfig.json
{ "compilerOptions": { "target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */ "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ "lib": ["dom", "es2017"], /* Specify library files to be included in the compilation. */ "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ "outDir": "./build", /* Redirect output structure to the directory. */ "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ "noUnusedLocals": true, /* Report errors on unused locals. */ "noUnusedParameters": true, /* Report errors on unused parameters. */ "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ "baseUrl": "src", /* Base directory to resolve non-absolute module names. */ "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ "skipLibCheck": true, /* Skip type checking of declaration files. */ "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ }, "include": ["src/**/*", "gatsby-node/index.ts"], "exclude": ["node_modules", "public", "build"] }
gatsby-config.js
module.exports = { siteMetadata: { title: `typescriptのテスト`, description: `これは説明文章`, author: `test`, }, plugins: [ `gatsby-plugin-emotion`, { resolve: `gatsby-plugin-typography`, options: { pathToConfigModule: `src/utils/typography`, }, }, { resolve: `gatsby-source-filesystem`, options: { name: `src`, path: `${__dirname}/src/`, } }, `gatsby-transformer-remark`, { resolve: `gatsby-plugin-manifest`, options: { name: `GatsbyJS`, short_name: `GatsbyJS`, start_url: `/`, background_color: `#6b37bf`, theme_color: `#6b37bf`, display: `standalone`, icon: `src/images/icon.png`, }, }, `gatsby-plugin-offline`, `gatsby-plugin-react-helmet`, `gatsby-plugin-typegen`, ], }
参考にした記事
Gatsby.jsのTypeScript化 2020の記事にgatsby-plugin-typegenを用いたTS化の流れが載っています。
参考までに。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/05/21 07:04