How do you handle loading and error states in React Query?

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>
);