0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Posted at

gatsbyとstrapiでうまく接続できないときに自分が確認して解消したものを紹介します。
#開発環境
strapi: "3.6.8",
Gatsby CLI version: "4.4.0",
Gatsby version: "4.2.0",

##Strapi側で確認すること
1つ目はテーブルのレコードはpublishedになっているか確認してください。なっていればOKです。
state.png
Draftになっている場合
スクリーンショット 2022-01-04 222655.png

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

2つ目はロールと権限からfind,findoneにチェックが入っているか確認してください。
行き方は
strapimenu.jpg
設定から入り、ロールと権限を選択し、Authenticatedに入ります。
image.png

image.png
権限の欄に移動し、公開したいテーブルの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テーブル名がでたら成功です。
image.png

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?