WP graphQLでクエリ作成

wordpressのデータを持ってくるために、今回はgraphQLを採用。なぜgraphQLかというとWordPressのプラグインでWP graphQLというものがあり、このプラグインでクエリの作成、検証をWordPress管理画面上ででき、便利だから。このプラグインが本ブログの肝といってもいいかも。

こんなかんじで、持ってきたいデータのクエリを作成でき、返ってくるJSONを検証することもできちゃう。

今回作ったクエリはこんな感じ。今回は投稿データを持ってきている。

static postList = `query MyQuery {
  posts {
    edges {
      node {
        id
        title
        slug
        date
        modified
        excerpt
        featuredImage {
          node {
            sourceUrl
          }
        }
      }
    }
  }
}`

次にクエリで返ってくるJSONをクライアント側で扱いやすいように成形する。

 const res =  postList;
   
   const postList = res.data.data.posts.edges.map((data) => {
                const post　= {
                    id: data.node.id,
                    title: data.node.title,
                    slug: data.node.slug,
                    date: data.node.date,
                    modified: data.node.modified,
                    excerpt: data.node.excerpt,
                    featuredImage: {
                        url: data.node.featuredImage.node.sourceUrl
                    },
                
                }
                return post
            })

    	
   こんなかんじで表示させる
    {postList!.map((post) => {
        return (
          <div key={post.id} className='w-1/3 p-4'>
            <article className='shadow-sm shadow-gray-200'>
              <div>
                <img 
                  className='w-full h-56 object-cover'
                  src={post.featuredImage.url} /> 
              </div>
              <div className='py-4 px-5'>
                <span>{post.category.name}</span>
                <h1 className='font-bold'>{post.title}</h1>
                <p>{post.excerpt}</p> 
                <span>{post.date}</span>
              </div>
            </article>
          </div>
        )
      })}

今回はWordPressのプラグインでgraphQLをつかって、データをクライアント側とやり取りする部分についてでした。基本的にこのブログは上記の感じでWordpressのデータを持ってきて表示させてます。

次回からはVercelデプロイ周りと運用などについて書いていきます。

今回使ったWordPressプラグイン

wpgraphQL　https://www.wpgraphql.com/

参考にさせていただいた記事

https://zenn.dev/fbd_tech/books/519201590c4e98/viewer/835001

https://zenn.dev/monicle/articles/0421c37d46c732#microcms_sdk_generator-を導入する

https://qiita.com/shotashimura/items/3f9e04b93e79592030a4#スキーマ言語とは