GatsbyJSとStrapiでデータをやり取りする

gatsbyとstrapiでうまく接続できないときに自分が確認して解消したものを紹介します。

開発環境

strapi: "3.6.8",
Gatsby CLI version: "4.4.0",
Gatsby version: "4.2.0",

Strapi側で確認すること

1つ目はテーブルのレコードはpublishedになっているか確認してください。なっていればOKです。

Draftになっている場合

レコードを選択し、編集できる画面に移動してください
画像のようにPublishになっていたらそのボタンを押してUnPublishedの表記になれば大丈夫です。

2つ目はロールと権限からfind,findoneにチェックが入っているか確認してください。
行き方は

設定から入り、ロールと権限を選択し、Authenticatedに入ります。

権限の欄に移動し、公開したいテーブルのfindとfindoneにチェックをいれて保存します。

保存したら確認のため
GraphQLから取得してみてください。
http://localhost:1337/graphql

Gatsby側で確認すること

gatsby-source-strapiがインストールされているか、またはgatsby-config.jsの表記があっているか

・gatsby-source-strapi Pluginについて公式ページを確認してインストールしてください
https://www.gatsbyjs.com/plugins/gatsby-source-strapi/

・gatsby-config.jsの表記について

{
  resolve: `gatsby-source-strapi`,
  options: {
    apiURL: `http://localhost:1337`,
    queryLimit: 1000,
    collectionTypes: [
      `テーブル名`,
      `テーブル名`,
    ],
  },
},

---

とすることでうまくいきました。
インストール、記入ができたら確認してみます。
http://localhost:8000/___graphql

このようにStrapiテーブル名がでたら成功です。

たまにあったこと

Strapi側で更新したのにGatsbyで反映しないときがありました。そのときはGatsby側のローカルホストを一旦切断して、
再接続をしてみてください。また、それでもうまくいかなくて次の日やったら反映されたときもあったので、
なにか情報をもってるかたがいたら教えて欲しいです。

初めての投稿になります。ぜひフィードバック等いただけたら幸いです。