Делайте запросы с помощью React Query

Вы можете делать запросы с помощью хука useQuery, который принимает идентификатор вашего запроса (в данном случае, поскольку мы извлекаем пользовательские данные, мы будем называть его «пользователь»), а также функцию, которая используется для получения этих данных.

import { useQuery } from "react-query";

export default function App() {
  const { isLoading, isError, data } = useQuery("user", () =>
    fetch("https://randomuser.me/api").then((res) => res.json())
  );

  if (isLoading) return "Loading...";
  if (isError) return "Error!";

  const user = data.results[0];
  return user.email;
}

Как видите, React Query заботится об управлении этими различными состояниями, которые могут иметь место, когда мы извлекаем наши данные. Нам больше не нужно самим управлять этими состояниями, мы можем просто деструктурировать их из того, что возвращается из useQuery.

Где вступает в игру часть управления состоянием useQuery?

Теперь, когда мы извлекли пользовательские данные и сохранили их в нашем внутреннем кеше, все, что нам нужно сделать, чтобы иметь возможность использовать их в любом другом компоненте, — это вызвать useQuery() с ключом «пользователь», который мы с ним связали:

import { useQuery } from "react-query";

export default function OtherComponent() {
  const { data } = useQuery('user');
    
  console.log(data);
}