0Pricing
TypeScript Academy · Ders

Apollo ve urql ile Türlendirilmiş GraphQL İstemcisi

Tür güvenli sorgular için oluşturulan kancaları ve işlemleri kullanın

Apollo ve urql ile Türlendirilmiş GraphQL İstemcisi, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, TypeScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. TypeScript Academy kursu toplamda 4 dersten oluşur.

İstemci Türlendirme Sorunu

Apollo ve urql gibi GraphQL istemcileri varsayılan olarak any türünde veriler döndürür. Kod üretimi, sorguları tamamen tür güvenli hâle getiren türleri belirtilmiş kancalar ve işlemler oluşturur.

// Without codegen: data is any
const { data } = useQuery(GET_USER);
data.user; // any — no safety

Apollo için İşlemler Eklentisi

Her işlem için tür güvenli React kancaları oluşturmak üzere @graphql-codegen/typescript-react-apollo paketini .graphql dosyalarınıza ekleyin.

npm install --save-dev @graphql-codegen/typescript-operations
npm install --save-dev @graphql-codegen/typescript-react-apollo

Apollo Kancaları için codegen.yml

Tür güvenli kancalar oluşturmak için kod oluşturucuyu .graphql işlem dosyalarınıza ve schema tanımınıza yönlendirin.

# codegen.yml
documents: "src/**/*.graphql"
generates:
  src/generated/operations.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo

Tür Güvenli Bir query Yazma

GraphQL işleminizi bir .graphql dosyasına yazın ve oluşturulan kancayı bileşeninizde kullanın.

# src/queries/GetUser.graphql
query GetUser($id: ID!) {
  user(id: $id) {
    id
    name
    email
  }
}

Oluşturulan Kancayı Kullanma

Tamamen tür güvenli olan oluşturulan kancayı içe aktarın: değişkenler, veriler, yüklenme durumu ve hata TypeScript tarafından güvenli biçimde denetlenir.

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
}

urql ile Kod Oluşturma

urql için tür güvenli kanca sarmalayıcıları oluşturmak üzere @graphql-codegen/typescript-urql paketini kullanın.

npm install --save-dev @graphql-codegen/typescript-urql
# Similar codegen.yml configuration, generates useGetUserQuery for urql

TypedDocumentNode

En alt düzey yaklaşım: çerçeveye özgü kancalar olmadan belge düğümlerine tür bilgisi eklemek için TypedDocumentNode türünü @graphql-typed-document-node/core paketinden kullanın.

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

Parça Türleri

Codegen, GraphQL parçaları için de türler oluşturur ve bileşenlerde tür güvenli parça birleştirmeyi mümkün kılar.

# UserFields.graphql
fragment UserFields on User {
  id
  name
}
# Generated: UserFieldsFragment type — use as prop type

Tür Güvenli Değişiklikler

Codegen, türleri belirlenmiş değişiklik kancalarıyla birlikte türleri belirlenmiş değişkenler ve sonuç verileri de oluşturur.

import { useCreateUserMutation } from "./generated/operations";

const [createUser, { loading }] = useCreateUserMutation();
// createUser({ variables: { input: { name, email } } })
// — variables are fully typed

İşlemleri Eşzamanlı Tutma

schema değiştiğinde kod oluşturmayı yeniden çalıştırın. Kaldırılmış veya yeniden adlandırılmış alanlara başvuran işlemleri yakalamak için bir validate-queries adımı ekleyin.

npx graphql-codegen --check
# or with graphql-inspector:
npx graphql-inspector validate ./src/**/*.graphql ./api/schema.graphql

Özet: Tür Güvenli GraphQL İstemcileri

Kod oluşturma, .graphql işlem dosyalarınızdan Apollo ve urql için tür güvenli kancalar oluşturur. Böylece değişkenler, query verileri ve parça yapıları için tam tür güvenliği sağlanır; türleri elle korumanız gerekmez.

Hızlı Kontrol

Oluşturulan tür güvenli bir GraphQL kancası, ham bir belge kullanmaya kıyasla ne sağlar?

Öğrendikleriniz

Tür güvenli GraphQL istemcileri, Apollo ve urql için tamamen türleri belirlenmiş değişkenlere ve verilere sahip kancalar oluşturmak üzere kod oluşturma kullanır. İşlemleri .graphql dosyalarına yazın, kod oluşturmayı çalıştırın ve schema'dan bileşene kadar uçtan uca tür güvenliği elde edin.

Sıkça Sorulan Sorular

“Apollo ve urql ile Türlendirilmiş GraphQL İstemcisi” dersi ücretsiz mi?

Evet — “Apollo ve urql ile Türlendirilmiş GraphQL İstemcisi” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve TypeScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. TypeScript Academy kursu toplamda 4 dersten oluşur.

“Apollo ve urql ile Türlendirilmiş GraphQL İstemcisi” dersinde ne öğreneceğim?

Tür güvenli sorgular için oluşturulan kancaları ve işlemleri kullanın TypeScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

TypeScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te TypeScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Apollo ve urql ile Türlendirilmiş GraphQL İstemcisi” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu TypeScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her TypeScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. GraphQL Şemasından TypeScript Türlerine
  2. GraphQL Kod Üreticisiyle Türlendirilmiş Çözücüler
  3. Apollo ve urql ile Türlendirilmiş GraphQL İstemcisi
  4. Uçtan Uca Tür Güvenliği: Önce Şema İş Akışı
← TypeScript Academy Sayfasına Dön