GraphQLを使ってデータを取得する

# graphqlサーバーにアクセス

http://localhost:8000/___graphql

# 操作方法

1. Explorerでほしいデータを選択

2. ▶ボタンで実行

3. 実行結果がGraphiQLの左側に表示される

4. コードから実行したい場合はCode Exporterを参考にする

https://i.gyazo.com/18e254f0305b8fa8ecd52391dd7ac653.png

# データはどこからきたの

code:gatsby-config.js

siteMetadata: {

title: "keisukesan",

},

↑このデータが取得できる

# サイトに表示する

今回は型は考えません。

code:index.tsx

import * as React from "react"

import {graphql} from "gatsby";

// markup

const IndexPage = ({ data }: any) => {

return (

<main>

<p>hello gatsby</p>

{JSON.stringify(data)}

</main>

)

}

export const query = graphql`

{

site {

siteMetadata {

siteUrl

title

}

}

}

`

export default IndexPage