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

// 1. Створюємо клієнт
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      // Глобальні налаштування
      staleTime: 1000 * 60, // Дані вважаються "свіжими" 1 хвилину
    },
  },
});

ReactDOM.createRoot(document.getElementById('root')).render(
  <QueryClientProvider client={queryClient}>
    <App />
    {/* DevTools — це мастхев для дебагу! */}
    <ReactQueryDevtools initialIsOpen={false} />
  </QueryClientProvider>
);

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

function CreateProduct() {
  const queryClient = useQueryClient(); // Доступ до кешу

  const mutation = useMutation({
    mutationFn: (newProduct) => {
      return axios.post('https://api.escuelajs.co/api/v1/products', newProduct);
    },
    // Виконується при успішному запиті
    onSuccess: () => {
      // 💥 БУМ! Ми кажемо: дані за ключем ['products'] застаріли.
      // Query автоматично зробить refetch там, де цей ключ використовується.
      queryClient.invalidateQueries({ queryKey: ['products'] });
      alert('Продукт створено!');
    },
  });

  return (
    <button 
      onClick={() => mutation.mutate({ title: 'New Item', price: 100 })}
      disabled={mutation.isPending}
    >
      {mutation.isPending ? 'Створення...' : 'Створити Продукт'}
    </button>
  );
}

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

function LikeButton({ postId }) {
  const queryClient = useQueryClient();

  const { mutate } = useMutation({
    mutationFn: likePostApi,
    
    // 1. Виконується ДО запиту
    onMutate: async (newLike) => {
      // Зупиняємо будь-які фонові оновлення цього поста, щоб вони не перезаписали наш оптимізм
      await queryClient.cancelQueries({ queryKey: ['post', postId] });

      // Зберігаємо попередній стан (snapshot) для можливого відкату
      const previousPost = queryClient.getQueryData(['post', postId]);

      // Оновлюємо кеш вручну "оптимістично"
      queryClient.setQueryData(['post', postId], (old) => ({
        ...old,
        likes: old.likes + 1,
        isLiked: true,
      }));

      // Повертаємо snapshot у контекст
      return { previousPost };
    },

    // 2. Якщо сталася помилка
    onError: (err, newLike, context) => {
      // Відкочуємося до попереднього стану
      queryClient.setQueryData(['post', postId], context.previousPost);
    },

    // 3. Завжди після завершення (успіх чи помилка)
    onSettled: () => {
      // Синхронізуємося з сервером для певності
      queryClient.invalidateQueries({ queryKey: ['post', postId] });
    },
  });

  return <button onClick={() => mutate()}>❤️ Like</button>;
}

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

function UserProfile({ userId }) {
  // Тут немає isLoading! Компонент "зависне", якщо даних немає.
  const { data } = useSuspenseQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId),
  });

  return <h1>{data.name}</h1>;
}

export function App() {
  return (
    <Suspense fallback={<div className="skeleton">Loading Profile...</div>}>
      <UserProfile userId={1} />
    </Suspense>
  );
}