WP GraphQLで取得したjsonデータを静的ファイルに表示したい

現在、プラグインのWP GraphQLを導入し、GraphQL IDE上でデータの取得は確認できております。
フロントとバックエンドを切り分けたく、静的ページに対して、一部の動的部分のみ（お知らせなど）フロントからAPIを叩いてデータの表示をしたいと考えております。
試行錯誤しましたが、開発ツールで確認したところjsonデータをうまく受け取れていないようでした。
ご教授よろしくお願い致します。

データの取得方法はなるべく簡単なものだとありがたいです。

ローカルサーバー　http://localhost:8888/

【ディレクトリ構造】

index.html
wp
┗ wordpress本体

GraphQL
1  posts{
2    edges{
3      node{
4        title
5      }
6    }
7  }
8}

json
1{
2  "data": {
3    "posts": {
4      "edges": [
5        {
6          "node": {
7            "title": "ホームページをリニューアルしました。",
8          }
9        },
10        {
11          "node": {
12            "title": "テストお知らせ",
13          }
14        }
15      ]
16    }
17  },
18  "extensions": {
19    "debug": [
20      {
21        "type": "DEBUG_LOGS_INACTIVE",
22        "message": "GraphQL Debug logging is not active. To see debug logs, GRAPHQL_DEBUG must be enabled."
23      }
24    ]
25  }
26}