GATSBY - 5をグラフ化する方法- Gatsbyがデータを食べる方法

私の最後のポストでは、実際にギャツビーについてはあまり話していなかったし、代わりにギャツビーのために健全なバックエンドを設定していた.
健全性バックエンドの要点は、我々が使用する我々のレストランアプリの次のデータがあることです

食器、食事

狭量、料理になることができるグルテンのようなもの

レストランで働く従業員

仕事、従業員がいるレストランの仕事

そのデータがどのように存在するかに関係なく、我々は我々のGatsbyサイトへの訪問者のためにそれを示す方法を必要とします.そこにいくつかのステップがあります.

プラグインの使用方法

安全性を安全にAPIを使用して健全性に接続
3 .

gatsby設定を設定するgatsbyconfig.js あなたのルートフォルダで作成する必要がありますし、あなたのサイト全体に適用するものを設定します.最も一般的なものは以下の通りです.

サイトメタデータ-サイトの基本的なプロパティ

プラグイン-余分なものがそこに使用される.

flags -実験/非標準機能を許可する

Prefix -ドメインの特定の場所、すなわちブログ用のギャツビーを設定するには

module.exports = {
  siteMetadata: {
    title: `The Cat and Bear Restaurant`
    siteUrl: `whatever.com`
    description: 'Purrfect Food. Roarsome ambiance'
  }
}

今、我々は実際に我々は頭にいくつかのデータを持っているlocalhost:8000/___graphql 最初のクエリを構築するには、次の手順に従います.

query MyQuery {
  site {
    siteMetadata {
      title
    }
  }
}

戻り値:

{
  "data": {
    "site": {
      "siteMetadata": {
        "title": "The Cat and Bear Restaurant"
      }
    }
  },
  "extensions": {}
}

何が、このGraphicsのものですか?
あなたがその前にGraphqlを見なかったならば.簡単に言えば、Graphqlは、JSONで動作するような少しの構文を使ってクエリ(データを読むこと)や突然変異(データを変更する)をすることができます.少なくともSQLクエリを書くより楽しい.
それは完全にそれを説明するためにかなりの迂回されますが、私はそれの一般的な要点を取得することをお勧めすることができます.少なくとも最初のいくつかのビデオを見て、私はVisualisationsはそれがどのように動作するかを理解するのに多くの助けを見つける.
GraphSQLはどのようにgatsbyデータを処理するバックボーンですので、それを理解することが重要です.

プラグインをgatsbyにプラグインします
プラグインは、ギャツビーのスーパーパワーは、すでに存在し、自分のアプリでそれをフックを取っている.書き込み時に2516プラグがご利用いただけます.Gatsbyプラグインを見ることができますLibrary どんなものが利用できるかを味わうこと.
プラグインの追加はプラグインの名前を指定するのと同じくらい簡単です.

module.exports = {
  siteMetadata: {
    title: `The Cat and Bear Restaurant`
    siteUrl: `whatever.com`
    description: 'Purrfect Food. Roarsome ambiance'
  },
  plugins: [
    'PLUGIN_NAME'
  ]
}

これは、可能な最もデフォルトの方法で動作しますが、ドキュメントは通常、設定できるオプションを持っています.サイトマッププラグインの場合は次のようにします.

plugins: [
  //assume other plugins exist in this array
  {
    resolve: `gatsby-plugin-sitemap`,
    options: {
      sitemapSize: 5000
    }
  }
]

重要な注意:それはあまりにもあなたまであまりにもnpm install その名前による関連プラグイン.
Gatsbyでプラグインを取得するには、任意の複雑さは、プラグイン自体から来るので、それぞれのドキュメントを勉強する必要があります.私の場合、私たちは健全性について話をしなければなりません.

健全性のためにGraphSQLを展開します.あなたのSpirityフォルダタイプでsanity graphql deploy <dataset_name>

Gatsbyフォルダに戻って、それをインストールしてくださいnpm install gatsby-source-sanity

あなたの健全性プロジェクトのいくつかの詳細を取得します.プロジェクトを設定したと仮定しますhttps://manage.sanity.io/projects/ ) 必要です.

プロジェクトID

データセットの名前.

トークン.これは少し関係があります.「設定」、「API」、「新しいトークンの追加」によってトークンを作成できます.それはあなた自身の情報のラベルを与え、どこかに表示される長い文字列をコピーします.あなたはAPIの設定では、私たちは私たちはそれが生産されているときに我々は健全性に話をすることができますURLのCorsの起源を指定する必要があります精神的な注意を取る.

plugins: [
    {
      resolve: `gatsby-source-sanity`,
      options: {
        projectId: `<YOUR SANITY PROJECT ID`,
        dataset: `<PRODUCTION IN MY CASE>`,
        watchMode: true, //Allows changes to be reflected in Realtime for development
        token: process.env.SANITY_TOKEN, //DO NOT put you token in here. We need to keep our token secret. So we stick it into a .env file. See below...

      },
    },
  }
]

envファイルは、嫉妬深いハッカーを停止します.
すぐに、APIトークンは敏感です、人々が彼らにアクセスするならば、彼らは悪いことをすることができます.私たちのgatsbyの設定はgithubのようなバージョンコントロールに含まれます.代わりに、私たちはちょうど秘密を含んでいて、バージョン管理に入らないenvファイルへの参照を置きます.環境変数を持っていることは、環境変数を持っていることに対しても、生産的なものとは対照的に、テストデータベースへの接続など、環境の変化をするものにとっても

NPMインストールdotenv 簡単に環境ファイルを使うことができます

クリエイトア.env 我々のギャツビーサイトのルートで.

SanityCoreトークンを指定する

SANITY_TOKEN=reg4ergGW...etc

最後に、私たちのgatsby設定ファイルにdotenvを設定する必要があります.

import dotenv from 'dotenv'
dotenv.config({path: '.env'})

これは安全にAPIキーを使用して設定ファイルを取得します.
最後に、私たちはすべての作品をテストする必要があります、それは正しく動作しているかどうかを確認するには、gatsby設定で変数(ローカルの場合)のログをコンソールでコンソールする方法です.しかし、それが意図しているようにすべてのフックであるならば、我々が我々のgraphiqlに行くとき、我々は我々の正気が飛び出る内容を見始めなければなりません.健全性データはallSanity それで

query MyQuery { 
  allSanityMeals {
    nodes {
      name
    }
  }
  }

我々の仮定的なレストランサイトの我々の食事のすべての名前を返すべきです.Phew、上記のような何かをしたことがないならば、上記はかなりトリッキーに見えます、しかし、別々のバックエンドをフックすることと比較して、私は約束します、それは相対的な微風です!

3 . Gatsbyクエリを介して表示する
これまでのところ、我々はGrapsbyをGraphqlを通して我々の健全性について話すようになりました.最後のステップは、我々のページにGraphqlからデータを得ることです.つの完全に関係のないブログ記事のためのかなり全体の理由.前にすべての私の例としては、メニュー上にあるものを披露する気に架空のレストランサイトを中心に展開.
ギャツビーでは、現在のところ、我々のコンポーネントにデータを取得するために書くことができる2種類のクエリがあります

ページクエリ.これらは変数を許可しますが、トップレベルのページでのみ実行できます

static query -変数を許可しないでください.

イメージは、我々がより詳細に見ることができるデータの特別なビットです.

ページクエリ
ページのクエリはかなり簡単です.ここでは、すべての料理を見るかもしれない食品ページに次のGraphSQLクエリを追加することで、データベースから皿を得る方法があります

import React from 'react';

function FoodPage() {
  return (
    <div>
      <p>This is the Food page, where the dishes we serve are listed</p>
    </div>
  );
}

export const DishQuery = graphql`
  query DishQuery {
    dishes: allSanityDish {        //rename the output something nicer
      edges {
        node {
          id
          name
          price
          intolerences { 
            name
          }
          image {                // We will talk images in a bit
            asset {
              fluid(maxWidth: 400) {
                src
              }
            }
          }
        }
      }
    }
  }
`;

export default FoodPage;

これがうまくいけば、対応するdevツールを使って皿データが小道具に現れたことがわかります.良いステップですが、我々が我々のコードの小道具にアクセスすることによってもう少しそれを操ることができるかどうか見ましょう.
我々のFoodPageコンポーネントでは、小道具、またはより正確に小道具の中のデータフィールドを通過することによって、データにアクセスすることができます.この時点では、コンポーネントでそのデータを使用できます.

function FoodPage({ data }) {
  const dishes = data.dishes.edges;
  return (
    <div>
      <h1>We currently serve {dishes.length} dishes.</h1>
    </div>
  );
}

そこから、あなたが小道具として皿を渡すことを望むならば、あなたは配列の上で写像するために余分な構成要素を構築することができます.私はそれに入らないでしょう、しかし、あなたが非常に簡単でなければならない反応で働いているならば、ここでは、私が終えたコンポーネントファイルです:

import React from 'react';

function DishItem({ dish }) {
  return (
    <div>
      <h2>
        {dish.name} - {dish.price}{' '}
      </h2>
      <h3>Intolerence information:</h3>
      <p>
        {dish.intolerences.map((intolerence) => intolerence.name).join(', ')}{' '}
      </p>
    </div>
  );
}

export default function DishList({ dishes }) {
  return (
    <div>
      {dishes.map((dish) => (
        <DishItem key={dish.id} dish={dish.node} />
      ))}
    </div>
  );
}

結論
あなたがフロントエンドに別々のバックエンドをフックしたことがないならば、上記は少し怖いですが、私を信頼します、大部分のオプションと比較して、構成は微風です.私は健全性を使用しますが、ほとんどのヘッドレスのCMSEは似たようなベースバーで動作します.相違点
ときに、完全にスタックのアプリを行うと、フロントエンドとバックエンドの間の会話を設定すると私は楽しんでいないが、小さなステップにそれを壊すことによって何かは、少し怖いです.