Khóa học Frontend NextJS + React

npm install swr typescript @types/react
# hoặc
yarn add swr typescript @types/react

import useSWR from 'swr';

const { data, error, isLoading } = useSWR(key, fetcher, options);

// api.ts (hoặc một file fetcher riêng)
export async function fetchJson<JSON = any>(
  input: RequestInfo,
  init?: RequestInit
): Promise<JSON> {
  const res = await fetch(input, init);
  if (!res.ok) {
    const error = new Error('An error occurred while fetching the data.');
    // Attach extra info to the error object.
    // error.info = await res.json(); // Có thể thêm thông tin lỗi chi tiết
    error.message = res.statusText;
    throw error;
  }
  return res.json();
}

// components/UserProfile.tsx
import React from 'react';
import useSWR from 'swr';
import { fetchJson } from '../api'; // Import fetcher của bạn

// Định nghĩa kiểu dữ liệu mong muốn
interface User {
  id: number;
  name: string;
  email: string;
}

function UserProfile({ userId }: { userId: number }) {
  // Sử dụng useSWR với kiểu dữ liệu
  // key có thể là null hoặc undefined nếu userId chưa có, giúp bỏ qua fetch
  const { data: user, error, isLoading } = useSWR<User, Error>(
    userId ? `/api/users/${userId}` : null, // key phụ thuộc vào userId
    fetchJson // hàm fetcher của bạn
  );

  if (isLoading) {
    return <div>Đang tải thông tin người dùng...</div>;
  }

  if (error) {
    // error được tự động typed là Error nhờ kiểu dữ liệu thứ 2 trong useSWR<User, Error>
    return <div>Lỗi tải thông tin người dùng: {error.message}</div>;
  }

  // data được tự động typed là User
  if (!user) {
      // Điều này có thể xảy ra nếu key ban đầu là null hoặc undefined
      return <div>Chọn một người dùng để xem.</div>;
  }

  return (
    <div>
      <h2>Thông tin người dùng</h2>
      <p>ID: {user.id}</p>
      <p>Tên: {user.name}</p>
      <p>Email: {user.email}</p>
    </div>
  );
}

export default UserProfile;

// components/ArticleList.tsx
import React from 'react';
import useSWR from 'swr';
import { fetchJson } from '../api';

interface Article {
  id: number;
  title: string;
  summary: string;
}

interface ArticlesResponse {
  articles: Article[];
  total: number;
}

function ArticleList() {
  // Định nghĩa key và fetcher, type cho dữ liệu thành công và lỗi
  const { data, error, isLoading, isValidating, mutate } = useSWR<ArticlesResponse, Error>(
    '/api/articles',
    fetchJson,
    {
      // Tùy chọn cấu hình SWR
      revalidateOnFocus: true, // Tự động fetch lại khi focus vào tab
      // revalidateIfStale: false, // Ngăn fetch lại nếu dữ liệu cache vẫn còn
      // dedupingInterval: 5000 // Chỉ fetch tối đa 1 lần trong 5 giây cho cùng key
    }
  );

  // Kiểm tra trạng thái loading ban đầu
  if (isLoading) {
    return <div><p>Đang tải danh sách bài viết...</p></div>;
  }

  // Kiểm tra trạng thái lỗi
  if (error) {
    return <div><p>Không thể tải danh sách bài viết: {error.message}</p></div>;
  }

  // Khi dữ liệu đã tải xong
  // TypeScript biết data có kiểu ArticlesResponse | undefined
  // Vì đã check error và isLoading, data chắc chắn không phải undefined ở đây
  const articles = data?.articles || []; // Sử dụng optional chaining và fallback

  // Bạn có thể hiển thị trạng thái revalidating (đang cập nhật dữ liệu trong nền)
  const revalidatingIndicator = isValidating && !isLoading ? (
      <small>(Đang cập nhật...)</small>
  ) : null;


  return (
    <div>
      <h1>Danh sách bài viết {revalidatingIndicator}</h1>
      {articles.length === 0 && !isLoading && !error ? (
          <p>Không có bài viết nào được tìm thấy.</p>
      ) : (
           <ul>
            {articles.map(article => (
              <li key={article.id}>
                <h3>{article.title}</h3> {/* TypeScript đảm bảo article có title */}
                <p>{article.summary}</p>
              </li>
            ))}
          </ul>
      )}

    </div>
  );
}

export default ArticleList;

// components/PostDetails.tsx
import React from 'react';
import { useRouter } from 'next/router'; // Ví dụ dùng Next.js router
import useSWR from 'swr';
import { fetchJson } from '../api';

interface Post {
  id: number;
  title: string;
  body: string;
  authorId: number;
}

interface Author {
    id: number;
    name: string;
}

// Key có thể là mảng chứa URL và ID
type PostKey = ['/api/posts', number] | null;
type AuthorKey = ['/api/users', number] | null;


function PostDetails() {
  const router = useRouter();
  const postId = router.query.postId ? Number(router.query.postId) : undefined; // Lấy postId từ URL

  // Fetch bài viết
  const postKey: PostKey = postId ? ['/api/posts', postId] : null;
  const { data: post, error: postError, isLoading: isPostLoading } = useSWR<Post, Error>(
      postKey,
      ([url, id]) => fetchJson(`${url}/${id}`) // fetcher nhận mảng key
  );

  // Fetch thông tin tác giả (phụ thuộc vào post)
  const authorId = post?.authorId; // authorId chỉ có khi post đã được tải
  const authorKey: AuthorKey = authorId ? ['/api/users', authorId] : null;
  const { data: author, error: authorError, isLoading: isAuthorLoading } = useSWR<Author, Error>(
      authorKey,
      ([url, id]) => fetchJson(`${url}/${id}`) // fetcher nhận mảng key
  );

  const isLoading = isPostLoading || isAuthorLoading;
  const error = postError || authorError;

  if (isLoading) {
    return <div>Đang tải chi tiết bài viết...</div>;
  }

  if (error) {
    return <div>Lỗi tải bài viết: {error.message}</div>;
  }

  if (!post) {
      // Có thể xảy ra nếu postId ban đầu không hợp lệ hoặc fetch lỗi nhưng không có error object
      return <div>Bài viết không tồn tại hoặc đã xảy ra lỗi không xác định.</div>;
  }

  return (
    <div>
      <h1>{post.title}</h1> {/* TypeScript biết post có title */}
      {author ? (
          <p>Tác giả: {author.name}</p> // TypeScript biết author có name
      ) : (
          <p>Đang tải thông tin tác giả...</p>
      )}
      <p>{post.body}</p>
    </div>
  );
}

export default PostDetails;

// Giả định API endpoint: POST /api/posts/{postId}/like để tăng like
// Trả về số lượt like mới

// components/LikeButton.tsx
import React from 'react';
import useSWR from 'swr';
import { fetchJson } from '../api';

interface PostLikes {
  likes: number;
}

// Hàm fetcher cho số lượt like
const fetchLikes = async (url: string) => {
    const data = await fetchJson<PostLikes>(url);
    return data.likes; // Chỉ trả về số likes
}

// Hàm để gửi request like lên API
const sendLike = async (postId: number): Promise<number> => {
    // Giả định API trả về số like mới sau khi thành công
    const response = await fetch(`/api/posts/${postId}/like`, { method: 'POST' });
    if (!response.ok) {
        throw new Error('Failed to like post');
    }
    const data: PostLikes = await response.json();
    return data.likes;
};


function LikeButton({ postId }: { postId: number }) {
  // Key cho số lượt like của bài viết cụ thể
  const likesKey = `/api/posts/${postId}/likes`;
  const { data: likes, error, isLoading, mutate } = useSWR<number, Error>(
    likesKey,
    fetchLikes // Sử dụng fetcher chỉ lấy số like
  );

  const handleLike = async () => {
    // Bắt đầu optimistic update: Cập nhật UI ngay lập tức với số like tăng thêm 1
    // mutate(newLikes, false) cập nhật cache và UI, không fetch lại
    // currentLikes là giá trị hiện tại trong cache, mặc định là undefined nếu chưa có
    const currentLikes = likes;
    // Đặt trạng thái loading hoặc disabled nút bấm nếu cần ở đây

    // Nếu có dữ liệu cache, cập nhật tạm thời lên UI
    if (currentLikes !== undefined) {
         mutate(currentLikes + 1, false);
    }


    try {
      // Gửi request like lên API
      const newLikes = await sendLike(postId);

      // Sau khi API thành công, cập nhật cache với dữ liệu thật từ API
      // mutate(newLikes, true) cập nhật cache VÀ fetch lại để xác nhận
      // Việc fetch lại có thể cần thiết nếu logic server phức tạp hơn việc chỉ tăng 1
      // hoặc nếu optimistic update có thể sai lệch.
      // Nếu chỉ đơn giản là số like tăng 1 và bạn tin tưởng optimistic update,
      // có thể không cần fetch lại (chỉ cần mutate(newLikes, false) lần nữa hoặc bỏ qua).
      // Trong ví dụ này, ta dùng revalidation (true) để chắc chắn.
       mutate(newLikes, true); // Cập nhật cache và kích hoạt revalidation

    } catch (err) {
      // Nếu API thất bại, rollback lại dữ liệu cache ban đầu (trước optimistic update)
      // mutate(currentLikes, false) cập nhật cache trở lại giá trị ban đầu, không fetch lại
       if (currentLikes !== undefined) {
           mutate(currentLikes, false);
       }
       alert(`Lỗi khi like bài viết: ${err instanceof Error ? err.message : 'Unknown error'}`); // Thông báo lỗi
    }
  };

  if (isLoading) return <button disabled>Loading Likes...</button>;
  if (error) return <button disabled>Error Loading Likes</button>;

  // TypeScript biết likes có kiểu number | undefined
  const displayLikes = likes !== undefined ? likes : 0; // Default về 0 nếu chưa tải xong hoặc lần đầu

  return (
    <button onClick={handleLike} disabled={isLoading || likes === undefined}>
      Like ({displayLikes})
    </button>
  );
}

export default LikeButton;

// pages/_app.tsx (trong Next.js) hoặc root component của ứng dụng React
import type { AppProps } from 'next/app';
import { SWRConfig } from 'swr';
import { fetchJson } from '../api'; // Sử dụng fetcher chung

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <SWRConfig
      value={{
        // Thiết lập fetcher mặc định
        fetcher: fetchJson,
        // Các tùy chọn SWR mặc định khác
        revalidateOnFocus: true,
        revalidateIfStale: true,
        // errorRetryInterval: 10000, // Thử lại sau 10 giây nếu lỗi
      }}
    >
      <Component {...pageProps} />
    </SWRConfig>
  );
}

export default MyApp;

// components/MyComponent.tsx
import useSWR from 'swr';

interface Data {
  message: string;
}

function MyComponent() {
  // Không cần truyền fetcher vì đã cấu hình global
  const { data, error } = useSWR<Data, Error>('/api/some-data');

  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;

  return <div>{data.message}</div>;
}