TanStack Query(React Query)

useEffect(() => {
  // effect 함수 자체는 async일 수 없어서 안에서 async 함수를 만들어 부른다
  const fetchUsers = async () => {
    setError(null); setUsers(null); setLoading(true)
    try {
      const res = await axios.get('https://jsonplaceholder.typicode.com/users')
      setUsers(res.data)
    } catch (e) {
      setError(e)
    }
    setLoading(false)
  }
  fetchUsers()
}, [])

function reducer(state, action) {
  switch (action.type) {
    case 'LOADING': return { loading: true, data: null, error: null }
    case 'SUCCESS': return { loading: false, data: action.data, error: null }
    case 'ERROR': return { loading: false, data: null, error: action.error }
    default: throw new Error(`Unhandled action type: ${action.type}`)
  }
}
 
// callback: Promise를 돌려주는 함수, deps: 다시 요청할 조건, skip: true면 처음엔 요청하지 않는다
function useAsync(callback, deps = [], skip = false) {
  const [state, dispatch] = useReducer(reducer, { loading: false, data: null, error: null })
  const fetchData = async () => {
    dispatch({ type: 'LOADING' })
    try {
      dispatch({ type: 'SUCCESS', data: await callback() })
    } catch (e) {
      dispatch({ type: 'ERROR', error: e })
    }
  }
  useEffect(() => {
    if (skip) return
    fetchData()
  }, deps)
  return [state, fetchData]   // fetchData로 다시 불러온다
}
 
// 파라미터가 있는 요청: id가 바뀔 때마다 다시 요청
const [state] = useAsync(() => getUser(id), [id])

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
const queryClient = new QueryClient({
  defaultOptions: {
    queries: { retry: 1, refetchOnWindowFocus: false }, // 모든 쿼리의 기본 옵션
  },
})
 
export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Router />
    </QueryClientProvider>
  )
}

const { data, isPending, isError, error, refetch } = useQuery({
  queryKey: ['notice', 'list', page, keyword],
  queryFn: () => getNoticeList({ page, keyword }),
})

function Todos() {
  const { status, data, error } = useQuery({ queryKey: ['todos'], queryFn: fetchTodoList })
 
  if (status === 'pending') return <span>Loading...</span>
  if (status === 'error') return <span>Error: {error.message}</span>
 
  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )
}

const { data: user } = useQuery({ queryKey: ['user', email], queryFn: () => getUser(email) })
const channelId = user?.channelId
 
const { data: courses } = useQuery({
  queryKey: ['courses', channelId],
  queryFn: () => getCourses(channelId!),
  enabled: !!channelId,       // channelId가 생기기 전에는 pending 상태로 기다린다
})

export const heroQuery = (id: string) =>
  queryOptions({ queryKey: ['hero', id], queryFn: () => fetchHero(id), staleTime: 30_000 })
 
export const useHero = (id: string) => useQuery(heroQuery(id))
// 다른 곳: queryClient.prefetchQuery(heroQuery(id)), queryClient.getQueryData(heroQuery(id).queryKey)

import { keepPreviousData, useQuery } from '@tanstack/react-query'
 
const { data, isPlaceholderData, isFetching } = useQuery({
  queryKey: ['colors', page],
  queryFn: () => fetchColors(page),
  placeholderData: keepPreviousData,   // v4까지는 keepPreviousData: true 옵션
})
// isPlaceholderData가 참이면 「다음」 버튼을 막는다

const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({
  queryKey: ['colors'],
  queryFn: ({ pageParam }) => fetchColors(pageParam),
  initialPageParam: 1,                                   // v5부터 필수
  getNextPageParam: (lastPage, allPages, lastPageParam) =>
    lastPage.length === 0 ? undefined : lastPageParam + 1, // undefined·null이면 다음 페이지 없음
})
 
data?.pages.map((page) => page.map((c) => <li key={c.id}>{c.label}</li>))
<button onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage}>더 보기</button>

const queryClient = useQueryClient()
 
// 1) 무효화
const { mutate } = useMutation({
  mutationFn: createNotice,
  onSuccess: () => queryClient.invalidateQueries({ queryKey: ['notice'] }),
})
 
// 2) 응답으로 갱신: setQueryData(key, 업데이트 함수)
useMutation({
  mutationFn: addHero,
  onSuccess: (newHero) =>
    queryClient.setQueryData(['heroes'], (old: Hero[] = []) => [...old, newHero]),
})

useMutation({
  mutationFn: updateTodo,
  onMutate: async (newTodo) => {
    await queryClient.cancelQueries({ queryKey: ['todos'] })        // 1. 진행 중인 재요청이 덮어쓰지 않게 취소
    const previousTodos = queryClient.getQueryData(['todos'])         // 2. 되돌릴 스냅숏
    queryClient.setQueryData(['todos'], (old: Todo[] = []) => [...old, newTodo]) // 3. 화면 먼저 반영
    return { previousTodos }                                          // 4. 이 값이 onError·onSettled로 넘어간다
  },
  onError: (err, newTodo, onMutateResult) =>
    queryClient.setQueryData(['todos'], onMutateResult?.previousTodos), // 실패하면 되돌림
  onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }), // 5. 성공·실패와 무관하게 서버와 맞춤
})

// app/get-query-client.ts
import { QueryClient, isServer } from '@tanstack/react-query'
 
function makeQueryClient() {
  // 0이면 하이드레이션 직후 바로 다시 가져온다
  return new QueryClient({ defaultOptions: { queries: { staleTime: 60 * 1000 } } })
}
 
let browserQueryClient: QueryClient | undefined
export function getQueryClient() {
  if (isServer) return makeQueryClient()            // 서버: 요청마다 새로
  return (browserQueryClient ??= makeQueryClient()) // 브라우저: 하나만
}

// app/posts/page.tsx: 서버 컴포넌트
export default async function PostsPage() {
  const queryClient = getQueryClient()
  await queryClient.prefetchQuery({ queryKey: ['posts'], queryFn: getPosts })
  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <Posts /> {/* 'use client'. useQuery({ queryKey: ['posts'] })가 바로 데이터를 가진다 */}
    </HydrationBoundary>
  )
}