Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gatsby 5 #28

Merged
merged 43 commits into from
Nov 24, 2022
Merged

Gatsby 5 #28

merged 43 commits into from
Nov 24, 2022

Conversation

aoirint
Copy link
Owner

@aoirint aoirint commented Nov 15, 2022

TODO

  • GraphQL v15→v16への移行に伴うエラー解消
  • gatsby-plugin-graphql-codegenを廃止
  • gatsby-plugin-graphql-codegenに依存していた箇所を公式機能に移行
    • 自動生成された型を参照するには、何もimportせずにQueriesというnamespaceなるものを参照すればいいらしい
  • gatsby-plugin-mdxがGraphQL APIからslug, htmlを削除したことに伴うエラー解消
  • 一時的に追加したslugifyパッケージの削除
  • gatsby-plugin-mdx/mdxが不等号によるリンク記法に対応しなくなったことに伴うエラー解消
  • mdxがつらいのでやめるかどうか決める
    • やめない
    • mdxの依存を外すのが面倒くさい
    • 数式描画機能が維持できるか不明 維持できた

GraphQL関連のエラー

Since we updated the internal graphql dependency to v16 you might run into a problem

Missing onError handler for invocation 'building-schema', error was 'Error: Cannot create as TypeComposer the following value:
  GraphQLScalarType({ name: "Date", description: "A date string, such as 2007-12-03, compliant with the ISO 8601 standard for
representation of dates and times using the Gregorian calendar.", specifiedByURL: undefined, serialize: [function String], parseValue:
[function String], parseLiteral: [function parseLiteral], extensions: {  }, astNode: undefined, extensionASTNodes: [] }).'. Stacktrace
was 'Error: Cannot create as TypeComposer the following value:
  GraphQLScalarType({ name: "Date", description: "A date string, such as 2007-12-03, compliant with the ISO 8601 standard for
representation of dates and times using the Gregorian calendar.", specifiedByURL: undefined, serialize: [function String], parseValue:
[function String], parseLiteral: [function parseLiteral], extensions: {  }, astNode: undefined, extensionASTNodes: [] }).

更新が止まっていそうなgatsby-plugin-graphql-codegenの依存を外してみる。
gatsby-plugin-typegenというプラグインもあったらしいけれど、公式機能の利用が推奨されている。
Gatsby 4.15で型生成機能がGatsby本体に実装されたらしい。

@aoirint
Copy link
Owner Author

aoirint commented Nov 15, 2022

うーん、gatsby-plugin-graphql-codegenを消しただけでは、エラーが消えなさそう。

 ERROR 

Cannot create as TypeComposer the following value:
  GraphQLScalarType({ name: "Date", description: "A date string, such as 2007-12-03, compliant with the ISO 8601 standard for
representation of dates and times using the Gregorian calendar.", specifiedByURL: undefined, serialize: [function String], parseValue:
[function String], parseLiteral: [function parseLiteral], extensions: {  }, astNode: undefined, extensionASTNodes: [] }).



  Error: Cannot create as TypeComposer the following value: 
    GraphQLScalarType({ name: "Date", description: "A date string, such as 2007-12-03, compliant with the ISO 8601 standard for represent
  ation of dates and times using the Gregorian calendar.", specifiedByURL: undefined, serialize: [function String], parseValue: [function
   String], parseLiteral: [function parseLiteral], extensions: {  }, astNode: undefined, extensionASTNodes: [] }).

Gatsby公式ドキュメントによると、Gatsbyがgraphqlパッケージの依存をv16に引き上げたことで、
graphqlパッケージのv15とv16が共存しているのがよくないっぽいのだけれど、
gatsby 5の子がgraphql 15に依存しているように見えるし、よくわからない。

$ npm ls graphql
blog-aoirint-com@1.0.0 /home/aoi/git/blog.aoirint.com/blog.aoirint.com-gatsby2
├─┬ gatsby-plugin-feed@5.0.0
│ └─┬ gatsby-plugin-utils@4.0.0
│   └── graphql@16.6.0
├─┬ gatsby-plugin-image@3.0.0
│ └─┬ gatsby-plugin-utils@4.0.0
│   └── graphql@16.6.0
├─┬ gatsby-plugin-manifest@5.0.0
│ └─┬ gatsby-plugin-utils@4.0.0
│   └── graphql@16.6.0
├─┬ gatsby-plugin-mdx@5.0.0
│ └─┬ gatsby-plugin-utils@4.0.0
│   └── graphql@16.6.0
├─┬ gatsby-plugin-sharp@5.0.0
│ └─┬ gatsby-plugin-utils@4.0.0
│   └── graphql@16.6.0
├─┬ gatsby-transformer-sharp@5.0.0
│ └─┬ gatsby-plugin-utils@4.0.0
│   └── graphql@16.6.0
└─┬ gatsby@5.0.1
  ├─┬ @graphql-codegen/add@3.2.1
  │ └── graphql@15.8.0
  ├─┬ @graphql-codegen/core@2.6.6
  │ ├─┬ @graphql-tools/schema@9.0.10
  │ │ ├─┬ @graphql-tools/merge@8.3.12
  │ │ │ └── graphql@15.8.0 deduped
  │ │ └── graphql@15.8.0 deduped
  │ ├─┬ @graphql-tools/utils@9.1.1
  │ │ └── graphql@15.8.0 deduped
  │ └── graphql@15.8.0 deduped
  ├─┬ @graphql-codegen/plugin-helpers@2.7.2
  │ ├─┬ @graphql-tools/utils@8.13.1
  │ │ └── graphql@15.8.0 deduped
  │ └── graphql@15.8.0 deduped
  ├─┬ @graphql-codegen/typescript-operations@2.5.6
  │ ├─┬ @graphql-codegen/visitor-plugin-common@2.13.1
  │ │ ├─┬ @graphql-tools/optimize@1.3.1
  │ │ │ └── graphql@15.8.0 deduped
  │ │ ├─┬ @graphql-tools/relay-operation-optimizer@6.5.12
  │ │ │ ├─┬ @ardatan/relay-compiler@12.0.0
  │ │ │ │ └── graphql@15.8.0 deduped
  │ │ │ └── graphql@15.8.0 deduped
  │ │ ├─┬ @graphql-tools/utils@8.13.1
  │ │ │ └── graphql@15.8.0 deduped
  │ │ └── graphql@15.8.0 deduped
  │ └── graphql@15.8.0 deduped
  ├─┬ @graphql-codegen/typescript@2.8.1
  │ ├─┬ @graphql-codegen/schema-ast@2.5.1
  │ │ ├─┬ @graphql-tools/utils@8.13.1
  │ │ │ └── graphql@15.8.0 deduped
  │ │ └── graphql@15.8.0 deduped
  │ └── graphql@15.8.0 deduped
  ├─┬ @graphql-tools/code-file-loader@7.3.12
  │ ├─┬ @graphql-tools/graphql-tag-pluck@7.3.12
  │ │ └── graphql@15.8.0 deduped
  │ └── graphql@15.8.0 deduped
  ├─┬ @graphql-tools/load@7.8.6
  │ └── graphql@15.8.0 deduped
  ├─┬ express-graphql@0.12.0
  │ └── graphql@15.8.0 deduped
  ├─┬ gatsby-plugin-page-creator@5.0.0
  │ └─┬ gatsby-plugin-utils@4.0.0
  │   └── graphql@16.6.0
  ├─┬ gatsby-plugin-utils@4.0.0
  │ └── graphql@16.6.0 deduped
  ├─┬ graphql-compose@9.0.10
  │ └─┬ graphql-type-json@0.3.2
  │   └── graphql@15.8.0 deduped
  ├─┬ graphql-tag@2.12.6
  │ └── graphql@15.8.0 deduped
  └── graphql@16.6.0

node_modulesを削除、npm install --legacy-peer-depsで本当に直るのか?

@aoirint
Copy link
Owner Author

aoirint commented Nov 15, 2022

npm install --legacy-peer-depsを実行したら、graphqlパッケージがなくなってしまった。

There was a problem loading the local build command. Gatsby may not be installed. Perhaps you need to run "npm install"? Cannot find
module 'graphql'
$ npm ls graphql
blog-aoirint-com@1.0.0 /home/aoi/git/blog.aoirint.com/blog.aoirint.com-gatsby2
└─┬ gatsby@5.0.1
  ├─┬ gatsby-plugin-utils@4.0.0
  │ └── graphql@16.6.0 deduped
  └── graphql@16.6.0

これが目的のオプションか、というのはわかるけれど、うーん??
gatsbyの子にしかgraphqlがないのが悪いのかな。package.jsonにgraphql 16を追加してみる?

@aoirint
Copy link
Owner Author

aoirint commented Nov 15, 2022

うーん???

    "graphql": "^16.6.0"
npm install --legacy-peer-deps
$ npm ls graphql
blog-aoirint-com@1.0.0 /home/aoi/git/blog.aoirint.com/blog.aoirint.com-gatsby2
├─┬ gatsby-plugin-feed@5.0.0
│ └─┬ gatsby-plugin-utils@4.0.0
│   └── graphql@16.6.0 deduped
├─┬ gatsby-plugin-image@3.0.0
│ └─┬ gatsby-plugin-utils@4.0.0
│   └── graphql@16.6.0 deduped
├─┬ gatsby-plugin-manifest@5.0.0
│ └─┬ gatsby-plugin-utils@4.0.0
│   └── graphql@16.6.0 deduped
├─┬ gatsby-plugin-mdx@5.0.0
│ └─┬ gatsby-plugin-utils@4.0.0
│   └── graphql@16.6.0 deduped
├─┬ gatsby-plugin-sharp@5.0.0
│ └─┬ gatsby-plugin-utils@4.0.0
│   └── graphql@16.6.0 deduped
├─┬ gatsby-transformer-sharp@5.0.0
│ └─┬ gatsby-plugin-utils@4.0.0
│   └── graphql@16.6.0 deduped
├─┬ gatsby@5.0.1
│ ├─┬ @graphql-codegen/add@3.2.1
│ │ └── graphql@16.6.0 deduped
│ ├─┬ @graphql-codegen/core@2.6.6
│ │ ├─┬ @graphql-tools/schema@9.0.10
│ │ │ ├─┬ @graphql-tools/merge@8.3.12
│ │ │ │ └── graphql@16.6.0 deduped invalid: "^14.7.0 || ^15.3.0" from node_modules/express-graphql
│ │ │ └── graphql@16.6.0 deduped invalid: "^14.7.0 || ^15.3.0" from node_modules/express-graphql
│ │ ├─┬ @graphql-tools/utils@9.1.1
│ │ │ └── graphql@16.6.0 deduped invalid: "^14.7.0 || ^15.3.0" from node_modules/express-graphql
│ │ └── graphql@16.6.0 deduped
│ ├─┬ @graphql-codegen/plugin-helpers@2.7.2
│ │ ├─┬ @graphql-tools/utils@8.13.1
│ │ │ └── graphql@16.6.0 deduped invalid: "^14.7.0 || ^15.3.0" from node_modules/express-graphql
│ │ └── graphql@16.6.0 deduped
│ ├─┬ @graphql-codegen/typescript-operations@2.5.6
│ │ ├─┬ @graphql-codegen/visitor-plugin-common@2.13.1
│ │ │ ├─┬ @graphql-tools/optimize@1.3.1
│ │ │ │ └── graphql@16.6.0 deduped invalid: "^14.7.0 || ^15.3.0" from node_modules/express-graphql
│ │ │ ├─┬ @graphql-tools/relay-operation-optimizer@6.5.12
│ │ │ │ ├─┬ @ardatan/relay-compiler@12.0.0
│ │ │ │ │ └── graphql@16.6.0 deduped invalid: "^14.7.0 || ^15.3.0" from node_modules/express-graphql
│ │ │ │ └── graphql@16.6.0 deduped invalid: "^14.7.0 || ^15.3.0" from node_modules/express-graphql
│ │ │ ├─┬ @graphql-tools/utils@8.13.1
│ │ │ │ └── graphql@16.6.0 deduped invalid: "^14.7.0 || ^15.3.0" from node_modules/express-graphql
│ │ │ └── graphql@16.6.0 deduped invalid: "^14.7.0 || ^15.3.0" from node_modules/express-graphql
│ │ └── graphql@16.6.0 deduped
│ ├─┬ @graphql-codegen/typescript@2.8.1
│ │ ├─┬ @graphql-codegen/schema-ast@2.5.1
│ │ │ ├─┬ @graphql-tools/utils@8.13.1
│ │ │ │ └── graphql@16.6.0 deduped invalid: "^14.7.0 || ^15.3.0" from node_modules/express-graphql
│ │ │ └── graphql@16.6.0 deduped invalid: "^14.7.0 || ^15.3.0" from node_modules/express-graphql
│ │ └── graphql@16.6.0 deduped
│ ├─┬ @graphql-tools/code-file-loader@7.3.12
│ │ ├─┬ @graphql-tools/graphql-tag-pluck@7.3.12
│ │ │ └── graphql@16.6.0 deduped invalid: "^14.7.0 || ^15.3.0" from node_modules/express-graphql
│ │ └── graphql@16.6.0 deduped
│ ├─┬ @graphql-tools/load@7.8.6
│ │ └── graphql@16.6.0 deduped
│ ├─┬ express-graphql@0.12.0
│ │ └── graphql@16.6.0 deduped invalid: "^14.7.0 || ^15.3.0" from node_modules/express-graphql
│ ├─┬ gatsby-plugin-page-creator@5.0.0
│ │ └─┬ gatsby-plugin-utils@4.0.0
│ │   └── graphql@16.6.0 deduped invalid: "^14.7.0 || ^15.3.0" from node_modules/express-graphql
│ ├─┬ gatsby-plugin-utils@4.0.0
│ │ └── graphql@16.6.0 deduped invalid: "^14.7.0 || ^15.3.0" from node_modules/express-graphql
│ ├─┬ graphql-compose@9.0.10
│ │ └─┬ graphql-type-json@0.3.2
│ │   └── graphql@16.6.0 deduped invalid: "^14.7.0 || ^15.3.0" from node_modules/express-graphql
│ ├─┬ graphql-tag@2.12.6
│ │ └── graphql@16.6.0 deduped invalid: "^14.7.0 || ^15.3.0" from node_modules/express-graphql
│ └── graphql@16.6.0 deduped
└── graphql@16.6.0

@aoirint
Copy link
Owner Author

aoirint commented Nov 15, 2022

lockファイル消してなかった。lockファイル消したあとでlegacyなんちゃらでとりあえずGraphQL周りは解決しそう。

新しいエラー

 ERROR 

[
  GraphQLError: Cannot query field "slug" on type "Mdx".

URL slugが削除されている?

クエリにいろいろ変更ありそう

image

Removed timeToRead, rawBody, slug, headings, html, mdxAST, wordCount, fileAbsolutePath from the query result. You can check Extending the GraphQL MDX nodes to learn how to re-implement some of them on your own. Also check Updating MDX nodes for guidance on changing your queries

@aoirint
Copy link
Owner Author

aoirint commented Nov 15, 2022

うーん

 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "slug" on type "MdxFields".

If you don't expect "slug" to exist on the type "MdxFields" it is most likely a typo. However, if
you expect "slug" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node/gatsby-config, please
try a restart of your development server.
- You want to optionally use your field "slug" and right now it is not used anywhere.

It is recommended to explicitly type your GraphQL schema if you want to use optional fields.

@aoirint aoirint marked this pull request as draft November 15, 2022 08:46
@aoirint
Copy link
Owner Author

aoirint commented Nov 15, 2022

あー、npmパッケージに分割されたのか

npm install @sindresorhus/slugify@^1

@aoirint
Copy link
Owner Author

aoirint commented Nov 15, 2022

ん???

      value: `/${slugify(node.frontmatter.title)}`

なんかslugをタイトルから生成してるが??(大抵非ASCIIでは役に立たない)
slugがGatsbyの責務ではなくなって、サードパーティのそれっぽい汎用ライブラリを紹介しているだけか

ディレクトリパスから作ってくれるからGatsbyを使ってるんだけど
コレジャナイ

@aoirint
Copy link
Owner Author

aoirint commented Nov 15, 2022

If you don’t want to use the frontmatter.title, adjust what you input to slugify(). For example, if you want information from the File node, you could use getNode(node.parent).

うーん自前で実装する分が増えるのか...
いまでも記事のHTMLパス作成をcreatePages APIでやらされているけれど、こんな実装をサイト単位で抱えるのがとても苦しい

確かに自由度は増えるけど、実装量が増えるのがつらい(あまりにも実装量が増えるなら、はじめからNext.jsでいいじゃんとなる...のか? GraphQL APIとかプラグインエコシステムとかが便利ではある)
共通化したいならプラグイン化・パッケージ化しろということか...(作り方わからない)

@aoirint
Copy link
Owner Author

aoirint commented Nov 20, 2022

As mentioned above the html field was removed from the GraphQL node. We know that some of you used this for e.g. gatsby-plugin-feed. Unfortunately, for compatibility and performance reasons we had to remove it. We recommend using the excerpt field in the meantime until we find a feasible solution to provide MDX rendered as HTML.

はい

@aoirint
Copy link
Owner Author

aoirint commented Nov 20, 2022

@aoirint
Copy link
Owner Author

aoirint commented Nov 20, 2022

npm installのエラーは実行しなおしたら出なくなった
よくわからない(もともとpackage-lock.jsonが存在する状態で実行したから?)

@aoirint
Copy link
Owner Author

aoirint commented Nov 20, 2022

slugは...onCreateNodeを追加で実装することが必要になった
ファイルパスからの生成はgatsby-source-filesystemがやってくれるらしい(basePathが複数の場合はどうするんだろう...)

@aoirint
Copy link
Owner Author

aoirint commented Nov 20, 2022

あとはgatsby-plugin-feedで、RSSに埋め込んでいた本文HTMLが使えなくなった
冒頭部分にあたるexcerptをしばらく使ってくれということだったのでそうした

@aoirint
Copy link
Owner Author

aoirint commented Nov 20, 2022

あとはGraphQLの構文が変わったらしい警告がnpm run buildで出てくるので、一通り修正したい

warn Deprecated syntax of sort and/or aggregation field arguments were found in your query (see https://gatsby.dev/graphql-nested-sort-and-aggregate). Query was automatically converted to a new syntax. You should update query in your code.

@aoirint
Copy link
Owner Author

aoirint commented Nov 24, 2022

ので、現行の機能を維持するならgatsby-plugin-mdxしか選択肢がなさそう

@aoirint
Copy link
Owner Author

aoirint commented Nov 24, 2022

ので、Markdown文書の方で<https://example.com>[https://example.com](https://example.com)にする置換をかけて、これから書くMarkdown文書で[https://example.com](https://example.com)の書き方をするようにする、という選択肢が有力だけどやりたくない

@aoirint
Copy link
Owner Author

aoirint commented Nov 24, 2022

ERROR #gatsby-plugin-mdx_10001  PLUGIN

Failed to compile the file "/home/aoi/git/blog.aoirint.com/blog.aoirint.com-gatsby2/contents/2020/comp
uter_vision_fisheye_distortion/index.md". Original error message:

Could not parse expression with acorn: Expecting Unicode escape sequence \uXXXX


 ERROR #85928

@aoirint
Copy link
Owner Author

aoirint commented Nov 24, 2022

@aoirint
Copy link
Owner Author

aoirint commented Nov 24, 2022

 ERROR #gatsby-plugin-mdx_10001  PLUGIN

Failed to compile the file "/home/aoi/git/blog.aoirint.com/blog.aoirint.com-gatsby2/contents/2021/voic
evox_autobuild_motivation/index.md". Original error message:

Unexpected character `!` (U+0021) before name, expected a character that can start a name, such as a
letter, `$`, or `_` (note: to create a comment in MDX, use `{/* text */}`)


 ERROR #gatsby-plugin-mdx_10001  PLUGIN

Failed to compile the file
"/home/aoi/git/blog.aoirint.com/blog.aoirint.com-gatsby2/contents/2021/voicevox_autobuild/index.md".
Original error message:

Unexpected character `!` (U+0021) before name, expected a character that can start a name, such as a
letter, `$`, or `_` (note: to create a comment in MDX, use `{/* text */}`)


 ERROR #gatsby-plugin-mdx_10001  PLUGIN

Failed to compile the file "/home/aoi/git/blog.aoirint.com/blog.aoirint.com-gatsby2/contents/2021/voic
evox_autobuild_engine_docker/index.md". Original error message:

Unexpected character `!` (U+0021) before name, expected a character that can start a name, such as a
letter, `$`, or `_` (note: to create a comment in MDX, use `{/* text */}`)


 ERROR #gatsby-plugin-mdx_10001  PLUGIN

Failed to compile the file "/home/aoi/git/blog.aoirint.com/blog.aoirint.com-gatsby2/contents/2021/voic
evox_autobuild_engine_binary/index.md". Original error message:

Unexpected character `!` (U+0021) before name, expected a character that can start a name, such as a
letter, `$`, or `_` (note: to create a comment in MDX, use `{/* text */}`)


 ERROR #gatsby-plugin-mdx_10001  PLUGIN

Failed to compile the file "/home/aoi/git/blog.aoirint.com/blog.aoirint.com-gatsby2/contents/2021/voic
evox_autobuild_editor_binary/index.md". Original error message:

Unexpected character `!` (U+0021) before name, expected a character that can start a name, such as a
letter, `$`, or `_` (note: to create a comment in MDX, use `{/* text */}`)


 ERROR #gatsby-plugin-mdx_10001  PLUGIN

Failed to compile the file "/home/aoi/git/blog.aoirint.com/blog.aoirint.com-gatsby2/contents/2021/voic
evox_autobuild_context/index.md". Original error message:

Unexpected character `!` (U+0021) before name, expected a character that can start a name, such as a
letter, `$`, or `_` (note: to create a comment in MDX, use `{/* text */}`)


 ERROR #gatsby-plugin-mdx_10001  PLUGIN

Failed to compile the file "/home/aoi/git/blog.aoirint.com/blog.aoirint.com-gatsby2/contents/2020/mult
i_channel_speaker/index.md". Original error message:

Could not parse expression with acorn: Expecting Unicode escape sequence \uXXXX

@aoirint
Copy link
Owner Author

aoirint commented Nov 24, 2022

voicevox_* はTwitter用のblockquote HTMLタグが入っていることが原因だと思うけど、multi_channel_speakerはなんだ...? まさかCコードの中の不等号...?

-> HTMLコメントが使えなくなったらしい。これが原因

@aoirint
Copy link
Owner Author

aoirint commented Nov 24, 2022

rehypeのメンテナンスが終了している問題は、数式生成をgatsby-plugin-katexに移行することで解決するかもしれないけれど、もともとこれを使っていなかった理由が思い出せない

@aoirint
Copy link
Owner Author

aoirint commented Nov 24, 2022

とりあえず動くことが大事だと思いなおして、必要なMarkdown記事の変換はやってみることにした

@aoirint
Copy link
Owner Author

aoirint commented Nov 24, 2022

一応 aoirint/aoirint-blog-contents#34 と組み合わせて、npm startが通るようになった

@aoirint
Copy link
Owner Author

aoirint commented Nov 24, 2022

npm run buildが通るようになった

@aoirint aoirint marked this pull request as ready for review November 24, 2022 20:38
@aoirint
Copy link
Owner Author

aoirint commented Nov 24, 2022

いけいけ

@aoirint aoirint merged commit f58798b into main Nov 24, 2022
@aoirint aoirint deleted the patch-gatsby-5 branch November 24, 2022 20:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant