Closed5
Apollo CLI から graphql-codegen に移行する
この辺のハンズオン含めつつ
- https://benlimmer.com/2020/05/16/adding-typescript-types-github-graphql-api/
- https://maku.blog/p/qcp2cnx/
Apollo CLI で型定義生成するのから graphql-codegen で hooks 生成へ移行することについてまとめたい。
graphql-codegenだとcustom hooksまで生成できる利点はあるが、それとは違う箇所でどうするのが良いか悩んでる
それぞれでの型定義の出力の例
Apollo
export interface GetLatestIssuesApollo_search_nodes_App {
__typename: "App" | "Discussion" | "MarketplaceListing" | "Organization" | "PullRequest" | "Repository" | "User";
}
export interface GetLatestIssuesApollo_search_nodes_Issue {
__typename: "Issue";
/**
* Identifies the issue number.
*/
number: number;
/**
* Identifies the issue title.
*/
title: string;
}
export type GetLatestIssuesApollo_search_nodes = GetLatestIssuesApollo_search_nodes_App | GetLatestIssuesApollo_search_nodes_Issue;
export interface GetLatestIssuesApollo_search {
__typename: "SearchResultItemConnection";
/**
* The number of issues that matched the search query.
*/
issueCount: number;
/**
* A list of nodes.
*/
nodes: (GetLatestIssuesApollo_search_nodes | null)[] | null;
}
export interface GetLatestIssuesApollo {
/**
* Perform a search across resources.
*/
search: GetLatestIssuesApollo_search;
}
export interface GetLatestIssuesApolloVariables {
query: string;
type: SearchType;
first?: number | null;
}
graphql-codegen
export type GetLatestIssues = {
__typename: "Query",
search: {
__typename: "SearchResultItemConnection",
issueCount: number,
nodes?:
| Array<
| { __typename: "App" }
| { __typename: "Discussion" }
| { __typename: "Issue", number: number, title: string }
| { __typename: "MarketplaceListing" }
| { __typename: "Organization" }
| { __typename: "PullRequest" }
| { __typename: "Repository" }
| { __typename: "User" }
| null
| undefined
>
| null
| undefined,
},
};
ここに全てがあるけどもうちょい調査する
graphql codegen が出力するのがこんな形だけど
{ __typename: "Issue", number: number, title: string }
だけ取り出したい時どうするんだろ。
Fragmentで書く方が分かりやすいのかも?
export type GetLatestIssues = {
__typename: "Query",
search: {
__typename: "SearchResultItemConnection",
issueCount: number,
nodes?:
| Array<
| { __typename: "App" }
| { __typename: "Discussion" }
| { __typename: "Issue", number: number, title: string }
| { __typename: "MarketplaceListing" }
| { __typename: "Organization" }
| { __typename: "PullRequest" }
| { __typename: "Repository" }
| { __typename: "User" }
| null
| undefined
>
| null
| undefined,
},
};
このスクラップは2022/02/27にクローズされました