react react-query state-management typescript

React Query for server state management

Maya Patel Jan 2026

2 tabs

import React from 'react'
import ReactDOM from 'react-dom/client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import App from './App'
import './index.css'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60 * 1000, // 1 minute
      cacheTime: 5 * 60 * 1000, // 5 minutes
      retry: 1,
      refetchOnWindowFocus: false,
    },
  },
})

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  </React.StrictMode>,
)

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import api from '@/services/api'
import { Post } from '@/types'

export function usePosts(page = 1) {
  return useQuery({
    queryKey: ['posts', page],
    queryFn: async () => {
      const { data } = await api.get<{ posts: Post[] }>('/posts', {
        params: { page },
      })
      return data.posts
    },
  })
}

export function useCreatePost() {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: async (post: Partial<Post>) => {
      const { data } = await api.post<Post>('/posts', { post })
      return data
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['posts'] })
    },
  })
}

2 files · typescript Explain with highlit

React Query eliminates boilerplate for fetching, caching, and syncing server data. Instead of managing loading/error/data states manually with useState, I define queries with useQuery that handle caching, background refetching, and stale data automatically. Mutations use useMutation for create/update/delete operations with optimistic updates and automatic cache invalidation. The queryClient configuration sets global defaults for retry behavior, stale time, and cache time. React Query's devtools provide visibility into query states and cache contents during development. This library has completely changed how I build data-heavy UIs—complex CRUD apps that used to require Redux now need almost zero state management code.