리액트 쿼리 101

저는 주로 GraphQL로 작업하기 전에 항상 멀리서 react-query를 보았고 Apollo는 쿼리 요구 사항에 대한 훌륭한 솔루션이었습니다.

몇 년 후 지금은 다른 직장에 있으며 더 이상 GraphQL을 사용하지 않습니다. react-query에 대해 많이 들었기 때문에 시도해 보고 실제로 얼마나 좋은지 보기로 결정했습니다.

그리고...

드럼 롤 삽입

그것은 실제로 꽤 훌륭합니다. Apollo에서 내가 즐겼던 모든 장점을 가지고 있으며 GraphQL에 국한되지 않습니다.

다음은 반응 쿼리의 많은 이점/기능 중 일부를 보여주는 빠른 가이드입니다.

먼저 반응 프로젝트를 만들어 보겠습니다. create-react-app은 이 간단한 데모 앱에 적합합니다.

npx create-react-app react-query --template typescript

# or

yarn create react-app react-query --template typescript

예, 이 한 페이지 응용 프로그램에 TypeScript를 추가하고 있습니다. 더 이상 노란색 아이콘을 처리할 수 없습니다.

이제 방금 생성한 react-query 폴더를 탐색합니다.

터미널에 있다면 그냥

cd react-query

이제 설치를 해보자react-query

 npm i react-query
 # or
 yarn add react-query

axios 대신 사용하기 위해 fetch도 설치합시다.

 npm i axios
 # or
 yarn add axios

이제 다음 코드를 지나 내부src/App.tsx

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Random Food Generator</h1>
      <button>Generate</button>
      <img src="insert food url here" 
        alt="food"/>
    </div>
  );
}

export default App;

따라서 이 앱의 약속은 매우 간단합니다. 버튼을 눌러 무작위로 생성된 요리를 얻습니다. 이를 위해 우리는 food api , react-query 및 axios를 사용할 것입니다.

먼저 <QueryProvider /> 를 연결하기 위해 queryClient 안에 앱을 래핑해야 합니다.

내부src/index.tsx에서 앱을 가져오고QueryClient 새 클라이언트를 생성해 보겠습니다.

// ...other code

import { QueryClient, QueryClientProvider } from "react-query";

// ...other imports

const queryClient = new QueryClient();

그리고 우리가 방금 만든 새 클라이언트와 함께 QueryClientPovider를 사용합시다.

아직 내부src/index.tsx

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

그리고 이것이 쿼리를 시작하는 데 필요한 전부입니다!

useQuery의 마법

후크는 여기에 있으며 내가 가장 좋아하는 대부분의 라이브러리에서 후크를 사용하고 있습니다react-query도 예외는 아닙니다. useQuery 후크는 매우 훌륭합니다. 고유 키와 약속을 반환하는 함수를 제공합니다. 그 대가로 우리는 데이터와 기타 유용한 소품을 얻습니다.

실제로 src/App.tsx 내부에 다음 코드를 추가해 보겠습니다.

먼저 useQuery 및 axios 를 가져옵니다.

import { useQuery } from "react-query";
import axios from "axios";

이제 App 구성 요소 내부에서 useQuery

  const { data } = useQuery("food", () =>
    axios.get("https://foodish-api.herokuapp.com/api/")
  );

이제 JSX에서

 return (
    <div className="App">
      <h1>Random Food Generator</h1>
      <button>Generate</button>
      <img src={data?.image} alt="food" />
    </div>
  );

지금까지는 모든 것이 잘 작동하는 것처럼 보이지만 주의를 기울이면 이상한 동작을 발견할 수 있습니다. 예를 들어 브라우저에서 다른 탭으로 이동한 경우 다시 돌아올 때 쿼리를 다시 가져옵니다. 이것은 처음으로 react-query를 시도할 때 나를 당황하게 했던 것 중 하나입니다. 무슨 일이 일어나고 있는지 전혀 모르고 다른 것으로 전환했던 것을 기억합니다.

글쎄, 분명히 문서를 읽는 것이 중요합니다. react-query에는 공격적일 수 있는 일부defaults가 있지만 필요하거나 익숙한 것으로 쉽게 변경할 수 있습니다.

이것이 제 기본값입니다.

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 3600,
      refetchOnWindowFocus: false,
    },
  },
});

이제 우리는 창 포커스를 다시 가져오지 않고 실제로는 오래된 시간을 갖게 되었습니다.

게다가 data 쿼리 상태를 알려줌으로써 더 나은 UI를 구축하는 데 도움이 되는 다른 소품에 액세스할 수 있습니다.

한 번 보자.

const { data, isFetching, isError, refetch } = useQuery("food", () =>
    axios.get("https://foodish-api.herokuapp.com/api/")
  );

더 있지만 지금은 이것들을 사용할 것입니다. 이 props는 꽤 자명하다고 생각합니다. 쿼리에 무슨 일이 일어나고 있는지 사용자에게 알려주는 데 사용하겠습니다.

function App() {
  const { data, isFetching, isError, refetch } = useQuery("food", () =>
    axios.get("https://foodish-api.herokuapp.com/api/")
  );

  if (isError) {
    return <p>Oops an error happened</p>;
  }

  return (
    <div className="App">
      <h1>Random Food Generator</h1>
      <button type="button" onClick={() => refetch()}>
        Generate
      </button>
      {isFetching ? (
        <p>Loading...</p>
      ) : (
        <img src={data?.data?.image} alt="food" />
      )}
    </div>
  );
}

따라서 먼저 오류가 있는지 확인한 다음 버튼을 다시 가져오기 기능에 연결하고 마지막으로 이미지를 가져올 때 로드 상태를 표시합니다.

이 모든 것을 fetch로 할 수 있습니까?
예, 물론 더 많은 코드가 필요합니다. AuseEffect 초기 데이터를 가져오고, 로드 및 오류에 대한 상태를 생성하고, 다시 가져오기를 수행하기 위해 모든 것을 함수에 넣습니다.

이것은 react-query가 할 수 있는 일의 표면을 긁는 것일 뿐이며, redux와 같은 상태 관리 도구를 대체할 수 있는 캐시를 살펴보지도 않았습니다.

어쨌든, 당신이 할 수 있는 일이 훨씬 더 많기 때문에 이것이 react-query 확인에 관심을 갖게 되었기를 바랍니다.

오버 앤 아웃.

코드: https://github.com/ivanms1/react-query-101

추신: 그리워요 GraphQL :(