RTK QueryIntermediate

createApi — প্রথম API Definition

createApi + fetchBaseQuery — endpoint definition — বাংলায়।

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

src/features/orders/ordersService.tsts

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

export const ordersApi = createApi({
  reducerPath: "ordersApi",
  baseQuery: fetchBaseQuery({ baseUrl: "https://api.example.com/" }),
  tagTypes: ["Order"],
  endpoints: (builder) => ({
    // Query: GET https://api.example.com/orders
    getOrders: builder.query<Order[], void>({
      query: () => "orders",
      providesTags: ["Order"],
    }),

    // Mutation: POST https://api.example.com/orders
    createOrder: builder.mutation<Order, { items: CartItem[] }>({
      query: (body) => ({
        url: "orders",
        method: "POST",
        body,
      }),
      invalidatesTags: ["Order"],
    }),
  }),
});

// Auto-generated hooks
export const {
  useGetOrdersQuery,
  useCreateOrderMutation,
} = ordersApi;

builder.query vs builder.mutation

	builder.query	builder.mutation
কাজ	ডেটা পড়া (GET)	write (POST/PUT/DELETE)
Generated counts	loading/error/data	pending/error, আর no cache-শেয়ার
লাইফসাইকেল	cache-ভিত্তিক, refetch	trigger-সাথে-সাথে, onSuccess

Types

Typing endpointts

getOrders: builder.query<Order[], void>({
  // ↑ <Result, Arg>
  query: () => "orders",
}),

reducerPath গুরুত্বপূর্ণ

reducerPath store-এ এই slice-এর কী। configureStore-এ [ordersApi.reducerPath]: ordersApi.reducer ও concat(ordersApi.middleware) — দুইটাই site-এ বাধতেই store-এ যুক্ত করতে হবে। ভুলে গেলে hooks কাজ করবে না।

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