import { useEffect, useState } from "react";
 
type Todo = {
  id: number;
  content: string;
};
 
const useFetching = <T,>({
  callbackFn,
  deps = [],
}: {
  callbackFn: () => Promise<T>;
  deps?: (string | number)[];
}): {
  data: T | [];
  error: string;
  isLoading: boolean;
  isError: boolean;
} => {
  const [data, setData] = useState<T | []>([]);
  const [error, setError] = useState<string>("");
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [isError, setIsError] = useState<boolean>(false);
 
  useEffect(() => {
    let mounted = true;
 
    const fetchData = async () => {
      try {
        setIsLoading(true);
        setIsError(false);
        const data = await callbackFn();
        setData(data);
      } catch (error) {
        setIsError(true);
        setError(
          error instanceof Error
            ? error.message
            : "Unexpected Error is ouccured"
        );
      } finally {
        if (mounted) {
          setTimeout(() => {
            setIsLoading(false);
          }, 1000);
        }
      }
      return () => {
        mounted = false;
      };
    };
    fetchData();
  }, deps);
 
  return { data, error, isLoading, isError };
};

const ENDPOINT = "http://localhost:3000/api/dev/todo";
const fetchTodo = async (): Promise<Todo[]> => {
  const response = await fetch(ENDPOINT);
  if (!response.ok) {
    throw new Error("Fail to fetch");
  }
  const data: Todo[] = await response.json();
  return data;
};

const App = () => {
  const [text, setText] = useState<string>("");
  const {
    data: todos,
    isLoading,
    isError,
  } = useFetching<Todo[]>({
    callbackFn: fetchTodo,
  });
 
  if (isLoading) return <div>loading ...</div>;
  if (isError) return <div>error</div>;
 
  return (
    <div>
      <ul>
        {todos.map(({ id, content }) => (
          <li key={id}>{content}</li>
        ))}
      </ul>
      {/* 생략 .. */}
    </div>
  );
};
 
export default App;

const {
  data,
  dataUpdatedAt,
  error,
  errorUpdatedAt,
  failureCount,
  failureReason,
  fetchStatus,
  isError,
  isFetched,
  isFetchedAfterMount,
  isFetching,
  isInitialLoading,
  isLoading,
  isLoadingError,
  isPaused,
  isPending,
  isPlaceholderData,
  isRefetchError,
  isRefetching,
  isStale,
  isSuccess,
  refetch,
  status,
} = useQuery(
  {
    queryKey,
    queryFn,
    gcTime,
    enabled,
    networkMode,
    initialData,
    initialDataUpdatedAt,
    meta,
    notifyOnChangeProps,
    placeholderData,
    queryKeyHashFn,
    refetchInterval,
    refetchIntervalInBackground,
    refetchOnMount,
    refetchOnReconnect,
    refetchOnWindowFocus,
    retry,
    retryOnMount,
    retryDelay,
    select,
    staleTime,
    structuralSharing,
    throwOnError,
  },
  queryClient
);

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const queryClient = new QueryClient();
 
ReactDOM.createRoot(document.getElementById("root")!).render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

import { useQuery } from "@tanstack/react-query";
const App = () => {
  const {
    data: todos = [],
    isLoading,
    isError,
  } = useQuery({
    queryKey: ["todo"],
    queryFn: fetchTodo,
  });
 
  if (isLoading) return <div>Loading..</div>;
  if (isError) return <div>Error is occured</div>;
 
  return (
    <div>
      <ul>
        {todos.map(({ id, content }) => (
          <li key={id}>{content}</li>
        ))}
      </ul>
    </div>
  );
};
 
export default App;

import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
const App = () => {
  const [dummy, setDummy] = useState<number>(0);
  const {
    data: todos = [],
    isLoading,
    isError,
  } = useQuery({
    queryKey: ["todo", dummy],
    queryFn: fetchTodo,
  });
 
  if (isLoading) return <div>Loading..</div>;
  if (isError) return <div>Error is occured</div>;
 
  return (
    <div>
      <ul>
        {todos.map(({ id, content }) => (
          <li key={id}>{content}</li>
        ))}
      </ul>
      <button
        onClick={() => {
          setDummy((prev) => prev++);
        }}
      >
        re-render!
      </button>
    </div>
  );
};
 
export default App;

const App = () => {
  return (
    <div className="flex">
      {/* 기존 코드를 캡슐화 한 Todo 컴포넌트 */}
      <Todo />
      <Todo />
    </div>
  );
};