RTK Query দিয়ে API Call

RTK Query দিয়ে API Call Explained in React.js (Bengali Full Guide)

RTK Query হলো Redux Toolkit এর একটি শক্তিশালী data fetching tool, যেটি API call, caching, re-fetching, loading state, error state—সবকিছু অটোমেটিকালি হ্যান্ডেল করে দেয়। এটি React অ্যাপে API ব্যবহারের সবচেয়ে সহজ উপায়।

🔶 RTK Query কী?

RTK Query হলো একটি data-fetching এবং caching ফ্রেমওয়ার্ক যা API থেকে ডেটা লোড করা ও state ম্যানেজ করা খুব সহজ করে দেয়।

এটি আপনাকে দেয়:

  • Auto Caching
  • Refetching (interval / on-demand)
  • Loading & Error states — built-in
  • Mutation (POST, PUT, DELETE support)
  • Auto State Management

সবচেয়ে ভালো বিষয় হলো — কোনো reducer, action, useEffect, useState তৈরি করতে হয় না! সব কাজ RTK Query নিজে করে দেয়।

🔶 কিভাবে প্রজেক্টে RTK Query সেটআপ করবেন?

📌 ১. API Slice তৈরি করুন

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const postApi = createApi({
    reducerPath: "postApi",
    baseQuery: fetchBaseQuery({ baseUrl: "https://jsonplaceholder.typicode.com/" }),
    endpoints: (builder) => ({
        getPosts: builder.query({
            query: () => "posts"
        })
    })
});

export const { useGetPostsQuery } = postApi;

📌 ২. Store-এ API Reducer যোগ করুন

import { configureStore } from "@reduxjs/toolkit";
import { postApi } from "./postApi";

export const store = configureStore({
    reducer: {
        [postApi.reducerPath]: postApi.reducer
    },
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware().concat(postApi.middleware)
});

📌 ৩. Provider যোগ করুন

import { Provider } from "react-redux";
import App from "./App";
import { store } from "./store";

root.render(
    
        
    
);

🔶 RTK Query ব্যবহার করে Data Fetch করা

📌 Component Example

import { useGetPostsQuery } from "./postApi";

export default function PostList() {
    const { data, error, isLoading } = useGetPostsQuery();

    if (isLoading) return <p>Loading...</p>;
    if (error) return <p>Error fetching data</p>;

    return (
        <div>
            {data.map((post) => (
                <h3 key={post.id}>{post.title}</h3>
            ))}
        </div>
    );
}

এখানে useGetPostsQuery() অটোমেটিকালি:

  • API কল করে
  • Caching করে
  • Loading state দেয়
  • Error state দেয়
  • UI re-render করে

🔶 RTK Query দিয়ে POST / PUT / DELETE Request (Mutation)

📌 Mutation Example

export const postApi = createApi({
    reducerPath: "postApi",
    baseQuery: fetchBaseQuery({ baseUrl: "https://jsonplaceholder.typicode.com/" }),

    endpoints: (builder) => ({
        addPost: builder.mutation({
            query: (newPost) => ({
                url: "posts",
                method: "POST",
                body: newPost
            })
        })
    })
});

export const { useAddPostMutation } = postApi;

📌 Component Example

function AddPost() {
    const [addPost, { isLoading }] = useAddPostMutation();

    const handleSubmit = async () => {
        await addPost({ title: "New Post", body: "Post content" });
        alert("Post Added!");
    };

    return (
        <button onClick={handleSubmit} disabled={isLoading}>
            Add Post
        </button>
    );
}

builder.mutation() POST, PUT, PATCH, DELETE — সব request হ্যান্ডেল করতে পারে।

🔶 RTK Query এর Built-in States

Query hook গুলো নিচের state return করে:

State Meaning
isLoading প্রথমবার Data load হলে
isFetching Refetch চললে
isSuccess Data সফলভাবে আসলে
isError API কল ব্যর্থ হলে
error Error object / message

🔶 Auto-Refetching Feature

RTK Query আপনার API কে অটোমেটিকালি refetch করতে পারে।

📌 Example:

useGetPostsQuery(undefined, {
    pollingInterval: 5000
});

এটি প্রতি 5 সেকেন্ড পরপর API কল করবে।

🔶 RTK Query কেন ব্যবহার করবেন?

  • ❌ useEffect + useState দিয়ে বারবার boilerplate কোড লিখতে হয়
  • ❌ API state, caching, refetch manually লিখতে হয়
  • ❌ Redux এর অনেক extra setup লাগে

RTK Query এসব সমস্যার সমাধান করে:

  • ✔ সর্বনিম্ন কোড
  • ✔ Complete API management system
  • ✔ Auto caching ও refetching
  • ✔ Global loading, error, success state

✨ উপসংহার

RTK Query ব্যবহার করলে আপনার React অ্যাপ আরও দ্রুত, স্মার্ট এবং maintainable হয়ে যায়। API data ব্যবহার করা হয় সবচেয়ে সহজ উপায়ে — state management, caching, loading সবকিছু Redux Toolkit নিজে সামলে নেয়।

ছোট বা বড় — যেকোনো ধরনের প্রজেক্টে RTK Query সেরা নির্বাচন।

← Previous Next →
👼 Quiz
/

লোড হচ্ছে...