Home

Awesome

react-hooks-fetch

CI npm size discord

React Supense와 사용하는 최소의 데이터 패치(Fetch) 라이브러리.

소개

이 라이브러리는 리액트 훅인 비동기 함수들을 위한 useFetch를 제공합니다. 해당 함수는 React Suspense를 활용하고, 사전에 createFetch를 통한 스토어 생성이 요구됩니다. 해당 API는 랜더링이 되기 전에 데이터를 강제로 가져오록 설계되있습니다.

프로젝트 현황: 실험단계이며, 피드백이 필요합니다.

설치

npm install react-hooks-fetch

사용방법

import React, { Suspense } from "react";
import { ErrorBoundary } from "react-error-boundary";

import { createFetch, useFetch } from "react-hooks-fetch";

// 1️⃣
// 비동기 함수와 함께 스토어를 생성합니다.
// 비동기 함수는 한개의 입력 인자를 가져올 수 있습니다.
// 그 입력 값은 캐시에 대한 "키" 값이 됩니다.
// 기본적으로, 키들은 일치 연산자(`===`)를 통해 비교되어 집니다.
const store = createFetch(async (userId) => {
  const res = await fetch(`https://reqres.in/api/users/${userId}?delay=3`);
  const data = await res.json();
  return data;
});

// 2️⃣
// 랜더링되기 전에 어디에서든 데이터를 가져와야 합니다.
// 만약 초기 랜더링때, `undefined` 값을 허용한다면,
// 이 과정은 생략가능 합니다.
store.prefetch("1");

// 3️⃣
// 스토어를 사용할 컴포넌트를 정의하세요.
// `refetch` 함수는 그 입력 인자를 사용합니다.
// 그리고 랜더링 되기 전 데이터를 가져옵니다.
const Main = () => {
  const { result, refetch } = useFetch(store, "1");
  const handleClick = () => {
    refetch("2");
  };
  return (
    <div>
      <div>First Name: {result.data.first_name}</div>
      <button type="button" onClick={handleClick}>
        Fetch user 2
      </button>
    </div>
  );
};

// 4️⃣
// 외부 컴포넌트로 ErrorBoundary와 Suspense가 있어야 합니다.
const App = () => (
  <ErrorBoundary fallback={<h1>Error</h1>}>
    <Suspense fallback={<span>Loading...</span>}>
      <Main />
    </Suspense>
  </ErrorBoundary>
);

API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

createFetch

fetch store를 생성합니다.

Parameters

예제

import { createFetch } from 'react-hooks-fetch';

const fetchFunc = async (userId) => {
  const res = await fetch(`https://reqres.in/api/users/${userId}?delay=3`));
  const data = await res.json();
  return data;
};
const store = createFetch(fetchFunc);
store.prefetch('1');

useFetch

useFetch hook

Parameters

Examples

import { useFetch } from "react-hooks-fetch";

const { result, refetch } = useFetch(store, initialInput);

예제들

예제 폴더는 실행되는 예제들이 포함되어 있습니다. 에제들은 다음 아래와 같은 명령어와 실행 가능하고,

PORT=8080 npm run examples:01_minimal

그리고 웹 브라우저에서 http://localhost:8080로 열 수 있습니다.

또한 codesandbox.io에서 예제들을 확인 할 수 있습니다: 01 02 03

Blogs

이전 구현에 대한 히스토리에서 볼수 있습니다.