jayspod

Problem 파이널 프로젝트 댓글 CRUD시 바로 웹사이트에 적용되지 않는 문제 Solution react-query invalidateQuery로 캐시 무효화 하여 최신 값 갱신하기 const queryClient = useQueryClient(); const deleteCommentMutation = useMutation( deleteComment, { onSuccess: () => { queryClient?.invalidateQueries(['postDetail', postId]); }, }, ); const createCommentMutation = useMutation( createComment, { onSuccess: () => { queryClient?.invalidateQueries(['..

Install & Setting v5 install 명령어 yarn add @tanstack/react-query@beta devtools 설치 명령어 npm i @tanstack/react-query-devtools tanstack/react-query v5는 현재 베타버전으로 사소한 변경이 있을지도 모름 v4 사용 권장 useMutation v3/v5 기본 사용법 비교 import { useMutation } from 'react-query'; function TodoAdder() { const mutation = useMutation(addTodo, { onSuccess: () => { console.log('Todo added!'); }, onError: (error) => { console.er..

[TanStack Query 공식 문서] Overview | TanStack Query Docs TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze. Motivation tanstack.com React Query의 장점 - 코드의 양이 적고 구조가 단순하여 유지보수에 용이 - 캐싱을 통해 애플리케이션 속도 향상 - 데이터 중복 ..