TanStack Query + TypeScript allows type-safe server-state management, caching, and automatic refetching.

#Installing TanStack Query

npm install @tanstack/react-query

#Setting Up QueryClient

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyComponent />
    </QueryClientProvider>
  );
}

#Fetching Data with Types

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

interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

function MyComponent() {
  const { data, isLoading } = useQuery<Todo[]>(['todos'], () =>
    fetch('https://jsonplaceholder.typicode.com/todos').then(res => res.json())
  );

  if (isLoading) return <div>Loading...</div>;
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

#Mutations with TypeScript

import { useMutation, useQueryClient } from '@tanstack/react-query';

interface TodoInput { title: string; completed: boolean; }

const queryClient = useQueryClient();

const mutation = useMutation<void, unknown, TodoInput>(
  (newTodo) =>
    fetch('/todos', { method: 'POST', body: JSON.stringify(newTodo) }).then(res => res.json()),
  {
    onSuccess: () => queryClient.invalidateQueries(['todos'])
  }
);

#Conclusion

TanStack Query + TypeScript provides strongly typed, efficient server-state management.