React-Query چیست و چگونه با استفاده از react query داده ها را واکشی کنیم؟

import axios from "axios";
import { useEffect, useState } from "react";

interface Users {
  id: number;
  name: string;
}

const Users = () => {
  const [users, setUsers] = useState<Users[]>([]);
  const [error, setError] = useState("");

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((res) => setUsers(res.data))
      .catch((err) => setError(err.message));
  }, []);

  if (error) return <div>{error}</div>;

  return (
    <div>
      {users.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </div>
  );
};

export default Users;

import React from "react";
import ReactDOM from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import App from "./App.tsx";

// We use QueryClient for managing and caching remote data in react query.

// first you need to create a new instance of Query client.
const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
);

const userQuery = useQuery({
queryKey: ["users"],
queryFn: axios.get("https://jsonplaceholder.typicode.com/users").then(res => res.data)
})

const {data, error, isLoading} = useQuery({
queryKey: ["users"],
queryFn: axios.get("https://jsonplaceholder.typicode.com/users").then(res => res.data)
})

const {data, error, isLoading} = useQuery<User[], Error>({
queryKey: ["users"],
queryFn: axios.get("https://jsonplaceholder.typicode.com/users").then(res => res.data)
})

import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { useEffect, useState } from "react";

interface Users {
  id: number;
  name: string;
}

const Users = () => {
  const { data, error, isLoading } = useQuery<User[], Error>({
    queryKey: ["users"],
    queryFn: () =>
      axios
        .get<Users[]>("https://jsonplaceholder.typicode.com/users")
        .then((res) => res.data),
  });

if(isLoading) return <div>Loading....!</div>
if(error) return <div>{error.message}</div>

  return (
    <div>
      {data?.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </div>
  );
};

export default Users;

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

interface Users {
  id: number;
  name: string;
}
const useUsers = () =>
  useQuery<Users[], Error>({
    queryKey: ["users"],
    queryFn: () =>
      axios
        .get<Users[]>("https://jsonplaceholder.typicode.com/users")
        .then((res) => res.data),
  });

export default useUsers;

import useUsers from "./hooks/useUsers";

const Users = () => {
  const { data, error, isLoading } = useUsers();

  if (isLoading) return <div>Loading.....!</div>;
  if (error) return <div>{error.message}</div>;

  return (
    <div>
      {data?.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </div>
  );
};

export default Users;