Начав изучать React, я вскоре столкнулся с общей проблемой: созданием запросов к API. React предлагает несколько методов обработки запросов API, наиболее популярными из которых являются:

  1. Извлечь
  2. Аксиос
  3. useQuery

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

Сила пользовательских хуков

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

Представляем мои пользовательские крючки

Я разработал набор пользовательских хуков React, которые используют переменные состояния React и Axios для выполнения различных типов запросов API. К этим крючкам относятся:

  1. useGet
  2. usePost
  3. usePut
  4. usePatch
  5. useDelete

Как они работают

Давайте подробнее рассмотрим, как работают эти хуки React, на примере хука useGet:

export const useGet = ({ initialUrl, options = { headers: { "Content-Type": "application/json" } } }) => {
    const [url, setUrl] = useState(initialUrl);
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState(null);
    const [responseData, setResponseData] = useState(null);
    const [isError, setIsError] = useState(false);
    const [status, setStatus] = useState(null);

    const fetchData = async () => {
        setIsLoading(true);
        setIsError(false);

        try {
            const response = await axios.get(url, options); // Use Axios for GET request
            setStatus(response.status);
            setResponseData(response.data);
        } catch (err) {
            setError(err);
            setIsError(true);
        } finally {
            setIsLoading(false);
        }
    };

    useEffect(() => {
        fetchData(); // Call fetchData when the component mounts

        // Clean up any ongoing fetch if the URL changes
        return () => {
            setIsLoading(false);
        };
    }, [url]);

    // Define a function to refetch data with the same URL
    const refetchData = () => {
        fetchData();
    };

    return { isLoading, isError, error, data: responseData, status, refetch: refetchData };
}

Хук useGet принимает две переменные: URL-адрес и дополнительные параметры запроса, куда вы можете включать заголовки, такие как информация аутентификации или другие. Этот хук упрощает выполнение запросов к API. Вот пример того, как его использовать:

import React, { useEffect } from 'react';
import { useGet } from 'jak-query-2';

const Api = ({ url }) => {
  const { isLoading, error, isError, data, status,refetch } = useGet(url);

  return (
    <div>
      <h2>Get API HOOK test</h2>
      {isLoading && <b>Loading...</b>}
      {isError && <b>Error: {JSON.stringify(error)}</b>}
      {!isError && !isLoading && data && <b>Data: {JSON.stringify(data)}</b>}
      {!isLoading && <b>Status: {status}</b>}
      <button onClick={()=>{refetch()}}>Refetch</button>
    </div>
  );
};

export default Api;

Сравнение подходов

Хотя хук useGet упрощает процесс выполнения запросов API, использование Fetch, Axios или useQuery потребует от вас написания значительно большего количества кода. Например, вот как вы можете реализовать ту же функциональность с помощью useQuery:

import React from 'react';
import { useQuery } from 'react-query';

const ApiWithUseQuery = ({ url }) => {
  const { data, isLoading, isError, error } = useQuery('apiData', async () => {
    const response = await fetch(url);

    if (!response.ok) {
      throw new Error(`HTTP Error! Status: ${response.status}`);
    }

    return response.json();
  });

  return (
    <div>
      <h2>Using useQuery</h2>
      {isLoading && <b>Loading...</b>}
      {isError && <b>Error: {error.message}</b>}
      {data && <b>Data: {JSON.stringify(data)}</b>}
    </div>
  );
};

export default ApiWithUseQuery;

Для сравнения, хук useGet абстрагирует тонкости выполнения запросов API, избавляя вас от необходимости вручную писать код обработки запросов. Эта простота и эффективность делают его ценным дополнением к вашему проекту React.

Вы можете легко интегрировать эти хуки в свой проект, установив их через npm или Yarn:

npm install jak-query-2

Вы можете найти исходный код, а также дополнительную информацию и примеры для всех хуков на github.



GitHub — ShahzaibJak/react-query-hooks
Внесите свой вклад в разработку ShahzaibJak/react-query-hooks, создав учетную запись на GitHub.github.com



Буду признателен за любые предложения или улучшения этих хуков. Спасибо!