WordpressからGraphQLでデータを取ってくる時にApolloはいらない

WordpressからGraphQLで記事を取ってくるだけならfetchを使える

Apolloを使うと色々設定が面倒で余計な問題も増えて大変だったのですが、以下のようにすればApolloなしで記事を取ってこれます。

queries.tsx

export const fetchGQL = async (query: string) => {
  return await fetch(
    "https://YOUR_WORDPRESS.com/graphql",
    {
      method: "POST",
      body: JSON.stringify({
        query: GET_WORK_POSTS,
      }),
      headers: {
        "Content-Type": "application/json",
      },
      next: {
        revalidate: 60
      }
    }
  ).then((res) => res.json());
}

export const GET_WORK_POSTS = `
{
  posts(where: {categoryName: "Work"}) {
    nodes {
      title
    }
  }
}
`

環境

  "dependencies": {
    "@types/node": "20.4.4",
    "@types/react": "18.2.15",
    "@types/react-dom": "18.2.7",
    "eslint": "8.45.0",
    "eslint-config-next": "13.4.12",
    "graphql": "^16.7.1",
    "next": "13.4.12",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.1.6"
  },

余談

WordpressをヘッドレスCMSとして使おうとして、いろんなサイトで「GraphQL使うならApolloを使うのが一般的」、みたいな情報が多かったのですが、まさかのApollo公式ブログでfetch使って記事を取ってくることができる事が判明したのと、日本語記事が少なかったのでシェアです。インストールもいらないしコード自体もApolloを使うよりシンプルです。