반응 쿼리 시리즈 1부: 기본 반응 쿼리 설정
11771 단어 reacthookswebdevjavascript
그래서 저는 프론트엔드 개발자로 몇 년 후에 다음과 같이 결정했습니다.
내 첫 번째 기사를 작성합니다. 내가 두려워해야 했던 두려움을 너는 모를거야
정복(또는 당신이 할 수도 있음), 😟 하지만 껍데기에 숨길 이유가 없겠죠?
섹션
소개
React-query은 서버 상태를 가져오고 업데이트하고 동기화하기 위한 초경량 라이브러리입니다. react-query를 사용하면 다음을 작성할 필요가 없습니다.데이터 가져오기 논리(로드, 오류 및 데이터 상태의 모든 설정을 누가 좋아합니까? 🤷♀️), You
redux나 같은 글로벌 스토어 라이브러리도 필요하지 않습니다.
zustand를 사용하여 서버 상태를 전역 또는 영구 상태로 만듭니다. 경우에도
전역 저장소가 응용 프로그램에서 사용되며 다음으로 제한됩니다.
사용자 설정 등과 같은 클라이언트 상태를
톤 단위의 코드 크기.
이 라이브러리에는 훌륭한 문서가 있지만 초보자에게는 어려울 수 있으므로 초보자가 반응 쿼리 사용에 빠르게 설정할 수 있도록 간단한 시리즈가 필요하다는 것을 알았습니다.
이 시리즈로 건너뛸 수도 있습니다.
전제 조건
- Basic knowledge of react and hooks in react
프로젝트 부트스트랩
We bootstrap a basic react app by running npx create-react-app project-name
npx create-react-app react-query-setup
We also install react-query library to our react app by running
npm i react-query . At the time of writing, react-query 버전은 3.19.6입니다.npm i react-query
반응 쿼리 설정
To setup react-query, we need theQueryClientProvider . The QueryClientProvider component is used to connect and provide a QueryClient to your application; more or less, connect our application to features react-query provides.
The
QueryClientProvider component takes in a client prop. This prop is in turn, supplied the
queryClient instance. You can supply the
queryClient instance a custom config object as a param if you'd like to set your own defaults. You can read about some
important defaults that come with react-query here.
import { QueryClient, QueryClientProvider } from 'react-query';
/*create and use a custom config object.Normally, I'd put this in another file and export
*/
const queryClientConfig = {
defaultOptions: {
queries: {
retry: 2,
refetchOnMount: "always",
refetchOnWindowFocus: "always",
refetchOnReconnect: "always",
cacheTime: 1000*30, //30 seconds
refetchInterval: 1000*30, //30 seconds
refetchIntervalInBackground: false,
suspense: false,
staleTime: 1000 * 30,
},
mutations: {
retry: 2,
},
},
const queryClient = new QueryClient(queryClientConfig)
function App() {
return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
}
또한
ReactQueryDevTools 구성 요소를 추가하여 개발 환경에서 쿼리를 디버깅하고 시각화할 수 있습니다.import { QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from 'react-query/devtools';
/*create and use a custom config object.Normally, I'd put this in another file and export
*/
const queryClientConfig = {
defaultOptions: {
queries: {
retry: 2,
refetchOnMount: "always",
refetchOnWindowFocus: "always",
refetchOnReconnect: "always",
cacheTime: 1000*30, //30 seconds
refetchInterval: 1000*30, //30 seconds
refetchIntervalInBackground: false,
suspense: false,
staleTime: 1000 * 30,
},
mutations: {
retry: 2,
},
},
const queryClient = new QueryClient(queryClientConfig)
function App() {
return <QueryClientProvider client={queryClient}>
{/* The rest of your application */}
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
}
이 시리즈에서는
queryClientConfig 객체의 각 키-값이 쿼리 및 변형에 대해 수행하는 작업에 대해 자세히 설명합니다.이 기사가 도움이 되었다면 💖 정말 감사합니다.
고맙습니다!
나를 따라와
크레딧
Image: Logrocket: What is new in react-query 3 by Lawrence Eagles .React-query documentation
섹션
Reference
이 문제에 관하여(반응 쿼리 시리즈 1부: 기본 반응 쿼리 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/nnajiforemma10/react-query-series-part-1-basic-react-query-setup-12g4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
