React Query 에서는 '더 보기' 기능이나 '무한 스크롤' 기능도 useInfiniteQuery 를 사용해 구현이 가능하다. 예제를 통해서 어떤 방식으로 처리하고, 어떤 특징이 있는지 알아보려 한다. 1. '더 보기' 코드function Component() { const fetchData = async ({ pageParam = "*" }) => { const res = await axios.get("http://api.openalex.org/works", { params: { filter: "publication_year:2020", per_page: 10, cursor: pagePar..
React Query 에서는 페이지 정보를 포함시키는 것으로 페이지네이션을 쉽게 구현할 수 있다. 예제를 통해서 어떤 방식으로 처리하고, 어떤 특징이 있는지 알아보려 한다. 1. 코드function Component() { const [page, setPage] = useState(1); const fetchData = async (page) => { const res = await axios.get("https://rickandmortyapi.com/api/character?page=" + page); return res.data; }; const { isPending, isError, error, ..
React Query 에서 종속 쿼리는 이전 쿼리가 완료되어야 실행할 수 있는 쿼리를 말하는데, useQuery 와 useQueries 두 가지 훅에서 어떤 방식으로 사용되는 정리 해보려 한다. 1. useQuery 를 이용한 종속 쿼리useQuery 에서는 이전 포스팅의 enabled 옵션을 사용하여 쿼리의 실행 준비 상태를 알려주면 쉽게 구현이 가능하다.// 사용자 ID 정보 가져오기const { data: userId } = useQuery({ queryKey: ["userId", email], queryFn: () => getUserByEmail(email), select: (user) => user.id});// 사용자 도서관정보 가져오기const { data: librarie..
React Query 에서 병렬 쿼리는 동시에 실행되는 쿼리로 데이터 가져오기의 동시성을 최대화할 수 있는데, 두 가지 방식의 병렬 쿼리를 정리해보려 한다. 1. 수동 병렬 쿼리수동 병렬 쿼리는 고정된 개수의 쿼리를 병렬로 처리할 때 사용된다. 여러개의 useQuery 훅을 나란히 사용하면 각 쿼리가 병렬로 데이터를 가져온다.function Component() { const usersQuery = useQuery({ queryKey: ["users"], queryFn: () => fetchUsers() }); const teamsQuery = useQuery({ queryKey: ["teams"], queryFn: () => fetchTeams() }); const projectsQu..
지난 포스팅에 이어서 React Query 의 useQuery 옵션 중에서 상황에 따라 쓰이는 옵션들을 정리해보려 한다. 1. refetchOnMountrefetchOnMount 옵션은 캐시 데이터가 stale 상태일 경우, 마운트 시 refetch 를 실행하는 옵션이다.useQuery({ queryKey: ["libraries"], queryFn: () => fetchData(), refetchOnMount: true})- true : 기본값- always : 캐시 데이터 상태에 관계없이, 마운트 시마다 항상 refetch 를 실행- false : 최초 fetch 이후 refetch 를 실행하지 않음 2. refetchOnWindowFocusrefetchOnWindowFocus 옵션은..
React Query 의 useQuery 옵션은 아주 다양한데 개발을 하면서 자주 쓰이는 옵션들을 우선적으로 정리해보려 한다. 1. selectselect 옵션은 가져온 데이터를 변형하거나 선택해 최종 데이터로 반환해주는 옵션이다.* 반환되는 최종 데이터 값에는 영향을 주지만 쿼리 캐시에 저장되는 내용에는 영향을 주지 않음- 타입 : (data: TData) => unknownimport { useQuery } from "@tanstack/react-query";function Component() { const { data } = useQuery({ queryKey: ["libraries"], queryFn: () => fetchData() select: ..
1. queryFnuseQuery() 에서 쿼리 함수(queryFn)는 데이터를 가져오는 비동기 함수로 Promise 를 반환하는 어떤 함수라도 사용 가능하다.단, 반드시 데이터 또는 오류를 반환해야 한다.useQuery({ queryKey: ['libraries'], queryFn: () => fetchData() })useQuery({ queryKey: ['libraries', id], queryFn: () => fetchDataById(id) })useQuery({ queryKey: ['libraries', id], queryFn: async () => { const data = await fetchDataById(id) return data },}) 2. 오류 처리axios 나 graphql..
1. queryKeyuseQuery() 에서 쿼리 키(queryKey)는 쿼리의 고유 키로 내부적으로 쿼리의 재조회, 캐싱, 애플리케이션 전체의 쿼리 공유에 사용되는 필수값이다.최상위 레벨에서 반드시 배열이어야 하며, 직렬화가 가능하고 쿼리의 데이터에 대해 고유하다면 어떤 형태든 사용이 가능하다. 2. 형태1. 간단한 쿼리 키 : 상수 값으로 구성된 배열- 일반적인 목록/인덱스 리소스- 계층 구조가 없는 리소스useQuery({ queryKey: ["libralies"], ... });useQuery({ queryKey: ["something", "special"], ...}); 2. 변수가 포함된 배열 쿼리 키 : 쿼리가 데이터를 고유하게 설명하기 위해 더 많은 정보가 필요한 경우, 문자열과 직렬화 ..
