🦊

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

2022/08/14に公開約1,600字

はじめに

前回記事の続きです。実際にフロントから接続する事を想定し、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 } } }

Discussion

ログインするとコメントできます