#onsuccess

invalidateQueries가 실행되지 않습니다.

mutate 함수 내부에서 onSuccess:()=>{ queryClient.invalidateQueries({ queryKey: ["USERINFO"] }) navigate("/") } 를 실행하는데 mutate함수는 잘 실행되고 이후에 경로 이동도 잘되는데 useQuery훅 네트워크 요청 자체가 가질 않습니다. refetchType, refetchOnMount, enabled, refetchQueries, prefetchQueries등등 다 시도해 봤는데 안됩니다..! 거의 100번 정도 테스트해봤을때 2번정도? 우연치않게 됐던거같은데 이때 빼고는 전부 안됐습니다ㅜㅜ 어떻게 해야할까요??

Next.js SSR CSR에서의 캐시 문제

메인 페이지의 컴포넌트는 무한 스크롤을 이유로 SSR안에 CSR이 작동하는 구조입니다. 거기서 제품 상세 페이지를 들어가면 현재 페이지는 RSC + 클라이언트 컴포넌트를 통해 이루어진 SSR 페이지입니다. 구매 또한 RSC / 클라이언트 컴포넌트를 구분 지어놓은 상태입니다. 구매를 하면 메인으로 와지구요. 이 경우 다시 제품 상세 페이지로 들어갔을 때 fetching을 다시 안하는 이슈가 있어(next-server 캐싱 문제) 동적 페이지로 작동해야하기 때문에 force-dynamic과 no-cache header를 달아줬습니다. 그 이후에 제대로 작동하는듯 하였는데 상세 페이지에서 클라이언트 컴포넌트에서 console.log를 찍었을 때 구매 한 이후에도 수량이 변하지 않는 것을 확인하였습니다. 이러한 문제를 해결하기 위해서 구매 페이지에서 onSuccess 됐을 때 router.refresh()를 해줬을 시에는 상세 페이지에서의 클라이언트 컴포넌트 console이 제대로 찍히는걸 확인하였습니다. 이에 대해 궁금점은 메인 페이지로 가는 router 이후 refresh를 하였고 메인에서 변경된 상황만 refresh 되는걸로 알고 있었는데 별개의 페이지인 상세 페이지에서 console이 제대로 찍히는 이유가 뭔지 모르겠습니다. 이러한 전처리를 하지 않으면 새로고침을 하지 않으면 이전의 data가 그대로 console에 찍힙니다. 또한 force-dynamic을 해줬는데도 불구하고 console.log를 SSR 페이지에서 찍었을 때 최초의 접근 할 때는 가져오지만 그 이후에 다시 들어올 때는 메인에서 refresh를 하고 나서도 console이 안찍히는데 왜 이런지 궁금합니다. next-server에서 매번 data를 fetching하지만 ui의 변경이 없다고 판단되면 클라이언트로 데이터를 보내지 않아 찍히지 않는걸까요.

리액트쿼리 데이터 리패칭 이렇게 하는거 아닌가요?

home.jsx const { data, error, isLoading } = useFilteredApartmentData(); <List data={data.result} /> 훅.jsx const useFilteredApartmentData = () => { const queryClient = useQueryClient(); const [filters, setFilters] = useState({ skip: 0, take: 15 }); const { data, error, isLoading } = useQuery({ queryKey: ["aaa", filters], queryFn: () => fetchFilteredApartmentData(filters), placeholderData: keepPreviousData, enabled: !!filters, }); const mutation = useMutation({ mutationFn: (filter) => { fetchFilteredApartmentData(filter); }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["aaa", filters] }); }, }); const updateFilters = (newFilters) => { console.log(newFilters); setFilters(newFilters); mutation.mutate(newFilters); }; return { data, error, isLoading, updateFilters, }; }; export default useFilteredApartmentData; 여기서 처음에 데이터 패칭은 잘 이루어 지는데 fillter가 바뀌면 훅의 updateFilters 가 동작하여 새로운 데이터를 list에 다시 뿌리려고하는데 화면에 변화가 없습니다 ㅜㅜ 이렇게 하는거 아닌가요??

타입스크립트 타입지정

리액트 쿼리로 OptimisticUpdate 를 구현했는데 onError 에서 context 타입 지정을 어떻게 해야할지 모르겠습니다 ㅠㅠ context : 타입 하면 오류나고, data : 타입 = context 해도 오류나고 as 를 쓰면 해결되긴 하는데 더 좋은 방법 없을까요? ㅠㅠㅠ 'use client'; import { useState } from 'react'; import { toast } from 'react-toastify'; import { usePostLikeCount } from '@/hooks'; interface LikeContextType { previousLikeCount: number; previousIsLike: boolean; } export const useOptimisticLike = ( boardId: number, initialLikeCount: number, initialIsLike: boolean, refetch: () => void ) => { const [optimisticLikeCount, setOptimisticLikeCount] = useState(initialLikeCount); const [optimisticIsLike, setOptimisticIsLike] = useState(initialIsLike); const { mutate: postMutate } = usePostLikeCount(boardId, { onMutate: async (): Promise<LikeContextType> => { setOptimisticLikeCount((prev) => optimisticIsLike ? prev - 1 : prev + 1 ); setOptimisticIsLike((prev) => !prev); return { previousLikeCount: optimisticLikeCount, previousIsLike: optimisticIsLike, }; }, onError: (err, variables, context) => { const data: LikeContextType = context; if (data) { setOptimisticLikeCount(data.previousLikeCount); setOptimisticIsLike(data.previousIsLike); } toast.error('좋아요 업데이트에 실패했습니다.'); }, onSuccess: () => { refetch(); }, }); const uploadLike = () => { postMutate(); }; return { optimisticLikeCount, optimisticIsLike, uploadLike, }; };

react-query 와 zustand

현재 react-query와 zustand를 같이 쓰면서 고민이 있습니다. 현재코드는 useQuery를 통해 데이터를 가져오고 그 데이터를 가공해서 zustand에 넣어놓고 데이터를 수정하거나 추가등의 변화가있을 때 useMutaion onSuccess -> queryClient.invalidateQueries를 통해 자동으로 갱신하게 로직을 작성했어요. 이렇게 작성하면 데이터를 수정하거나 추가등의 변화가있을 때 마다 최신데이터가 갱신되기는 하지만 서버에 재요청을 해야하는 단점이 있어서 useMutaion onSuccess -> queryClient.invalidateQueries를 통해 자동으로 갱신하는 부분을 zustand에 추가로 데이터를 넣어주고 새로고침할때만 useQuery로 데이터를 받아오는 방식으로 변경할려고 해요. 근데 이렇게되면 새로고침하지 않으면 다른사람이 갱신한 데이터는 가지고 있지 못하게 되요. 서버 요청횟수를 줄이는 것보다 최신데이터를 가지고 있는게 더 중요한가요? 제 지인은 유저는 사이트안에서 계속왔다갔다 거릴거라 대부분은 최신데이터를 즉각적으로 갱신시켜줄 필요가 없다고 하고 저도 이 말이 맞는거같은데 다른사람들은 어떻게 생각할지 궁금해서 질문드립니다..

react query 좋은 코드?? 구현하는 법

react query로 채팅목록을 구현중입니다. 질문하고 답변이 오면 답변을 가공해서 recoil에 저장을하고 화면에 렌더링합니다. 이때 가공해야할것이 많고 오는 답변에 따라서 처리도 다 제각각이라 react query를 사용하는 부분이 코드가 매우 지저분합니다. 예를 들면 아래와 같이 되어있습니다. useSend = () => { // 각종 react query hook 선언 // recoil 상태값 선언 // recoil hook (각종 데이터 변형 처리) return useMutation( api 함수 호출, {onMutate: () => { api 호출하기전에 처리 }, onSuccess: () => { api 성공시 처리 응답으로 온 data를 렌더링 처리를 위해 각 구성을 달리해서 recoil에 저장하기도하고 (데이터 저장하는 hook도 따로 있음) 응답으로 온 data값에따라 또 다른 react query hook을 호출하기도 합니다. }) 이렇게 react query를 날리는 hook은 따로 만들었으나 이 안에서 하는일이 너무 많습니다. react query를 사용하는 코드들을 몇개 검토해보았는데.. 죄다 setquerydata로 저장을하고 그럼 useQuery에서는 다시 api를 호출하지않아도 리스트가 재렌더링되는 등의... 한마디로 backend에서 온 데이터를 그대로 쓰는?? 이런 예제들만있어서 참고가 잘 안되네요. 이럴경우 어떻게 구현하는 것이 좋을까요?? 약간의 팁도 감사합니다.

React Query의 queryClient.invalidateQueries를 활용한 데이터 삭제 로직이 어떨 때는 되고 어떨 때는 되지 않는 문제가 있습니다.

일반적인 게시판에서 react-query를 사용하고 있는데, 특정 게시물에서 삭제를 할때 useMutation을 사용하여, 백엔드 서버에 게시글 삭제 API를 보내고, 성공했을때(onSuccess) queryClient.invalidateQueries(queryKey) 를 통해 게시글 list 쿼리를 초기화 시켜서 게시글 목록 페이지에서 삭제된 최신 리스트를 리패치 시키는데요. 정상적으로 잘동작하다가, 어떤 게시글을 삭제 했을때는 서버로 삭제 api 요청하는 것까지 정상적으로 확인했는데 왜 게시글 목록에서는 삭제가 안되어있을까요? 어떤게 문제일까요 ㅠㅠ 어떨때는 되고 어떨 때는 안되고 원인을 못찾겠네요 ㅠㅠ

리액트 onSuccess에서 await한 로직의 테스트가 계속 fail하는 문제가 있습니다.

리액트 테스팅 라이브러리에서 useMutation의 isLoading과 onSuccess에 따른 컴포넌트 렌더링을 테스트하려고 합니다. isLoading에 의한 컴포넌트까지는 테스트가 잘 되는데, onSuccess일 때 await이 동작하지 않아서 문제가 발생하고 있어요. onSuccess에 console.log를 찍어보면 테스트가 종료되어서 찍히지 않습니다ㅠㅠ 테스트 코드는 onSuccess일 경우의 컴포넌트가 렌더링될 때까지 await을 사용해서 기다리도록 작성되어 있는데, 어떤 문제가 있는 걸까요?

리액트쿼리 질문입니다

리액트쿼리를 많이사용해본 분들께 질문드리고싶어요. 주변에 토이 프로젝트 하는분들 보면 뮤테이션을 사용할때, 보통 onSuccess로 invalidateQuries하거나 refetch로 다시 가져오더라고요. 그런데 응답값으로 새로운 값을 주고있다면, 그걸 setQueryData로 캐시 업데이트하면 되는것 아닌가요? 특정 뮤테이션 결과에 따라 연관있는 여러api를 다시 불러와서 업데이트해야한다면 그만큼 api들을 전부 다시호출하는데요. 캐시업데이트보단 그냥 다 무효화 하는분들이 많던데 그냥 그게 편해서 그런건가요? 예를들어 게시물 하나를 수정하면, 게시글목록 다시불러오고, 개별 게시글 다시불러오고 하는데요. 백엔드에서 생성된게시글을 리턴값으로 준다면, 그걸로 개별 게시글은 캐시업데이트해주는게 낫지않나요?

react-query mutation onSuccess에서 여러 개의 invalidateQueries를 기다리는 방법

안녕하세요~ React Query invalidateQueries를 효과적으로 사용하는 방법이 궁금합니다. 현재 onSuccess에서 갱신 시켜줄 쿼리 키를 가지고 invalidateQueries를 호출하고 있는데요. (예시 1 참고) 문제는 여러 쿼리 키를 갱신 시켜야되고 해당 작업이 끝날때까지 기다려야하는 경우 어떻게 해야하는지 잘 모르겠습니다. 우선 이런식 (예시 2 참고)으로 할 수 있다는 것은 알고 있는데, return을 사용하지 않으면 invalidateQueries를 기다리지 않고 mutation이 완료되어서 어떻게 하면 invalidateQueries를 기다릴수 있는지 궁금합니다.

React Query 데이터 재조회 방식

안녕하세요. 이번 프로젝트에서 React Query를 처음 써보게 되었는데요. 데이터를 조회해올 때, 페이지와 검색어가 바뀔 때마다 API Call을 하는 것이 목적입니다. 제가 아는 방식은 아래와 같이 2가지인데, 두 방식이 어떤 차이가 있고, 어떤 선택이 좋은 선택인지 분간이 잘 되지 않아서 질문드립니다. (폰으로 작성중이라 코드가 좀 가물가물해서 문법이 약간 틀렸을 수도 있습니다!) ---------------------------------------- 1. useQuery만 사용 useQuery(['someList', page, keyword], () => { const params = { page, keyword, }; fetchList(params); }, { onSuccess: () => { // do something } }); 2. useQuery, useMutation, useEffect 사용 useQuery('someList', () => { const params = { page, keyword, }; fetchList(params); }, { onSuccess: () => { // do something } }); const { mutate } = useMutation(fetchList, { onSuccess: () => { queryClient.invalidateQueries('someList'); } }); useEffect(() => { const params = { page, keyword, }; mutate(params); }, [page, keyword]); ---------------------------------------- 사실 제가 아는 useMutation의 용도(생성, 수정, 삭제)와 코드 사이즈 측면을 생각해서 실제론 1번 방식을 사용하고 있기는 한데, 동작상 두 방식의 정확한 차이를 모르겠어서 이렇게 질문드립니다. 혹시 두 방식 모두 일반적이지 않다면, 일반적인 방식도 함께 알려주시면 정말 감사드리겠습니다!