Apolloとurqlによる型付きGraphQLクライアント
生成されたフックとOperationで型安全なクエリを実行します。
「Apolloとurqlによる型付きGraphQLクライアント」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
クライアントの型付けに関する問題
ApolloやurqlなどのGraphQLクライアントは、デフォルトではany型のデータを返します。Codegenは型付きのフックとオペレーションを生成し、クエリを完全に型安全にします。
// Without codegen: data is any
const { data } = useQuery(GET_USER);
data.user; // any — no safetyApollo向けオペレーションプラグイン
.graphqlファイル内の各オペレーションに対応する、型付きのReactフックを生成するには、@graphql-codegen/typescript-react-apolloを追加します。
npm install --save-dev @graphql-codegen/typescript-operations
npm install --save-dev @graphql-codegen/typescript-react-apolloApolloフック用のcodegen.yml
型付きフックを生成できるように、.graphqlのオペレーションファイルとスキーマをcodegenの対象として指定します。
# codegen.yml
documents: "src/**/*.graphql"
generates:
src/generated/operations.ts:
plugins:
- typescript
- typescript-operations
- typescript-react-apollo型付きクエリの記述
GraphQLオペレーションを.graphqlファイルに記述し、コンポーネントで生成されたフックを使用します。
# src/queries/GetUser.graphql
query GetUser($id: ID!) {
user(id: $id) {
id
name
email
}
}生成されたフックの使用
完全に型付けされた生成済みフックをインポートします。変数、データ、ローディング状態、エラーはすべてTypeScriptによって安全に型付けされます。
import { useGetUserQuery } from "./generated/operations";
function UserCard({ id }: { id: string }) {
const { data, loading } = useGetUserQuery({ variables: { id } });
if (loading) return <p>Loading...</p>;
return <p>{data?.user?.name}</p>; // data.user: User | null — typed
}Codegenでurqlを使う
urqlでは、型付きのフックラッパーを生成するために@graphql-codegen/typescript-urqlを使用します。
npm install --save-dev @graphql-codegen/typescript-urql
# Similar codegen.yml configuration, generates useGetUserQuery for urqlTypedDocumentNode
最も低レベルな方法です。@graphql-typed-document-node/coreのTypedDocumentNodeを使用すると、フレームワーク固有のフックを使わずにドキュメントノードへ型情報を付加できます。
import { TypedDocumentNode } from "@graphql-typed-document-node/core";
const GetUserDoc: TypedDocumentNode<GetUserQuery, GetUserQueryVariables> = gql`...`;
// Works with Apollo, urql, and any GraphQL client that supports itフラグメントの型
CodegenはGraphQLフラグメントの型も生成するため、コンポーネント内で型安全にフラグメントを組み合わせられます。
# UserFields.graphql
fragment UserFields on User {
id
name
}
# Generated: UserFieldsFragment type — use as prop type型付きミューテーション
Codegenは、変数と結果データが型付けされたミューテーションフックも生成します。
import { useCreateUserMutation } from "./generated/operations";
const [createUser, { loading }] = useCreateUserMutation();
// createUser({ variables: { input: { name, email } } })
// — variables are fully typedオペレーションの同期維持
スキーマが変更されたら、codegenを再実行します。validate-queriesのステップを追加すると、削除または名前変更されたフィールドを参照しているオペレーションを検出できます。
npx graphql-codegen --check
# or with graphql-inspector:
npx graphql-inspector validate ./src/**/*.graphql ./api/schema.graphqlまとめ：型付きGraphQLクライアント
Codegenは、.graphqlのオペレーションファイルからApolloとurql向けの型付きフックを生成します。これにより、変数、クエリデータ、フラグメントの形状を完全に型安全に扱え、手動で型を保守する必要がなくなります。
確認問題
生成された型付きGraphQLフックを使うと、未加工のドキュメントを使う場合と比べて何が得られますか。
学習内容
型付きGraphQLクライアントでは、codegenを使ってApolloとurql向けに、変数とデータが完全に型付けされたフックを生成します。.graphqlファイルにオペレーションを記述してcodegenを実行すると、スキーマからコンポーネントまでエンドツーエンドの型安全性を得られます。
よくある質問
「Apolloとurqlによる型付きGraphQLクライアント」レッスンは無料ですか？
はい。「Apolloとurqlによる型付きGraphQLクライアント」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「Apolloとurqlによる型付きGraphQLクライアント」で何を学びますか？
生成されたフックとOperationで型安全なクエリを実行します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「Apolloとurqlによる型付きGraphQLクライアント」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- GraphQLスキーマからTypeScript型へ
- GraphQL Code Generatorによる型付きResolver
- Apolloとurqlによる型付きGraphQLクライアント
- エンドツーエンドの型安全性：スキーマファーストのワークフロー