API İsteklerini Yönetme

Paylaşılan API İstekleri

Yaygın API istek mantığını shared/api dizinine yerleştirerek başlayın. Bu, istekleri uygulamanız genelinde yeniden kullanmayı kolaylaştırır ve daha hızlı prototipleme yapmanıza yardımcı olur. Birçok proje için API çağrıları için ihtiyacınız olan tek şey budur.

Tipik bir dosya yapısı şu şekilde olacaktır:

• Dizinshared/

  • client.ts
  • index.ts
  • Dizinendpoints/

    • login.ts

client.ts dosyası HTTP istek kurulumunuzu merkezileştirir. Seçtiğiniz yöntemi (fetch() veya bir axios örneği gibi) sarar ve aşağıdakiler gibi yaygın yapılandırmaları işler:

• Backend temel URL’si.
• Varsayılan başlıklar (ör. kimlik doğrulama için).
• Veri serileştirme.

İşte axios ve fetch için örnekler:

Axios

shared/api/client.ts

// axios kullanan bir örnek
import axios from 'axios';

export const client = axios.create({
  baseURL: 'https://your-api-domain.com/api/',
  timeout: 5000,
  headers: { 'X-Custom-Header': 'my-custom-value' }
});

Fetch

shared/api/client.ts

export const client = {
  async post(endpoint: string, body: any, options?: RequestInit) {
    const response = await fetch(`https://your-api-domain.com/api${endpoint}`, {
      method: 'POST',
      body: JSON.stringify(body),
      ...options,
      headers: {
        'Content-Type': 'application/json',
        'X-Custom-Header': 'my-custom-value',
        ...options?.headers,
      },
    });
    return response.json();
  }
  // ... put, delete, vb. gibi diğer metodlar
};

Bireysel API istek işlevlerinizi shared/api/endpoints içinde düzenleyin ve bunları API uç noktasına göre gruplandırın.

Not

Örneklerin odak noktasını korumak için form etkileşimini ve doğrulamayı atlıyoruz. Zod veya Valibot gibi kütüphaneler hakkında daha fazla bilgi için Tip Doğrulama ve Şemalar makalesine bakın.

shared/api/endpoints/login.ts

import { client } from '../client';

export interface LoginCredentials {
  email: string;
  password: string;
}

export function login(credentials: LoginCredentials) {
  return client.post('/login', credentials);
}

İstek işlevlerinizi dışa aktarmak için shared/api içinde bir index.ts dosyası kullanın.

shared/api/index.ts

export { client } from './client'; // Eğer istemcinin kendisini dışa aktarmak istiyorsanız
export { login } from './endpoints/login';
export type { LoginCredentials } from './endpoints/login';

Dilim Özel API İstekleri

Bir API isteği yalnızca belirli bir dilim (tek bir sayfa veya özellik gibi) tarafından kullanılıyorsa ve yeniden kullanılmayacaksa, onu o dilimin api segmentine yerleştirin. Bu, dilime özgü mantığı düzgün bir şekilde içeride tutar.

• Dizinpages/

  • Dizinlogin/

    • index.ts
    • Dizinapi/

      • login.ts
    • Dizinui/

      • LoginPage.tsx

pages/login/api/login.ts

import { client } from 'shared/api';

interface LoginCredentials {
  email: string;
  password: string;
}

export function login(credentials: LoginCredentials) {
  return client.post('/login', credentials);
}

Uygulamadaki başka hiçbir yerin bu isteğe ihtiyaç duyması olası olmadığından, sayfanın genel API’sinde login() işlevini dışa aktarmanıza gerek yoktur.

Not

API çağrılarını ve yanıt tiplerini zamanından önce entities katmanına yerleştirmekten kaçının. Backend yanıtları, frontend varlıklarınızın ihtiyaç duyduğundan farklı olabilir. shared/api veya bir dilimin api segmentindeki API mantığı, verileri uygun şekilde dönüştürmenize olanak tanıyarak varlıkların frontend sorunlarına odaklanmasını sağlar.

İstemci Üreticilerini Kullanma

Backend’iniz bir OpenAPI spesifikasyonuna sahipse, orval veya openapi-typescript gibi araçlar sizin için API tiplerini ve istek işlevlerini üretebilir. Üretilen kodu örneğin shared/api/openapi içine yerleştirin. Bu tiplerin ne olduğunu ve nasıl üretileceğini belgelemek için README.md eklediğinizden emin olun.

Sunucu Durumu (Server State) Kütüphaneleriyle Entegrasyon

TanStack Query (React Query) veya Pinia Colada gibi sunucu durumu kütüphaneleri kullanırken, tipleri veya önbellek anahtarlarını (cache keys) dilimler arasında paylaşmanız gerekebilir. Aşağıdakiler için shared katmanını kullanın:

• API veri tipleri
• Önbellek anahtarları
• Yaygın sorgu/mutasyon (query/mutation) seçenekleri

Sunucu durumu kütüphaneleriyle çalışma hakkında daha fazla ayrıntı için React Query makalesine bakın.