TanStackIntermediate

API Client — Typed Functions

REST endpoints-এর জন্য typed function — getProducts, createProduct, updateProduct, deleteProduct — বাংলায়।

7টি অংশবাংলা ভাষায়

প্রতিটি useQuery-র queryFn-এর ভেতরে সরাসরি api.get(...) লেখার বদলে আলাদা typed function বানাব। এতে hooks পরিষ্কার থাকে এবং যেকোনো জায়গায় একই function reuse করা যায়।

src/lib/products-api.tsts

import { api } from "./axios";


export function listProducts(params: ProductQueryParams) {
  return api.get<ProductListResponse>("/products", { params })
    .then((res) => res.data);
}

export function getProduct(id: string) {
  return api.get<Product>("/products/" + id)
    .then((res) => res.data);
}

export function createProduct(input: CreateProductInput) {
  return api.post<Product>("/products", input)
    .then((res) => res.data);
}

export function updateProduct(id: string, input: Partial<CreateProductInput>) {
  return api.put<Product>("/products/" + id, input)
    .then((res) => res.data);
}

export function deleteProduct(id: string) {
  return api.delete<void>("/products/" + id);
}

// অনুষঙ্গিক types import

  CreateProductInput,
  ProductListResponse,
} from "@/types/product";

কেন `.then((res) => res.data)`

আমরা চাই queryFn যেন সরাসরি ডেটা return করে — Product — axios response-এর { data: ... } wrap-টা না। তাই প্রতিটি function-এ res.data বের করে দিচ্ছি। ফলে useQuery থেকে data-ই মেলে।

কোথায় REST server

baseURL /api-তে থাকায় listProducts() আসলে আঘাত করবে /api/products — অর্থাৎ Next.js-এর নিজের route handler। ওই route handler-এ আমরা backend REST API-তে proxy করতে পারি অথবা সহজভাবে in-memory/products JSON file দিয়ে serve করতে পারি (পরের অধ্যায়ে)।

এক জায়গাতেই HTTP

সব Axios/dependency শুধু lib/-তেই রাখুন — hooks/, components-এ সরাসরি axios import করবেন না। তখন API-র ধাঁচ বদলালে (যেমন ক্লায়েন্ট SDK-এ) শুধু একটি লেয়ার বদলায়।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।