README
Simple React Query โญ๏ธ
A Light Weight Data Fetching Library
- ๐ฆ Unpacked Size: only
17.7KB
(react-query is2.18MB
)
Features
- โ Simple useQuery
- โ Simple useMutation
- โ Simple refetchInterval & clearRefetchInterval
- โ Setting initialData
- โ Caching is not a default (It's optional)
Backgrounds
1. react-query is heavy
- ๋ฆฌ์กํธ ์ฟผ๋ฆฌ๋ ๋ฌด๊ฒ์ต๋๋ค
2. Too many methods, but I need only some
- ๋ฆฌ์กํธ ์ฟผ๋ฆฌ๋ ๋๋ฌด ๋ง์ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
- ๋๋ ๋จ์ง ๋น๋๊ธฐ ์ํ๊ด๋ฆฌ๋ฅผ ํ๊ณ ์ถ์ ๋ฟ์ธ๋ฐ, ๋น๋๊ธฐ์ ๋ํ ๋ชจ๋ ๋๊ตฌ์ ์ค๋ช ์ ์ ๊ณตํด์ค๋๋ค.
- ๋๋ถ๋ถ์ ๊ธฐ๋ฅ์ ํ์์๊ฑฐ๋, ์ค์ค๋ก ์ถฉ๋ถํ ๊ตฌํ๊ฐ๋ฅํฉ๋๋ค.
3. When bugs occurred, debugging is hell
- ๋ฆฌ์กํธ ์ฟผ๋ฆฌ์ ๋ด๋ถ ๋์์ ์ ์ ์์ต๋๋ค.
- ์ดํ๋ฆฌ์ผ์ด์ ์ด ๋ณต์กํ ์๋ก, ๋ฒ๊ทธ๊ฐ ๋ฐ์ํ์๋ ๋๋ฒ๊น ํ๊ธฐ ๋ณต์กํฉ๋๋ค.
4. Interface of useMutation is different from that of useQuery
- useMutation์ .mutateAsync ํธ์ถ์ ์๋ฌ๋ฅผ throwํ์๋ try/catch๋ก ์ก์์ค์ผํ๋ ๋ฐ๋ฉด, useQuery๋ ์๋ฌ๋ฅผ throwํ์๋ error ๊ฐ์ฒด์ ์๋์ผ๋ก ๋ฐ์๋์ด์ ์ฌ์ฉ์ ์ผ๊ด์ฑ์ด ์์ต๋๋ค.
5. useQuery data type must include "undefined"
- react-query์ useQuery dataํ์ ์ ํญ์ undefined ํ์ ์ union์ผ๋ก ์ถ๊ฐํฉ๋๋ค.
- ์๋ฅผ๋ค์ด, useQuery์ ํ์
์ string์ผ๋ก ๋๋ฉด
string | undefined
์ dataํ์ ์ ๊ฐ์ง๊ณ initialData๋ฅผnull
๋ก ์ค์ ํ๋ฉด data ํ์ ์ดstring | null | undefined
๊ฐ ๋ฉ๋๋ค.
6. Difficult to cancel refreshInterval setting
- react-query์ refreshInterval์ ์ฃผ๊ธฐ์ ์ธ ์์ฒญ์ ๋ณด๋ผ ์ ์์ง๋ง, ํด๋น ์ฃผ๊ธฐ์ธ ์์ฒญ์ ์ทจ์ํ๋ ค๋ฉด axios์ cancel ๊ธฐ๋ฅ์ ์ฌ์ฉํด์ผ ํ๋ ๋ฑ์ ๋ณต์กํ ๊ตฌํ์ด ํ์ํฉ๋๋ค.
7. react-query caching is a default
- ์บ์ฑ์ ๊ธฐ๋ณธ์ ์ผ๋ก ํด์, ๊ฐ๋์ฉ ์์์น ๋ชปํ ๋์์ ์ํํฉ๋๋ค.
Usage
Install
yarn add simple-react-query
QueryClient
QueryClient has queryCache.
import { QueryClient, QueryClientProvider } from "simple-react-query";
<QueryClientProvider value={QueryClient}>
<App />
</QueryClientProvider>;
useQuery
const {
refetch,
isLoading,
isError,
data,
error,
setData,
isSuccess,
clearRefetchInterval,
isFetched
} = useQuery<TypeOfResponseData>({
enabled: true,
query: () => fetch(...),
initialData: {},
onSuccess: () => console.log("fetch success!"),
refetchInterval: 5000,
isEqualToPrevDataFunc: (a,b) => a.id === b.id,
cacheTime: 5000,
queryKeys: ["User", "id"]
});
Props
enabled
: auto fetch, when useQuery calledquery
: fetch functiononSuccess (optional)
: action after query fetched successfullyinitialData (optional)
: set initial datarefetchInterval (optional)
: refetch interval (ms)(background ok)isEqualToPrevDataFunc (optional)
: when newData fetched, isEqualToPrevDataFunc called with (newData, prevData), if false update newData, true don't update newData because it is same.cacheTime (optional)
: caching time useQuery's return data. (ms) default is 0.queryKeys (optional)
: caching is decided by queryKeys. It must be array.
Returns
refetch
: refetch queryisLoading
: fetch is not completeisError
: fetch has errordata
: fetch's return data (or cached data)error
: error objectsetData
: update data stateisSuccess
: fetch is complete successfullyclearRefetchInterval
: clear interval refetchisFetched
: query is fetched more then 1 time
useMutation
const { isLoading, isError, error, data, mutation } = useMutation<
TypeRequestData,
TypeResponseData
>({
query: (_data: TypeRequestData) => fetch(_data),
onSuccess: () => {
console.log("mutation successfully");
}
});
Props
query
: mutation fetch functiononSuccess (optional)
: action after query fetched successfully
Returns
isLoading
: fetch is not completeisError
: fetch has errordata
: fetch's return dataerror
: error objectmutation
: wrapped async fetch function, use this function instead fetch
Has Better Idea?
- When you want another method, contact definedable@gmail.com or custom yourself this code. It is very simple!