1
function Todos() {
2
  const { isLoading, isError, data, error } = useQuery('todos', fetchTodoList)
3

4
  if (isLoading) {
5
    return <span>로딩중</span>
6
  }
7

8
  if (isError) {
9
    return <span>에러 : {error.message}</span>
10
  }
11

12
  return (
13
    <ul>
14
      {data.map(todo => (
15
        <li key={todo.id}>{todo.title}</li>
16
      ))}
17
    </ul>
18
  )
19
}

1
import { useQuery } from 'react-query'
2

3
export default function ExampleComponent() {
4
  // 데이터 가져오기 (자동 캐싱)
5
  const { data, error, isLoading } = useQuery('exampleQueryKey', fetchData)
6

7
  // 5초마다 자동 리프레시
8
  const { data, error, isLoading } = useQuery('exampleQueryKey', fetchData, {
9
    refetchInterval: 5000,
10
  })
11

12
  // 뮤테이션으로 데이터 수정
13
  const { mutate, data, error, isLoading } = useMutation(postData)
14

15
  // 뮤테이션 호출하는 핸들러
16
  const handleButtonClick = () => {
17
    // ...
18
    mutate(newData)
19
  }
20
}

1
import { useQuery } from 'react-query'
2

3
export default function ExampleComponent() {
4
  // 10초 동안 캐싱된 데이터를 사용 (stale 상태)
5
  const { data, error, isLoading } = useQuery('exampleQueryKey', fetchData, {
6
    staleTime: 10000,
7
  })
8
}

1
yarn add react-query

1
// app/provider.tsx
2
import { QueryClient, QueryClientProvider } from 'react-query'
3
import { ReactQueryDevtools } from 'react-query/devtools'
4

5
// react query client 생성
6
const queryClient = new QueryClient()
7

8
export const NextProvider = ({ children }: Props) => {
9
  return (
10
    // 전체 앱에 client 적용
11
    <QueryClientProvider client={queryClient}>
12
      {children}
13
      <ReactQueryDevtools />
14
    </QueryClientProvider>
15
  )
16
}

1
import { useQuery } from 'react-query'
2

3
export default function MyComponent() {
4
  const { isLoading, isError, data, error } = useQuery('profile', fetchData)
5

6
  if (isLoading) return <p>로딩중...</p>
7
  if (isError) return <p>에러 : {error.message}</p>
8
}

1
import { useQuery, useQueryClient } from 'react-query'
2

3
export default function MyComponent() {
4
  const queryClient = useQueryClient()
5

6
  const { data: todos } = useQuery('todos', fetchTodos)
7

8
  const handleUpdateTodo = (id, text) => {
9
    // Todo 업데이트 API 호출
10

11
    // 다른 쿼리 갱신 : 'todos' 쿼리 다시 로드
12
    queryClient.invalidateQueries('todos')
13
  }
14
}

1
import { useMutation, useQueryClient } from 'react-query'
2

3
export default function MyComponent() {
4
  const queryClient = useQueryClient()
5

6
  const mutation = useMutation({
7
    mutationFn: postTodo,
8
    onSuccess: () => {
9
      queryClient.invalidateQueries({ queryKey: ['todos'] })
10
    },
11
  })
12

13
  return (
14
    <button
15
      onClick={() => {
16
        mutation.mutate({
17
          id: Date.now(),
18
          title: 'Do Laundry',
19
        })
20
      }}
21
    >
22
      Todo 추가
23
    </button>
24
  )
25
}

1
import { QueryClient, QueryClientProvider } from 'react-query'
2

3
const queryClient = new QueryClient()
4

5
export default function App() {
6
  return (
7
    <QueryClientProvider client={queryClient}>
8
      <Todos />
9
    </QueryClientProvider>
10
  )
11
}

1
import { useQuery } from 'react-query'
2

3
export default async function getStaticProps() {
4
  const posts = await getPosts()
5
  return { props: { posts } }
6
}
7

8
function Posts(props) {
9
  const { data } = useQuery({
10
    queryKey: ['posts'],
11
    queryFn: getPosts,
12
    initialData: props.posts,
13
  })
14
}

1
function Todos() {
2
  const { isLoading, isError, data, error } = useQuery('todos', fetchTodoList)
3

4
  if (isLoading) {
5
    return <span>Loading...</span>
6
  }
7

8
  if (isError) {
9
    return <span>Error: {error.message}</span>
10
  }
11

12
  // We can assume by this point that `isSuccess === true`
13
  return (
14
    <ul>
15
      {data.map(todo => (
16
        <li key={todo.id}>{todo.title}</li>
17
      ))}
18
    </ul>
19
  )
20
}

1
const config = {
2
  url: '/api/stores',
3
}
4

5
const { data: stores, isFetching } = useQuery({
6
  queryKey: ['stores'],
7
  queryFn: async () => {
8
    const { data } = await axios(config)
9
    return data as StoreType[]
10
  },
11
})

1
const {
2
  data,
3
  error,
4
  fetchNextPage,
5
  fetchPreviousPage,
6
  hasNextPage,
7
  hasPreviousPage,
8
  isFetching,
9
  isFetchingNextPage,
10
  isFetchingPreviousPage,
11
  status,
12
  ...result
13
} = useInfiniteQuery({
14
  queryKey: ['projects'],
15
  queryFn: ({ pageParam = 1 }) => fetchPage(pageParam),
16
  getNextPageParam: (lastPage, allPages) => lastPage.nextCursor,
17
  getPreviousPageParam: (firstPage, allPages) => firstPage.prevCursor,
18
})

1
import { useInfiniteQuery } from 'react-query'
2

3
const fetchPosts = async ({ pageParam = 1 }) => {
4
  const response = await fetch(`/api/posts?page=${pageParam}`)
5
  return response.json()
6
}
7

8
const { data, fetchNextPage, hasNextPage } = useInfiniteQuery(
9
  'posts', // 고유한 쿼리 키
10
  fetchPosts, // 데이터 가져오는 비동기 함수
11
  // 다음 페이지 파라미터 추출
12
  { getNextPageParam: (lastPage, pages) => lastPage.nextPage },
13
)

1
export default function Example() {
2
  return (
3
    <div>
4
      {data.pages.map((page, pageIndex) => (
5
        <div key={pageIndex}>
6
          {page.posts.map(post => (
7
            <div key={post.id}>{post.title}</div>
8
          ))}
9
        </div>
10
      ))}
11

12
      {hasNextPage ? (
13
        <button onClick={() => fetchNextPage()} disabled={isFetching}>
14
          {isFetching ? '로딩 중...' : '더 불러오기'}
15
        </button>
16
      ) : null}
17
    </div>
18
  )
19
}

1
import useIntersectionObserver from '@/hooks/useIntersectionObserver'
2
import { useEffect, useRef } from 'react'
3

4
export default function Example() {
5
  const listRef = useRef<HTMLDivElement | null>(null)
6
  const listEnd = useIntersectionObserver(listRef, {})
7
  const isEndPage = !!listEnd?.isIntersecting
8

9
  useEffect(() => {
10
    if (isEndPage && hasNextPage) {
11
      fetchNextPage()
12
    }
13
  }, [fetchNextPage, hasNextPage, isEndPage])
14
}

1
// 빈 리스트 선택
2
const listElem = document.querySelector('#infinite-list')
3

4
// 20개의 아이템 추가 함수
5
let nextItem = 1
6

7
const loadMore = function () {
8
  for (let i = 0; i < 20; i++) {
9
    let item = document.createElement('li')
10
    item.innerText = 'List Item #' + nextItem++
11
    listElm.appendChild(item)
12
  }
13
}
14

15
// ul 리스트 바닥까지 스크롤 했는지 확인
16
listElm.addEventListener('scroll', function () {
17
  if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
18
    LoadMore()
19
  }
20
})
21

22
// 아이템 20개씩 더 가져오는 LoadMore함수 실행
23
LoadMore()

1
// IntersectionObserver
2
const io = new IntersectionObserver(entries => {
3
  entries.forEach(entry => {
4
    // 관찰 대상이 viewport 안에 들어온 경우 'active' 클래스 추가
5
    if (entry.intersectionRatio > 0) {
6
      entry.target.classList.add('active')
7
    }
8
    // 그 외의 경우 'active' 클래스 제거
9
    else {
10
      entry.target.classList.remove('active')
11
    }
12
  })
13
})
14

15
// 관찰할 대상을 선언하고, 해당 속성을 관찰
16
const boxList = document.querySelectorAll('.box')
17
boxList.forEach(el => {
18
  io.observe(el)
19
})

1
// observer 초기화
2
let io = new IntersectionObserver(callback, options)
3

4
io.observe(element) // 관찰 대상 등록

1
let callback = (entries, observer) => {
2
  entries.forEach(entry => {
3
    // target element:
4
    //   entry.boundingClientRect
5
    //   entry.intersectionRect
6
    //   entry.intersectionRatio
7
    //   entry.isIntersecting
8
    //   entry.rootBounds
9
    //   entry.target
10
    //   entry.time
11
  })
12
}

1
let options = {
2
  root: document.querySelector('#scrollArea'),
3
  rootMargin: '0px',
4
  threshold: 1.0,
5
}
6

7
let observer = new IntersectionObserver(callback, options)

1
const io = new IntersectionObserver(callback, options)
2

3
const div = document.querySelector('div')
4
const li = document.querySelector('li')
5

6
io.observe(div) // div 요소 관찰
7
io.observe(li) // li 요소 관찰
8

9
io.unobserve(div) // div 요소 관찰 중지
10
io.unobserve(li) // li 요소 관찰 중지
11

12
io.disconnect() // io가 관찰하는 모든 요소 (div, li) 관찰 중지

1
import { RefObject, useEffect, useState } from 'react'
2

3
interface Args extends IntersectionObserverInit {
4
  freezeOnceVisible?: boolean
5
}
6

7
export function useIntersectionObserver(
8
  elementRef: RefObject<Element>,
9
  { threshold = 0, root = null, rootMargin = '0%', freezeOnceVisible = false }: Args,
10
): IntersectionObserverEntry | undefined {
11
  const [entry, setEntry] = useState<IntersectionObserverEntry>()
12

13
  const frozen = entry?.isIntersecting && freezeOnceVisible
14

15
  const updateEntry = ([entry]: IntersectionObserverEntry[]): void => {
16
    setEntry(entry)
17
  }
18

19
  useEffect(() => {
20
    const node = elementRef?.current // DOM Ref
21
    const hasIOSupport = !!window.IntersectionObserver
22

23
    if (!hasIOSupport || frozen || !node) return
24

25
    const observerParams = { threshold, root, rootMargin }
26
    const observer = new IntersectionObserver(updateEntry, observerParams)
27

28
    observer.observe(node)
29

30
    return () => observer.disconnect()
31

32
    // eslint-disable-next-line react-hooks/exhaustive-deps
33
  }, [elementRef?.current, JSON.stringify(threshold), root, rootMargin, frozen])
34

35
  return entry
36
}

1
/*** react-intersection-observer
2
 * @see https://github.com/thebuilder/react-intersection-observer?tab=readme-ov-file#useinview-hook
3
 * ref : 대상 요소를 참조하기 위한 React Ref 객체
4
 * inView : 대상 요소가 화면에 보이는지 여부를 나타내는 boolean 값
5
 * threshold : 대상 요소가 화면에 보이는 비율을 나타내는 값 (0 ~ 1)
6
 */
7
const { ref, inView } = useInView({ threshold: 1 })
8

9
return (
10
  <div>
11
    {/* 무한 스크롤을 위해, 맨 밑에 의미없는 div를 놓고, 그 div가 보이면, 추가 데이터 로드 */}
12
    {/* isLastPage가 true이거나, products가 비어있거나, products의 길이가 100개 이상이면, */}
13
    {/* 더 이상 불러올 데이터가 없다고 판단한다 */}
14
    {!isLastPage && !!products.length && products.length < 100 && <div ref={ref} />}
15
  </div>
16
)