Реализация React Query в веб-приложении

Введение

В этом уроке рассмотрим, как интегрировать React Query в базовое веб-приложение. React Query — мощная библиотека для управления, кэширования и синхронизации состояния сервера в приложениях React. Мы создадим простое приложение, получающее данные из API с открытым исходным кодом, и используем Bootstrap для применения стилей.

Цели проекта

Создать веб-приложение для получения данных из нижеуказанного API с помощью React Query.

JSONPlaceholder API.

Приложение должно отображать следующий пользовательский интерфейс:

Представление React Query для начинающих

ПРЕДСТАВЬТЕ, ЧТО У ВАС ЕСТЬ ПОМОЩНИК-ВОЛШЕБНИК, КОТОРЫЙ МОЖЕТ ПРИНОСИТЬ ИГРУШКИ ИЗ МАГАЗИНА “ДЕТСКИЙ МИР”, КОГДА ВЫ ПОПРОСИТЕ. ЭТОТ ПОМОЩНИК НЕ ТОЛЬКО ПРИНОСИТ ИГРУШКИ, НО И ЗАПОМИНАЕТ ИХ. ЕСЛИ ВЫ СНОВА ЗАХОТИТЕ ТУ ЖЕ ИГРУШКУ, ОН СМОЖЕТ ДОСТАТЬ ЕЕ ДЛЯ ВАС, НЕ ПОСЕЩАЯ МАГАЗИН.

REACT QUERY — ТАКОЙ ЖЕ ВОЛШЕБНЫЙ ПОМОЩНИК ДЛЯ КОМПЬЮТЕРНЫХ ПРОГРАММ. ОН ПОМОГАЕТ ПОЛУЧАТЬ ИНФОРМАЦИЮ ИЗ ИНТЕРНЕТА И ЗАПОМИНАЕТ ЕЕ, ЧТОБЫ ПРОГРАММЫ МОГЛИ ИСПОЛЬЗОВАТЬ ЕЕ В ЛЮБОЙ МОМЕНТ.

Техническое описание:

REACT QUERY — ЭТО БИБЛИОТЕКА В REACT, КОТОРАЯ УПРОЩАЕТ ПОЛУЧЕНИЕ И УПРАВЛЕНИЕ ДАННЫМИ В ПРИЛОЖЕНИЯХ. ОНА ПРЕДОСТАВЛЯЕТ НАБОР ИНСТРУМЕНТОВ ДЛЯ ОБРАБОТКИ ДАННЫХ, ИХ КЭШИРОВАНИЯ И ОБНОВЛЕНИЯ ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА ПРИ ИЗМЕНЕНИИ ДАННЫХ. ПРИМЕНЕНИЕ ЭТОЙ БИБЛИОТЕКИ ИЗБАВЛЯЕТ ОТ НАПИСАНИЯ ОБЪЕМНОГО СЛОЖНОГО КОДА ДЛЯ ВЗАИМОДЕЙСТВИЯ С СЕРВЕРОМ И УПРАВЛЕНИЯ ДАННЫМИ В ПРИЛОЖЕНИИ. REACT QUERY УПРОЩАЕТ ЭТОТ ПРОЦЕСС, ДЕЛАЯ ЕГО БОЛЕЕ ЭФФЕКТИВНЫМ И ПОНЯТНЫМ.

С ТЕХНИЧЕСКОЙ ТОЧКИ ЗРЕНИЯ, REACT QUERY ИСПОЛЬЗУЕТ КОНЦЕПЦИЮ “ЗАПРОСОВ” (“QUERIES”) ДЛЯ ПОЛУЧЕНИЯ ДАННЫХ. ЗАПРОС — ЭТО ТРЕБОВАНИЕ ПРЕДОСТАВИТЬ ИНФОРМАЦИЮ С СЕРВЕРА, И REACT QUERY СПРАВЛЯЕТСЯ С ЭТИМ ПРОЦЕССОМ БЕЗ ПРОБЛЕМ. БИБЛИОТЕКА REACT QUERY ТАКЖЕ ПОМОГАЕТ В КЭШИРОВАНИИ, ТО ЕСТЬ В ХРАНЕНИИ ДАННЫХ, ЧТОБЫ ПРИ ПОВТОРНОМ ОБРАЩЕНИИ К НИМ НЕ ПРИШЛОСЬ СНОВА ПОЛУЧАТЬ ИХ С СЕРВЕРА.

REACT QUERY — ПОЛЕЗНЫЙ ИНСТРУМЕНТ, ОСОБЕННО ПРИ СОЗДАНИИ REACT-ПРИЛОЖЕНИЯ, КОТОРОЕ ДОЛЖНО ВЗАИМОДЕЙСТВОВАТЬ С СЕРВЕРАМИ ДЛЯ ПОЛУЧЕНИЯ ИЛИ ОТПРАВКИ ДАННЫХ. ЭТО НАДЕЖНЫЙ ПОМОЩНИК, КОТОРЫЙ ДЕЛАЕТ ЗАДАЧИ ПО СОЗДАНИЮ КОДА БОЛЕЕ УПРАВЛЯЕМЫМИ И ОРГАНИЗОВАННЫМИ.

Необходимые условия

Выполните следующие действия.

Установите Node.js.
Создайте и настройте приложение React с помощью приведенных ниже команд:

npx create-react-app react-query-webapp
npm install react-query

Шаги по реализации проекта

Шаг 1. Настройка проекта

cd react-query-webapp
npm install bootstrap
npm start

Шаг 2. Получение данных из API с открытым исходным кодом

В данном примере будем использовать JSONPlaceholder API, предоставляющий фейковый REST API для тестирования и создания прототипов в режиме онлайн.

Обновите содержимое файла “src/App.js”.

// src/App.js

import React from "react";
import { useQuery } from "react-query";
import Header from "./components/Header";
import "bootstrap/dist/css/bootstrap.min.css";

const fetchData = async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  const data = await response.json();
  return data;
};

function App() {
  const { data, isLoading, error } = useQuery("todos", fetchData);

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

  return (
   <div>
    <Header title={"React Query"} />
    <div className="container mt-5">
      <h1>React Query Web App</h1>
      <div className="card">
        <div className="card-body">
          <h5 className="card-title">Data from JSONPlaceholder API</h5>
          <p className="card-text">{JSON.stringify(data)}</p>
        </div>
      </div>
    </div>
   </div>
  );
}

export default App;

Обновите “src/index.js” для добавления компонента провайдера для React Query:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { QueryClient, QueryClientProvider, useQuery } from "react-query";
import App from "./App";
const queryClient = new QueryClient();
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </StrictMode>
);

Добавьте заголовок в “src/components/Header.js”:

import React from "react";
export default function Header(props) {
  return (
    <nav className="navbar navbar-dark bg-dark">
      <div className="container">
        <div className="row m-auto">
          <i className="fa fa-hand-pointer-o fa-2x text-white mr-2" />
          <div className="text-light h2" data-testid="title">
            {props.title}
          </div>
        </div>
      </div>
    </nav>
  );
}

Шаг 3: Запуск приложения

Выполните приведенную ниже команду в терминале:

npm start

Зайдите на http://localhost:3000 в браузере, чтобы посмотреть приложение с интеграцией React Query.

Заключение

Вы успешно реализовали React Query в базовом веб-приложении. Эта мощная библиотека упрощает получение данных и управление состояниями в React-приложениях, делая код более эффективным и удобным.

Источник