質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Gatsby

Gatsbyとは、Reactベースの静的サイトジェネレータ。最新のフロントエンド技術を活かし、機能豊富なWebサイトやアプリケーションを作ることが可能です。GraphQLを用いてあらゆるソースからサイトのデータを取得。指定した設定に基づいて静的サイトを構築することができます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2412閲覧

gatsby-plugin-typegen を使って gatsby develop すると components にあるファイルの useStaticQueryの型が消えてしまう

moimoi_sushi

総合スコア26

Gatsby

Gatsbyとは、Reactベースの静的サイトジェネレータ。最新のフロントエンド技術を活かし、機能豊富なWebサイトやアプリケーションを作ることが可能です。GraphQLを用いてあらゆるソースからサイトのデータを取得。指定した設定に基づいて静的サイトを構築することができます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1グッド

1クリップ

投稿2020/12/16 06:39

前提・実現したいこと

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化の流れが載っています。
参考までに。

m0a👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんにちは。
gatsby-config.jsで gatsby-source-filesystem などファイル自動で読み込んでgraphQLで利用できるようなプラグインを使っていたりしませんでしょうか?

gatsby-plugin-typegenはどうやらファイルの変更検知が走ると、型ファイルの再作成を行うようです。

例えばgatsby-source-filesystemを使っている場合は次のようにgatsby-plugin-typegenが作る型ファイルを読み込まないように設定してみてくださいませ。私はこれで無限ループが解消しました。

gatsby

1plugins: [ 2 { 3 resolve: `gatsby-source-filesystem`, 4 options: { 5 name: `src`, 6 path: `${__dirname}/src/`, 7 ignore: [`${__dirname}/src/__generated__/*.ts`] //gatsby-plugin-typegenが出力するファイル 8 } 9 }, 10]

投稿2021/02/25 13:09

tubone24

総合スコア21

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

moimoi_sushi

2021/05/21 07:04

遅レスすみません!gatsby-source-filesystemは普通に使っていたと思います オプションでignore指定するのありがたい知見です
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問