Create a example handling data fetching with SWR in NextJS

https://hoanguyenit.com/create-a-example-handling-data-fetching-with-swr-in-nextjs.html

Tìm nạp dữ liệu bằng SWR trong NextJS 13. SWR (Stale-While-Revalidate) là một thư viện quản lý trạng thái dữ liệu phía client trong ứng dụng, các ứng dụng hay sử dụng, chẳng hạn như trong React vậy. Nói đến SWR thì ta cũng kể đến với cái tên hay thường sử dụng đó là RTX Query

RTK Query : Truy vấn RTK là một công cụ tìm nạp và lưu trữ dữ liệu mạnh mẽ. Nó được thiết kế để đơn giản hóa các trường hợp phổ biến để tải dữ liệu trong ứng dụng web, loại bỏ nhu cầu tự mình viết logic tìm nạp dữ liệu và bộ nhớ đệm.

Các bạn rãnh thì tìm hiểu thêm nhé, RTK Query rất hay

Okay giờ mình làm một ví dụ đơn giản thôi

# Install SWR in Project NextJS

Ở đây là mình đã có project NextJS rồi nhé, nên mình cài đặt thêm swr. Bạn nào chưa tạo project thì xem bài viết này nhé : Create A Project With Next.Js

npm i swr

# Create folder Api in Project

+ app/api/categories/route.tsx : mình tạo file route.tsx mình dùng typescript nhé, tuỳ vào mọi người thích nào thì dùng đó

import { NextResponse } from 'next/server'
 
export async function GET() {
  const res = await fetch(process.env.PATH_URL_BACKEND+'/api/categories', {
    headers: {
      'Content-Type': 'application/json',
    },
  })
  const result = await res.json()
  return NextResponse.json({ result })
}

Đoạn code trên cũng đơn giản thôi, mình chỉ việc fetch api đến server backend để lấy dữ liệu thôi

process.env.PATH_URL_BACKEND : là đường dẫn domain của server backend : VD: http://127.0.0.1:8000 ,....hay domain nào đó

+ Mở file next.config.js lên cấu hình các biến trong env

/** @type {import('next').NextConfig} */
const nextConfig = {
    env: {
        PATH_URL_BACKEND:"http://127.0.0.1:8000"
      },
    output: 'export',
}
module.exports = nextConfig

# Import SWR in Component

Giờ bạn tạo cho mình một component nào cũng được, vì công việc này chỉ cần thư viện SWR vào dùng thôi

+ app/category/page.tsx :

'use client'
import Link from "next/link";
import useSWR from "swr";
const fetcher = (url: string) => fetch(url).then((res) => res.json());
export default function Menu() {
  const { data, error, isLoading } = useSWR<any>(
    `/api/categories`,
    fetcher
  );
 
  if (error) return <div>Failed to load</div>;
  if (isLoading) return <div>Loading...</div>;
  if (!data) return null;
  return (
    <>
     <ul className="w-full bg-gray-400 flex flex-wrap">
                  {
                                  data &&  data.result.multiple?.length>0 && data.result.multiple.map(({slug,name,parent_id,id,children_categories} : any)=>{
                                        return (
                                            <li key = {id} className='px-2 py-1'>
                                                <Link href={`/category/`+slug}  className='text-black group-hover:text-[#bf1650]'>+ {name}</Link>
                                                <ul className="w-full pl-4">
                                                {
                                                children_categories?.length>0 && children_categories.map((item  : any)=>{
                                                        return <li key = {item.id} className=''><Link href={`/category/`+item.slug} className='text-red-500'>- {item.name}</Link></li>
                                                })
                                                 
                                                }
                                                </ul>
                                            </li>
                                        )
                                    })
                                }
                  </ul>
    </>
  );
}

Đoạn code trên mình có một số cần làm như sau:

+ Import swr trong component

import useSWR from "swr";

• Tìm nạp dữ liệu thông qua fetch, thông thường thì ta cũng cần tìm nạp trước

const fetcher = (url: string) => fetch(url).then((res) => res.json());

• Gọi swr trong function component

const { data, error, isLoading } = useSWR<any>(
    `/api/categories`,
    fetcher
  );

data : chứa dữ liệu được trả về từ máy chủ khi ta sử dụng fetch, Khi dữ liệu được cập nhật, data sẽ thay đổi và giao diện người dùng của bạn sẽ được cập nhật tự động để phản ánh dữ liệu mới , bạn có để custom lại như sau cho dễ quản lý nhé : data:categories , sau đó bạn chỉ việc dùng biến categories thôi là được

error : chứa thông tin về bất kỳ lỗi nào xảy ra trong quá trình gửi yêu cầu hoặc xử lý dữ liệu. Nếu không có lỗi, giá trị của error sẽ là null.

isLoading: là một biến boolean (true hoặc false) , Nếu là true có nghĩa là ta đang trong trạng thái chờ đợi loading....Khi giá trị là false có nghĩa là tìm nạp xong rồi, có dữ liệu rồi, hiện thị ra cho người dùng xem thôi

Nói đến useSWR : thì ta nhìn bên trên nó có hai tham số bắt buộc phải có

userSWR(key,function, options) 👍

Key(tham số bắt buộc phải có nhé) : ta cần cung cấp giá trị cho nó biết ta cần request đến đường truyền nào. Bên trên mình có dùng `/api/categories`, nó chính là đường dẫn http://localhost:3000/api/categories trong nextjs , khi chúng ta npm run dev . Khi được request tới router đường truyền đó, nó sẽ xử lý fetch trong file app/api/categories/route.tsx

Function(tham số bắt buộc phải có) : là hàm xử lý fetch api, nó nhận giá trị Key và gửi yêu cầu xử lý

Options( không bắt buộc) : một đối tượng tùy chọn cho hook SWR

Các bạn tìm hiểu thêm tại đây nhé: https://swr.vercel.app/docs/api