React query 를 사용 하던 중 겪은 난관.

Intro

react query 와 axios 의 사용법을 알겠으나, 계속 안되는 것을 보고 감이 왔습니다.

 

결론부터 기록하자면, 우선 중요한 사실...

react-query 는 v3 격에 속하고, tanstack 은 일종의 v4, 나온지 얼마 안된 최신본을 의미한다 합니다. 

 

그리고 어째선지 react-query 가 훨신 더 다운로드 횟수가 많죠.

그래서 저는 이 버전을 일종의 stable version 으로 여기기로 했습니다.

 

이 문제를 해결하기에 앞서,

자바스크립트에서 react, 그리고 axios에서 react-query 까지.

쭈욱...한번 처음부터 어디에서 지식 공백이 생긴건가 싶어 디스크 조각모음 하는 마음으로 종일 잡고 해봤습니다.

 

어쩌면, 제가 모르는 곳에서 원인이 있었는지도 모를일이지만. 그럼에도 react eslint 에서는 계속 'cannot resolve react-query' 라며 반항했습니다. 심지어 import 를 그 문서 예시대로 tanstack 이라 해줬음에도 말이죠. 

 

지금도 뭔가 깨끗한 기분은 아니지만, 일단 임시로 결론을 내리자면 다음과 같습니다.

react-query 를 쓰세요.

 

아래는 필자 혼자서 의심암귀에 빠진 채 다양한 테스트를 해보던 중, 참고 하였던 몇가지 코드블럭입니다. 

 

참고로 index 중, ReactDOM 을 써서 안된다고 console 창에서 빽빽거리는 경우가 있습니다. 

이 경우, 이렇게 해주면 됩니다.

import React from "react";
import App from "./App";
import { QueryClient, QueryClientProvider } from "react-query";
import { createRoot } from "react-dom/client";

const queryClient = new QueryClient();

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

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

정말 여유가 없는게 아닌 이상, 에러는 보일 때 마다 하나 씩 제거해주는게 건강에도 좋습니다.

 

[표본 0 - index.js]

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

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

표본 1 - App.js

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

function App() {
  const { isLoading, error, data } = useQuery('movieList', () =>
    fetch('https://yts.mx/api/v2/list_movies.json?with_images=true').then((res) => res.json()),
  );

  if (isLoading) return 'Loading...';

  if (error) return 'An error has occurred: ' + error.message;

  return (
    <div>
      <ul>
        {data.data.movies.map((movie, idx) => (
          <li key={idx}>
            <h5>{movie.title_long}</h5>
            <img src={movie.large_cover_image} alt="" />
            <p>장르 : {movie.genres[0]}</p>
            <p>상영시간 : {movie.runtime}분</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

https://yts.mx/api

API Documentation - YTS YIFY

https://dukdukz.tistory.com/entry/React-Query-%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%86%B5%EC%8B%A0-%EA%B8%B0%EB%B3%B8%ED%8E%B8

React-Query 비동기 통신 (기본편)

---

https://merrily-code.tistory.com/76

[번역] : React Query - 왜, 그리고 어떻게 사용할 수 있을까?