GatsbyのuseStaticQueryフックを使用するためのクイックガイド

投稿日: 2022-04-20 2022-04-20
タグ: GatsbyJS

useStaticQuery ReactHookがバージョン2.1.0からGatsby.jsに追加されました。これは、非常に便利な作成方法です（ビルド時）。 Gatsbyサイト内の任意のコンポーネントからのGraphQLクエリ。このクイックレッスンでは、プロジェクトにuseStaticQueryを実装する方法について説明します。

概要と要件

この簡単な例では、ContactInfoコンポーネントをWebサイトに追加します。これは、GatsbyサイトのsiteMetadata構成から連絡先情報を取得して表示する再利用可能なコンポーネントになります。始めましょう！

このレッスンの要件は1つだけです。それは、Gatsbyプロジェクトがすでに設定されていて、私と一緒に編集する準備ができていることです。その点に到達するためのヘルプが必要な場合は、 Gatsby v2 の最初のステップのイントロチュートリアルに従って、ここに戻ってください。

連絡先情報を追加

まず、gatsby-config.jsファイル内のsiteMetadataオブジェクトに連絡先情報を追加しましょう。簡単にするために、電話番号と電子メールアドレスを追加するだけです。

gatsby-config.js

siteMetadata: {
  title: "Gator's Empanada Express",
  siteUrl: "https://example-site.com/",
  phone: "(555) 567-0123",
  email: "[email protected]",
}
// plugins: { ... }

コンポーネントを作成する

連絡先データを配置したら、それをフェッチして表示するコンポーネントを作成するだけです。そしてもちろん、useStaticQueryフックを使ってそれを行います！

/components/ContactInfo.jsに新しいファイルを作成してから、次のコードを追加してみましょう。

/components/ContactInfo.js

import React from "react";
import { useStaticQuery, graphql } from "gatsby";

const ContactInfo = () => {
  const data = useStaticQuery(graphql`
    query ContactInfoQuery {
      site {
        siteMetadata {
          phone,
          email
        }
      }
    }
  `);

  const { phone, email } = data.site.siteMetadata;

  return (
    <div>
      <h3>Contact Us:</h3>
      <p>phone: {phone}</p>
      <p>
        email: <a href={`mailto:${email}`}>{email}</a>
      </p>
    </div>
  )
};

export default ContactInfo;

これがどれほど簡単かわかりますか？混乱を招くレンダリングプロップを処理する必要はありません。非ページコンポーネント内でGraphQLクエリを作成しています！🎉

このコンポーネントをサイトのどこにでも含めて連絡先情報を表示できるようになりました。siteMetadataでこれらの設定を変更すると、サイト全体で更新されます。

このデータはsiteMetaDataからのものである必要はないことに注意してください！最近のブログ投稿、顧客評価、または今後の製品リリースのリストの取得など、GraphQLクエリを実行する任意のソースからデータを取得できます。

例外

useStaticQueryは非常に便利ですが、現在2つの制限があります。

useStaticQueryを使用する場合、GraphQLクエリ内で変数を使用することはできません。（結局のところ、それはuseStaticQueryと呼ばれています！ 😁）ページレベルのクエリを介してそれらを行う必要があります。
コンポーネントごとに使用できるuseStaticQueryのインスタンスは1つだけです。（しかし、その中でいくつかのクエリを行うことができます！ 1つのクエリ/インスタンスを介して、siteMetadata、最近の投稿などすべてをクエリできます。）

結論

ご覧のとおり、Gatsbyの組み込みuseStaticQueryフックは、 Gatsby Toolbelt に組み込むための非常に便利で使いやすい機能です！特に最近のブログ投稿や製品リリースなどで頻繁に使用しています。（そして、はい、私はそれをメタ/連絡先情報にも使用しました！ 👍）

詳細な情報と例については、GatsbyのuseStaticQueryに関する公式ドキュメントにアクセスすることをお勧めします。いつものように、彼らのドキュメントはよく書かれていて、しっかりと維持されているので、ページは常に最新の情報と例を提供します！

getdocs

13036