@tatil/client-api

Tatilsepeti client-side API package. Next.js client components ve browser tarafında çalışacak API çağrıları için tasarlanmıştır.

Kurulum

yarn add @tatil/client-api

Kullanım

GET İsteği

import Api from '@tatil/client-api';

const { status, data } = await Api.get('/api/tours', {
  page: 1,
  pageSize: 20,
});

if (status === 'success') {
  console.log(data);
}

POST İsteği

import Api from '@tatil/client-api';

const response = await Api.post('/api/reservation', {
  hotelId: 123,
  checkinDate: '2026-01-17',
  checkoutDate: '2026-01-21',
});

console.log(response.data);

Response Parse

import Api from '@tatil/client-api';

const response = await Api.get('/api/tours');
const data = Api.parseResponse(response);

console.log(data);

Özellikler

• /api baseURL otomatik eklenir
• Next.js API route'ları ile uyumlu
• Type-safe response yapısı
• Axios tabanlı

API Metotları

| Metot | Parametreler | Dönüş Değeri | Açıklama | |-------|--------------|--------------|----------| | get(path, params) | path: string, params: object | { status, data } | GET isteği | | post(path, data) | path: string, data: object | Axios response | POST isteği | | parseResponse(response) | response: object | any | Response data'sını çeker | | resolveResponse(response) | response: object | { status, data } | Response'u standart formata çevirir |

Örnek Kullanım (Next.js)

Client Component

'use client';

import { useState, useEffect } from 'react';
import Api from '@tatil/client-api';

export default function TourList() {
  const [tours, setTours] = useState([]);

  useEffect(() => {
    const fetchTours = async () => {
      const { status, data } = await Api.get('/tours', { page: 1 });

      if (status === 'success') {
        setTours(data);
      }
    };

    fetchTours();
  }, []);

  return (
    <div>
      {tours.map(tour => (
        <div key={tour.id}>{tour.name}</div>
      ))}
    </div>
  );
}

Hook ile Kullanım

'use client';

import { useQuery } from '@tanstack/react-query';
import Api from '@tatil/client-api';

export function useTours(page = 1) {
  return useQuery({
    queryKey: ['tours', page],
    queryFn: () => Api.get('/tours', { page }),
  });
}

Response Yapısı

GET Response

{
  status: 'success', // veya 'error'
  data: {
    // API'den dönen actual data
  }
}

POST Response

// Axios response objesi döner
{
  data: { ... },
  status: 200,
  statusText: 'OK',
  headers: { ... },
  config: { ... }
}

Server vs Client API

| Özellik | @tatil/client-api | @tatil/server-api | |---------|-------------------|-------------------| | Kullanım Alanı | Client Components | Server Components, API Routes, Middleware | | Token Yönetimi | Yok | Otomatik refresh | | Base URL | /api | Environment'den (API_URL) | | Logging | Yok | Reklog ile |

Notlar

• Bu paket sadece client-side (browser) çalışır
• Server-side işlemler için @tatil/server-api kullanın
• Next.js API route'larına istek atar

Lisans

MIT