React Query provides several core hooks:

• useQuery: For fetching and caching data
• useMutation: For creating, updating, or deleting data
• useQueryClient: For accessing the query client instance
• useInfiniteQuery: For paginated or infinite scrolling data
• useQueries: For running multiple queries in parallel
• useIsFetching: For getting the number of currently fetching queries
• useIsMutating: For getting the number of currently running mutations
  The two most commonly used are useQuery for read operations and useMutation for write operations.

Setting up React Query involves three main steps:

1. Install the package:

npm install @tanstack/react-query

2. Create and provide QueryClient:

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

3. Use React Query hooks in components:

import { useQuery } from '@tanstack/react-query';
function Posts() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['posts'],
    queryFn: () => fetch('/api/posts').then(res => res.json())
  });
  if (isLoading) return 'Loading...';
  if (error) return 'Error occurred';
  return <div>{/* Render posts */}</div>;
}

The useQuery hook accepts a configuration object with key properties:

const { data, isLoading, error, isError, isSuccess } = useQuery({
  queryKey: ['posts', userId], // Unique identifier for the query
  queryFn: () => fetchPosts(userId), // Function that returns a promise
  enabled: !!userId, // Optional: conditionally enable the query
  staleTime: 5 * 60 * 1000, // Optional: how long data stays fresh
  refetchOnWindowFocus: false // Optional: disable refetch on window focus
});

Key properties:

• queryKey: Unique identifier used for caching and invalidation
• queryFn: Async function that fetches the data
• enabled: Boolean to conditionally run the query
• staleTime: Time in milliseconds before data is considered stale
  Return values:
• data: The fetched data
• isLoading: True during the first fetch
• error: Error object if the query failed
• isError/isSuccess: Boolean states for handling different scenarios

These two states serve different purposes:
isLoading:

• True only during the first fetch when there's no cached data
• False if there's any cached data, even if a background refetch is happening
• Used to show initial loading states
  isFetching:
• True whenever any fetch is happening (initial or background)
• True during background refetches even if cached data exists
• Used to show loading indicators for any fetching activity

const { data, isLoading, isFetching } = useQuery({
  queryKey: ['posts'],
  queryFn: fetchPosts
});
// First load: isLoading = true, isFetching = true
// Background refetch: isLoading = false, isFetching = true
// With cached data: isLoading = false, isFetching = false

This distinction allows you to show different UI states - a full loading screen for initial loads and a subtle indicator for background updates.

Query keys are unique identifiers that React Query uses for caching, invalidation, and refetching. They must be arrays and are compared deeply.
Basic structure:

// Simple key
queryKey: ['posts']
// Key with parameters
queryKey: ['posts', userId]
// Key with complex parameters
queryKey: ['posts', { userId, status: 'published' }]

Key principles:

• Uniqueness: Different keys create separate cache entries
• Hierarchy: Keys are hierarchical, allowing group operations
• Deep comparison: React Query compares keys deeply to determine if data should be refetched
  Examples:

// These are different queries with separate cache
queryKey: ['posts'] // All posts
queryKey: ['posts', 1] // Posts for user 1
queryKey: ['posts', 2] // Posts for user 2
// Invalidation example
queryClient.invalidateQueries({ queryKey: ['posts'] }); // Invalidates all post queries
queryClient.invalidateQueries({ queryKey: ['posts', 1] }); // Only user 1's posts

Query keys enable React Query's intelligent caching and make it easy to manage related data.

useMutation is used for operations that create, update, or delete data (side effects). Unlike useQuery, mutations don't run automatically and must be triggered manually.
Basic usage:

const mutation = useMutation({
  mutationFn: (newPost) => fetch('/api/posts', {
    method: 'POST',
    body: JSON.stringify(newPost)
  }),
  onSuccess: (data) => {
    // Invalidate and refetch related queries
    queryClient.invalidateQueries({ queryKey: ['posts'] });
  },
  onError: (error) => {
    console.error('Failed to create post:', error);
  }
});
// Trigger the mutation
const handleSubmit = (formData) => {
  mutation.mutate(formData);
};

Key properties:

• mutationFn: Function that performs the mutation
• onSuccess: Callback for successful mutations
• onError: Callback for failed mutations
• onSettled: Callback that runs regardless of success/failure
  Use cases:
• Creating new records
• Updating existing data
• Deleting records
• Any operation that modifies server state

React Query provides built-in states for handling different scenarios:
Basic approach:

const { data, isLoading, error, isError } = useQuery({
  queryKey: ['posts'],
  queryFn: fetchPosts
});
if (isLoading) return <div>Loading posts...</div>;
if (isError) return <div>Error: {error.message}</div>;
return (
  <div>
    {data.map(post => (
      <div key={post.id}>{post.title}</div>
    ))}
  </div>
);

const { data, isLoading, error, isError } = useQuery({
  queryKey: ['posts'],
  queryFn: fetchPosts,
  retry: 3, // Retry failed requests 3 times
  retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000)
});

// Custom error boundary
if (isError) {
  return (
    <div>
      <h3>Something went wrong</h3>
      <p>{error.message}</p>
      <button onClick={() => refetch()}>Try Again</button>
    </div>
  );
}

For mutations:

const mutation = useMutation({
  mutationFn: createPost,
  onError: (error, variables, context) => {
    // Handle mutation errors
    setErrorMessage(error.message);
  }
});

return (
  <div>
    <button 
      onClick={() => mutation.mutate(postData)}
      disabled={mutation.isPending}
    >
      {mutation.isPending ? 'Creating...' : 'Create Post'}
    </button>
    {mutation.isError && <div>Error: {mutation.error.message}</div>}
  </div>
);