投稿記事一覧に戻る

Gatsbyに入門してつまづいたところ


別途で入門記事は書きますが、備忘録的なところで、つまづいた所を書いていきます。

useStaticQueryがエラー


それ自体がページとならないコンポーネント(HeaderやFooterなど)において、GraphQLからデータをとってくるときに必要です。

ここで、useStaticQueryだけimportして、graphqlをimportしないと
```
Error: The result of this StaticQuery could not be fetched.
```
と怒られます。当たり前かもしれませんが、ひっかかりました。

gatsby-config.jsが反映されない


gatsby developを使用している時は、一度停止して、もう一度実行するまでは反映されません。

ブラウザ側でAlartしてくれると思います。

JSXでscriptを埋め込む


JSXでscriptを埋め込むには

<script  dangerouslySetInnerHTML={{

    __html: `

    console.log(“Hello”)

    `

 }}/>


みたいにしなければならない。これはgatsbyと言うよりJSXのつまずき。

gatsby-plugin-imageのサイズ調整


CSSでimgタグにwidthなどを指定すると、スタイルが崩れてしまうので、gatsby-plugin-image側はlayoutをFULL_WIDTHにしておいて、親要素のwidthで調整するのが良さそうです。

mdから埋め込んだ画像に対しては、現状jQueryで親要素を生成して、なんとか調整しています。もっといい方法はありそう。

Prop aria-current did not match

Prop `aria-current` did not match. Server: "null" Client: "page"


のエラーは、config.jsに

flags: { DEV_SSR: false }

を追記したら直りました。無視してもbuildした後は表示されないので、無視でもいいと思います。

餅草 よもぎ

物を作る/競争が苦手/徐々にレイヤが下がっていく

本当にお気軽にDMください。

Twitter:@kusa_yomogi
GitHub:Sora513
LottieFiles:Sora513
Powered by