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

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

4
import { API_URL } from '../constants'
5

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

9
  useEffect(() => {
10
    const getPosts = async () => {
11
      const res = await fetch(API_URL)
12
      const data = await res.json()
13
      setPosts(data)
14
    }
15

16
    getPosts()
17
  }, [])
18

19
  return (
20
    <>
21
      <h2>ตัวอย่าง fetch data ด้วย `useEffect`</h2>
22
      {posts.map((post) => (
23
        <p key={post.id}>{post.title}</p>
24
      ))}
25
    </>
26
  )
27
}
28

29
export default WithUseEffect

1
const useFetchPosts = () => {
2
  const [data, setData] = useState([])
3
  const [isLoading, setIsLoading] = useState(false)
4

5
  useEffect(() => {
6
    const getPosts = async () => {
7
      const res = await fetch(API_URL)
8
      const data = await res.json()
9
      setPosts(data)
10
    }
11

12
    getPosts()
13
  }, [])
14

15
  return { data, isLoading }
16
}

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

1
import useSWR from 'swr'
2
import Posts from './posts'
3

4
import { API_URL } from '../constants'
5

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

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

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

13
  return (
14
    <>
15
      <h2>ตัวอย่าง fetch data ด้วย `SWR`</h2>
16
      {posts.map((post) => (
17
        <p key={post.id}>{post.title}</p>
18
      ))}
19
    </>
20
  )
21
}
22

23
export default WithSWR

1
import {
2
  QueryClient,
3
  QueryClientProvider,
4
} from '@tanstack/react-query'
5

6
const queryClient = new QueryClient()
7

8
<QueryClientProvider client={queryClient}>
9
  <App />
10
</QueryClientProvider>

1
import { useQuery } from '@tanstack/react-query'
2

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

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

3
import Posts from './posts'
4
import { API_URL } from '../constants'
5

6
const queryClient = new QueryClient()
7

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

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

16
  return (
17
    <>
18
      <h2>ตัวอย่าง `React Query`</h2>
19
      {posts.map((post) => (
20
        <p key={post.id}>{post.title}</p>
21
      ))}
22
    </>
23
  )
24
}
25

26
export default function WithReactQuery() {
27
  return (
28
    <QueryClientProvider client={queryClient}>
29
      <FetchPosts />
30
    </QueryClientProvider>
31
  )
32
}