型 UserData を指定する
const { error, loading, data } = useQuery<UserData>(QUERY_VIEWER)
パッケージのインストール
npm i @apollo/client
npm i @graphql-codegen/add
npm i @graphql-codegen/cli
npm i @graphql-codegen/typescript
npm i @graphql-codegen/typescript-operations
参考:
GraphQL Code Generator(graphql-codegen) おすすめ設定 for TypeScript
@graphql-codegen/typed-document-node を使ってみた - あ、しんのきです
セットアップを実行する
npx graphql-codegen init
いろいろ質問されるので、以下のように答えます
? What type of application are you building? Application built with React ? Where is your schema?: (path or url) http://localhost:4000/graphql ? Where are your operations and fragments?: 何も入力しない ? Where to write the output: src/__generated__/ ? Do you want to generate an introspection file? No ? How to name the config file? codegen.ts ? What script in package.json should run the codegen? codegen Fetching latest versions of selected plugins...
質問を全て答えると package.json に パッケージが追加されているので
npm install
で 追加パッケージをインストールします。
また
"scripts": {
"codegen": "graphql-codegen --config codegen.ts"
},
も追加されています。
ファイル codegen.ts も自動で追加されています
const config: CodegenConfig = {
...........................
hooks: { afterAllFileWrite: ['prettier --write'] }
}
npm i -D gql-generator-node @graphql-tools/load @graphql-tools/graphql-file-loader
npm run codegen
import { gql } from "@apollo/client";
const { data } = await client.query({
query: gql`
query {
find {
id
name
}
}
`,
});
console.log("● data");
console.log(data);
↓
const { data } = await client.query({
query: gql`
query {
find {
id
name
}
}
`,
});
console.log("● data");
console.log(data);
graphql-codegen 後に prettier をかけたい
GraphQL Code Generator v3 Roadmapで推されているclient-presetを紹介する