Fetch Data ใน React.js ทำยังไงบ้าง?

React Sep 24, 2023

เราสามารถ fetch data ใน React.js ได้ท่าไหนบ้าง? มีทั้งการ fetch โดยไม่ต้องใช้ library อะไร และการใช้ library ที่ช่วยจัดการเรื่อง loading, caching หรือการ revalidating ต่างๆ ให้เรา การ fetch data มีท่าไหนบ้าง ไปดูกันครับ

ตัวอย่างจะใช้ API_URL คือ

API_URL=https://jsonplaceholder.typicode.com/posts?_page=0&limit=9

1. การใช้ useEffect และ fetch/axios

วิธีที่ง่ายที่สุด คือการ fetch ใน useEffect() เมื่อได้ข้อมูล response แล้ว ก็ทำการอัพเดท state เพื่อทำการ re-render component ใหม่

import { useEffect, useState } from 'react'
import Posts from './posts'

import { API_URL } from '../constants'

const WithUseEffect = () => {
  const [posts, setPosts] = useState([])

  useEffect(() => {
    const getPosts = async () => {
      const res = await fetch(API_URL)
      const data = await res.json()
      setPosts(data)
    }

    getPosts()
  }, [])

  return (
    <>
      <h2>ตัวอย่าง fetch data ด้วย `useEffect`</h2>
      {posts.map((post) => (
        <p key={post.id}>{post.title}</p>
      ))}
    </>
  )
}

export default WithUseEffect

นอกจากนี้ เราอาจจะเพิ่ม state สำหรับ isLoading หรือ error กรณีที่ fetch data แล้วมีปัญหา เช่น อาจจะย้ายไปเป็น custom hooks ก็ได้เช่น

const useFetchPosts = () => {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const getPosts = async () => {
      const res = await fetch(API_URL)
      const data = await res.json()
      setPosts(data)
    }

    getPosts()
  }, [])

  return { data, isLoading };
}

2. ใช้ SWR

ตัว SWR เป็น React Hooks for Data fetching สร้างโดยทีมเดียวกับที่ทำ Next.js ข้อดีคือใช้งานง่าย มี caching / reuse ได้ ผมเคยเขียนตัวอย่าง SWR ไว้แล้ว สามารถอ่านรายละเอียดเพิ่มเติมได้

[React.js]ใช้ SWR เพื่อดึงข้อมูล API
สวัสดีครับ บทความนี้มาแนะนำการเขียน React เพื่อดึงข้อมูลจาก API ด้วยการใช้ SWR นะครับ เนื่องจากผมเคยเขียนบทความไว้เมื่อ 3 ปีที่แล้ว เนื้อหาน่าจะค่อนข้างเก่า และตัว SWR ก็มีการอัพเดทไปพอสมควร เลยเขียนบทความใหม่ดีกว่า Devahoy - มาลองใช้

อย่างแรก คือ สร้าง fetcher เป็น function ที่รับ args เป็น key และ return response data กลับไป

const fetcher = url => fetch(url).then(r => r.json())
 

ส่วนการ fetch ก็ง่ายๆ แบบนี้เลย

import useSWR from 'swr'
import Posts from './posts'

import { API_URL } from '../constants'

const fetcher = (url) => fetch(url).then((r) => r.json())

const WithSWR = () => {
  const { data: posts, isLoading } = useSWR(API_URL, fetcher)

  if (isLoading) return <p>Loading...</p>

  return (
    <>
      <h2>ตัวอย่าง fetch data ด้วย `SWR`</h2>
      {posts.map((post) => (
        <p key={post.id}>{post.title}</p>
      ))}
    </>
  )
}

export default WithSWR

ข้อดีของ SWR คือ การ revadating หรือการคอย cached และ sync ข้อมูล api ให้เหมือนมัน realtime นั่นเอง ซึ่งถ้าเราใช้ useEffect() และ fetch ปกติ

3. การใช้ React Query

ตัวอย่างนี้จะเป็นการใช้งาน React Query ครับ การใช้ React Query คือ เราต้องกำหนด Provider โดยใช้ client เป็น queryClient

import {
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'

const queryClient = new QueryClient()
  
<QueryClientProvider client={queryClient}>
  <App />
</QueryClientProvider>

การใช้งาน Query จะใช้ได้เฉพาะที่อยู่ภายใน <QueryClientProvider> ตัวอย่างการ query คือต้องกำหนด

  • queryKey เป็น key ที่เราต้องการ
  • queryFn เป็น function ที่เราจะใช้ในการ fetch ข้อมูล
import { useQuery } from '@tanstack/react-query

const { isLoading, data: posts } = useQuery({
  queryKey: ['repoData'],
  queryFn: () => fetch(API_URL).then((res) => res.json()),
})

ตัวอย่างการ fetch data ด้วย React Query เต็มๆ ก็จะเป็นแบบนี้

import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from '@tanstack/react-query'

import Posts from './posts'
import { API_URL } from '../constants'

const queryClient = new QueryClient()

function FetchPosts() {
  const { isLoading, data: posts } = useQuery({
    queryKey: ['repoData'],
    queryFn: () => fetch(API_URL).then((res) => res.json()),
  })

  if (isLoading) return <p>Loading...</p>

  return (
    <>
      <h2>ตัวอย่าง `React Query`</h2>
      {posts.map((post) => (
        <p key={post.id}>{post.title}</p>
      ))}
    </>
  )
}

export default function WithReactQuery() {
  return (
    <QueryClientProvider client={queryClient}>
      <FetchPosts />
    </QueryClientProvider>
  )
}

สรุป

บทความนี้ก็เป็นตัวอย่างคร่าวๆ ในการ Fetch Data ในรูปแบบต่างๆ จะเห็นว่า แบบง่ายสุดคือ useEffect() และแบบที่ใช้ทั้ง SWR หรือ React Query ทั้งสอง ก็คือเหมือนเป็นตัวช่วย อำนวยความสะดวก มี caching / revalidating หรือการจัดการ state loading, error ต่างๆ ให้เรา เพราะการ fetch เบื้องหลังยังไงก็ต้องใช้ fetch หรือ axios

Source Code ในบทความนี้

Source Code

References

React Hooks for Data Fetching – SWR
SWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.
Overview | TanStack Query Docs
React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze. Motivation

Tags

Chai Phonbopit

เป็น Web Dev ทำงานมา 10 ปีหน่อยๆ ด้วยภาษา JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจ Web3, Crypto และ Blockchain เขียนบล็อกที่ https://devahoy.com