GraphiQLとGatsbyでのGraphQLの使用例

GraphiQL

GraphQLが提供するIDE.これを使用して、要求できるデータを理解します.
GraphiPL IDEリンク:gatsby developmentサーバを実行するときに表示される2つのリンクのうちの次のリンク.

GraphiPL IDE

検索してサイトのメタデータを取得

GatsbyでのGraphQL Query

Gatsby:
1.pagesフォルダのファイル
2.Gatsby APIで生成されたページ上のテンプレートファイル
クエリーは、でのみ定義できます.

使用例
metadaQuery変数にクエリーとエクスポートが含まれている場合、Gatsby内部でリクエストが送信されます.
応答をPropsとしてファイル内のInfoPageコンポーネント関数に渡します.

import React, { FunctionComponent } from 'react'
import { graphql } from 'gatsby'
import Text from 'components/Text'

type infoPageProps = {
    "data": {
      "site": {
        "siteMetadata": {
          "author": string,
          "description": string,
          "title": string
        }
      }
    }
  }

const InfoPage: FunctionComponent<infoPageProps> = function ({
    data: {
        site: {
            siteMetadata: { author, description, title },
        },
    },
}) {
    return <div>
        <Text text={title} />
        <Text text={author} />
        <Text text={description} />
    </div>
}

export default InfoPage

export const metadataQuery = graphql `
    {
        site {
            siteMetadata {
                title
                description
                author
            }
        }
    }
`

構成部品でクエリーを使用するには:StaticQuery
※StaticQueryの使用例

//StaticQuery
import React from "react"
import { StaticQuery, graphql } from "gatsby"

export default function Header() {
  return (
    <StaticQuery
      query={graphql`
        query HeadingQuery {
          site {
            siteMetadata {
              title
            }
          }
        }
      `}
      render={data => (
        <header>
          <h1>{data.site.siteMetadata.title}</h1>
        </header>
      )}
    />
  )
}

// useStaticQuery
import { useStaticQuery, graphql } from "gatsby"

export const useSiteMetadata = () => {
  const { site } = useStaticQuery(
    graphql`
      query SiteMetaData {
        site {
          siteMetadata {
            title
            siteUrl
            headline
            description
            image
            video
            twitter
            name
            logo
          }
        }
      }
    `
  )
  return site.siteMetadata
}

リファレンス
https://www.gatsbyjs.com/docs/how-to/querying-data/static-query/
https://www.inflearn.com/course/gatsby-%EA%B8%B0%EC%88%A0%EB%B8%94%EB%A1%9C%EA%B7%B8/lecture/76338?tab=note&mm=close