TypeScriptでGraphQLのお勉強②

 前回のGraphQLのお勉強をしてみてそのままだとデータ追加とかの時にtsを書き替えるということになるのでそれが嫌だったのでjsonファイルにデータ部分を外出ししてデータを可変にできないかと思って、色々とゴニョゴニョしてみました。

TypeScriptが初心者以下の雑魚レベルのヨワヨワなのでかなり時間がかかりましたが、何とか実現できました。肝になるのはdata.tsを以下の様に書き替えるところとインタフェースを外出ししたこと位かな・・・。

後はBook以外で遊びたいと思ったので未検証ながら少し可変を意識した記述にしたところくらいです。

・data.ts

import { Data } from "../configs/types.js";
import jsonData from "./datas.json" assert { type: "json" };

export const datas: Data[] = jsonData;

・types.ts

export interface Data {
  title: string;
  author: string;
}

・ディレクトリ構成

src
|-- configs
|   |-- query.graphql
|   |-- resolver.ts
|   |-- schema.graphql
|   `-- types.ts
|-- data
|   |-- datas.json
|   `-- datas.ts
`-- index.ts

データを可変したい目的だったけれどもTypeScriptなので、jsonのテキストファイルにデータ追加してもトランスパイルしないと変更が反映されないという間抜けな結果になったのであまり意味がなかったかもしれない。データを可変的に使う場合はDB必須ですね。

次回(あるのか？)はMutationとかSubscriptionとか色々と触っていきつつ、AWSのAPPSyncの方に入っていければと思ってます。ともかくDB必須というのが分かったのでTypeScriptでDBの取り回しとかも勉強しつつやっていこうかなと

ちなみに作ったのはGitHubに上げました

https://github.com/Otazoman/graphql-example