RTK Query: เอนด์พอยต์และการแคชอัตโนมัติ

ยินดีต้อนรับ

RTK Query คืออะไร

การสร้าง API ด้วย createApi

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

export const userApi = createApi({
  reducerPath: 'userApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getUser: builder.query({ query: (id) => '/users/' + id }),
    getUsers: builder.query({ query: () => '/users' }),
  }),
});

export const { useGetUserQuery, useGetUsersQuery } = userApi;

การเพิ่ม API ลงใน Store

import { configureStore } from '@reduxjs/toolkit';
import { userApi } from './userApi';

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

การใช้ Query Hook

function UserCard({ id }) {
  const { data, isLoading, isError } = useGetUserQuery(id);
  if (isLoading) return <Spinner />;
  if (isError) return <p>Error</p>;
  return <p>{data.name}</p>;
}

การรวมคำขอซ้ำโดยอัตโนมัติ

อายุแคชด้วย keepUnusedDataFor

endpoints: (builder) => ({
  getUser: builder.query({
    query: id => '/users/' + id,
    keepUnusedDataFor: 300, // 5 minutes
  }),
})

การดึงข้อมูลเป็นระยะสำหรับข้อมูลสด

const { data } = useGetStatsQuery(undefined, {
  pollingInterval: 5000, // refetch every 5 seconds
});

อาร์กิวเมนต์ของ Query และการข้ามการเรียก

const { data } = useGetUserQuery(userId, { skip: !userId });

การแปลงการตอบกลับ

getUsers: builder.query({
  query: () => '/users',
  transformResponse: (raw) => raw.data.users,
})

ตรวจสอบด่วน

สรุปทบทวน

ขั้นถัดไป