React Query: State Management untuk Data Server yang Elegan

React Query (TanStack Query) menyederhanakan penanganan server state secara dramatis.

Masalah yang Diselesaikan React Query

Tanpa React Query, Anda harus manage sendiri:

• Loading states

• Error states

• Caching dan invalidation

• Background refetching

• Pagination dan infinite scroll

Setup Dasar

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
const queryClient = new QueryClient()
function App() {   return (     <QueryClientProvider client={queryClient}>       <YourApp />     </QueryClientProvider>   ) }

useQuery untuk Fetch Data

function Posts() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['posts'],
    queryFn: () => fetch('/api/posts').then(r => r.json()),
    staleTime: 5  60  1000, // 5 menit
  })
if (isLoading) return <Spinner />   if (error) return <Error message={error.message} />
return <PostList posts={data} /> }

useMutation untuk Mutasi Data

const mutation = useMutation({
  mutationFn: (newPost) => fetch('/api/posts', {
    method: 'POST',
    body: JSON.stringify(newPost),
  }),
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['posts'] })
  },
})