strapiの記事をGraphQLで取得(axiosを使って)

strapiに対してGraphQLで記事をキーワードでフィルタリングして取得する方法が分かったのでメモ。

実装

概要

• strapiにGraphQLプラグインをインストールしておく。
• サンプルコードではNoteというTypeのオブジェクトを取得する。
• 取得するプロパティはurl, site_title, site_image, site_description, note, publishedAt。
• publishedAtでソートする。
• keywordという値がnote, site_title, site_description含まれている。

参考

strapi GraphQL
はじめは読み方がわからなかったが、このドキュメントに必要なことは書いてあった。

ソースコード

const keyword = ''; // クエリ文字列

axios
      .post(process.env.NEXT_PUBLIC_API_BASE_URL + '/graphql',{
        query: `
        query($searchQuery: String!){
          notes(
            sort: "publishedAt:desc",
            filters: {
              or: [
                {note: {contains: $searchQuery} },
                {site_title: {contains: $searchQuery} },
                {site_description: {contains: $searchQuery} },
            ]}
        ){
            data{
              id,
              attributes{
                url, site_title, site_image, site_description, note, publishedAt
              }
            }
            meta {
              pagination {
                page
                pageSize
                total
                pageCount
              }
            }
          }
        }
    `,
    variables: {searchQuery: keyword}
      } )
      .then(response => {
        setNotes(response.data.data.notes.data);
      })
      .catch((error) => setError(error));