Axiosを利用してGraphQL接続する。(TypeScript編)

はじめに

前回記事の続きです。実際にフロントから接続する事を想定し、AxiosでHTTP通信を実施します。

成果物

Hands-on

ディレクトリ構成

~/develop/react/react_study/api$ tree -I node_modules 
.
├── api.ts
├── package.json
└── yarn.lock

0 directories, 3 files

package.json

{
  "name": "api",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "axios": "^0.27.2"
  }
}

値の取得

api.ts

import axios from "axios";

// データ取得
const result = axios({
  url: "https://kkfactory.hasura.app/v1/graphql",
  method: "POST",
  headers: {
    "x-hasura-admin-secret": "AUTH_SECRET", //値変更してね！！
  },
  data: {
    query: `
    query {
    users {
        id
        name
    }
 }
`,
  },
});

result.then((res) => {
  console.log(res.data.data.users);
});

API実行

~/develop/react/react_study/api$ ts-node api.ts
[ { id: 1, name: 'kkfactory' } ]

値の追加

実行結果

~/develop/react/react_study/api$ ts-node api.ts
{ data: { insert_users: { affected_rows: 1 } } }

api.ts

import axios from "axios";

axios({
  url: "https://kkfactory.hasura.app/v1/graphql",
  method: "POST",
  headers: {
    "x-hasura-admin-secret": "AUTH_SECRET", //値変更してね！！
  },
  data: {
    query: `
    mutation {
        insert_users(objects:[{name:"kouji",password:"password"}]) {
            affected_rows
        }
    }
    `,
  },
}).then((res) => {
  console.log(res.data);
});

実行結果

~/develop/react/react_study/api$ ts-node api.ts
{ data: { insert_users: { affected_rows: 1 } } }