TypeScriptでGraphQLのお勉強①
AWSのAPPSyncを使う前にGraphQLのお勉強をしようと思い、Appolo+TypeScriptを使って実験をしてみた。弱っちいので相変わらずコピペの権化みたいな感じになっています。
queryとmutationとsubscriptionがあるとかいうのはなんとなくは分かったものの、どうやって使うかはこれから試行錯誤ですかな・・・
◆環境構築
1.nodeの仮想環境インストール
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
$ echo 'export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm'
$ source ~/.bashrc
$ nvm ls-remote
$ nvm install stable
$ nvm install --lts --latest-npm
$ nvm alias default 'lts/*'
$ nvm current
v18.17.1
2.Appoloほか環境構築
$ mkdir graphql-server-example && \
cd graphql-server-example && \
mkdir configs && \
mkdir data && \
touch index.ts && \
touch configs/resolver.ts && \
touch configs/query.graphql && \
touch configs/schema.graphql && \
touch data/book.ts && \
npm install ts-node && \
npm install --save-dev typescript @types/node && \
npx tsc --init
$ npm install apollo-server graphql
$ npm install @graphql-tools/load \
@graphql-tools/schema \
@graphql-tools/graphql-file-loader
$ npx ts-node index.ts
◆ソース
・index.ts
import { GraphQLFileLoader } from "@graphql-tools/graphql-file-loader";
import { loadSchemaSync } from "@graphql-tools/load";
import { addResolversToSchema } from "@graphql-tools/schema";
import { ApolloServer, ServerInfo } from "apollo-server";
import { resolvers } from "./configs/resolver";
(async () => {
const schema = loadSchemaSync("./**/*.graphql", {
loaders: [new GraphQLFileLoader()],
});
const schemaWithResolvers = addResolversToSchema({ schema, resolvers });
const server = new ApolloServer({ schema: schemaWithResolvers });
const { url } = (await server.listen(4000)) as ServerInfo;
console.log(`🚀 Server ready at: ${url}`);
})()
.then(() => console.log("Server started..."))
.catch((e) => console.error(e));
・resolver.ts
import { books } from "../data/books";
export const resolvers = {
Query: {
books: () => books,
},
};
・query.graphql
type Query {
books: [Book!]!
}
・schema.graphql
type Book {
title: String!
author: String!
}
・books.ts
interface Book {
title: string;
author: string;
}
export const books: Book[] = [
{
title: "プロを目指す人のためのTypeScript入門",
author: "鈴木 僚太",
},
{
title: "良いコード/悪いコードで学ぶ設計入門",
author: "仙塲 大也",
},
];
・package.json
{
"type": "module",
"scripts": {
"compile": "tsc && cp -R src/configs/*.graphql dist/configs",
"start": "npm run compile && node ./dist/index.js"
},
"dependencies": {
"@apollo/server": "^4.10.0",
"@graphql-tools/graphql-file-loader": "^8.0.0",
"@graphql-tools/load": "^8.0.1",
"@graphql-tools/schema": "^10.0.2",
"copyfiles": "^2.4.1",
"graphql": "^16.8.1",
"ts-node": "^10.9.2"
},
"devDependencies": {
"@types/node": "^20.11.5",
"typescript": "^5.3.3"
}
}
・tsconfig.json
{
"compilerOptions": {
"rootDirs": [
"./src"
],
"outDir": "./dist",
"lib": [
"es2020"
],
"target": "es2020",
"module": "esnext",
"moduleResolution": "node",
"esModuleInterop": true,
"types": [
"node"
],
"baseUrl": "./src",
"paths": {
"*": [
"./src/*"
]
}
}
}
◆ディレクトリ構造
src |-- configs | |-- query.graphql | |-- resolver.ts | `-- schema.graphql |-- data | `-- book.ts `-- index.ts
◆参照サイト
・nvm
・入門
・Appolov4
・外部ファイル化
データを外部のtsに吐き出すところまではできたので、次はこいつをjsonの外部ファイルに吐き出して書き換え可能にしたいところ。うまくいくかは謎だけど、できるんかな。
本来はDataBaseでやるみたいな感じらしいが、まずはファイルでやってみてダメならDBでやろうかと思ってます。
これ終わったらAPPSyncを本格的に学習してみようかなと思っています。
コメント