---
title: Ürünleri listeleme
description: ikas Admin API ile mağazadaki ürünleri çekip uygulamanızın Dashboard sayfasında listeleyin.
---

Uygulamayı başarıyla yükledikten sonra aşağıdaki gibi bir ekran görürsünüz:

![Boş uygulama sayfası](https://builders.ikas.com/media/ikas-dev/empty-app-page-1e849977111d8e628d79d422d58c07e5.jpg)

Bu uygulama sayfasında, yönetim panelinden eklediğimiz veya Add Product butonuna tıklayarak eklediğimiz ürünleri listeleyebiliriz.

- Önce `pages/api` klasörü içinde `ikas` adında bir klasör oluşturun.
- Ardından `pages/api/ikas` klasörü içinde `products.ts` adında bir dosya oluşturun.

Dosya yapınız şu şekilde olmalıdır:

```txt
pages/
  api/
    ikas/
      products.ts
```

Artık API'mizi yazmaya hazırız. `products.ts` dosyasını açın ve aşağıdaki kodu yapıştırın.

```typescript title="File: pages/api/ikas/products.ts"
import type { NextApiRequest, NextApiResponse } from 'next';
import { createRouter } from 'next-connect';
import { ensureLoggedIn } from '@/lib/ensure-logged-in';
import { getIkas } from '@/lib/ikas-api';
import { RedisDB } from '@/lib/redis';
import { PaginationInput, ProductPaginationResponse } from '@ikas/api-client';
import { ApiErrorResponse } from '@/globals/types';

export type ProductsApiRequest = {
  pagination?: PaginationInput;
};

export type ProductsApiResponse = Partial<ProductPaginationResponse>;

const router = createRouter<NextApiRequest, NextApiResponse<ProductsApiResponse | ApiErrorResponse>>();

/**
 * This api queries paginated product list from ikas and returns it to the client
 */
router.use(ensureLoggedIn).post(async (req, res) => {
  try {
    const data = req.body as ProductsApiRequest;
    const token = await RedisDB.token.get(req.user!.authorizedAppId);
    if (token) {
      const ikas = getIkas(token);
      const productsRes = await ikas.adminApi.queries.listProduct({
        variables: {
          pagination: data.pagination || {
            page: 1,
            limit: 10,
          },
          sort: '-createdAt',
        },
      });

      if (productsRes.isSuccess && productsRes.data) res.status(200).json(productsRes.data);
    }
    res.status(400).json({ statusCode: 400, message: 'Bad Request' });
  } catch (err: any) {
    res.status(500).json({ statusCode: 500, message: err.message });
  }
});

export default router.handler({
  onError: (err: any, req, res) => {
    console.error(err.stack);
    res.status(err.statusCode || 500).end(err.message);
  },
});
```

### `api-requests.ts` Dosyasını Güncelleme

Client tarafında kullanabilmek için API'mizi `ApiRequests` objesine eklememiz gerekiyor.

- `api-requests.ts` dosyasını açın ve `ApiRequests` objesini aşağıdaki kodla güncelleyin:

```typescript title="File: lib/api-request.ts"
export const ApiRequests = {
  ikas: {
    products: (data: ProductsApiRequest, token: string) =>
      makePostRequest<ProductsApiResponse>({ url: '/api/ikas/products', data, token }),
  },
};
```

`ApiRequests` objesine `products` fonksiyonunu ekliyoruz. Bu fonksiyon, API'ye POST isteği göndermek için kullanılır.

Örneğin ürünleri Dashboard sayfasında listelemek istediğimizi varsayalım. Bunun için `loadProducts` adında bir fonksiyon oluşturuyor ve bu fonksiyonda `api-requests` dosyasına eklediğimiz kodu çağırıyoruz. Böylece ürünleri listelemiş oluyoruz.

```typescript title="File: app/dashboard/page.tsx"
const loadProducts = async (page: number) => {
  setLoading(true);
  try {
    if (token) {
      const res = await ApiRequests.ikas.products(
        {
          pagination: {
            page, // page number
            limit: 10, // 10 products per page
          },
        },
        token,
      );
      if (res.status == 200 && res.data) {
        const data = res.data as ProductsApiResponse;
        setProducts(data);
      }
    }
  } finally {
    setLoading(false);
  }
};
```

### Kodun Açıklaması

- `ProductsApiRequest`, API'ye gönderdiğimiz verinin type'ıdır. Bu örnekte API'ye sayfalama (pagination) bilgisini gönderiyoruz.
- `ProductsApiResponse`, API'den aldığımız verinin type'ıdır. Bu örnekte API'den sayfalama bilgisini de alıyoruz.
- `handler` fonksiyonunda önce kullanıcının oturum açıp açmadığını kontrol ediyoruz. Oturum açıksa token'ı RedisDB'den alıp ikas API'ye gönderiyoruz. Ardından ürünleri API'den alıp client'a döndürüyoruz.