#invalidatequeries

invalidateQueries가 실행되지 않습니다.

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

invalidateQueries가 안먹힙니다.

사진 순서대로 1. 유저 정보 수정 Mutation훅 2. 유저 정보 수정 Mutation훅을 호출하는 컴포넌트 3. 유저 정보를 새로받아오는 Query 훅 입니다. invalidateQueries, refetchQueries, 옵션추가 등등 다해봤는데 쿼리를 무효화하는 요청이 아예안갑니다..ㅜ 쿼리키도 똑같은데 뭐가 문제일까요? 두번째 사진은 흐리게보여서 코드로 올립니다.

tanStack Query stailTime 설정에 대한 조언을 구합니다.

안녕하세요, 저는 이커머스 플랫폼에서 일하는 1년차 프론트엔드 주니어 개발자입니다. 현재 tanStack Query를 사용하여 데이터를 관리하고 있으며, staleTime 설정에 대해 고민이 많아 도움을 구하고자 글을 올립니다. 저희 플랫폼에서는 어드민 페이지에서 데이터를 생성합니다. 그러면 생성된 데이터는 바로 웹페이지에 보여야 합니다. 현재는 staleTime을 따로 설정하지 않아 바로바로 보이는 상황이나 네트워크 통신 최적화를 위해 staleTime을 설정하려고 합니다. 운영 시간은 두 가지로 나뉩니다: 09:00 ~ 23:00에는 상품 요청에 대한 응답이 빠르면 30초, 늦으면 5분 내로 처리되고, 나머지 시간에는 요청에 응답하지 않고 상품이 생성되지 않습니다. 이런 상황에서 staleTime을 어떻게 설정해야 효율적일까요? 1. 낮 시간(09:00 ~ 23:00)에는 데이터가 생성되는 주기가 짧으니, staleTime을 짧게 설정해야 할 것 같습니다. 2. 밤 시간(23:01 ~ 08:59)에는 데이터가 생성되지 않으니 staleTime을 길게 설정해도 무방해 보입니다. 하지만 이렇게 설정하면 낮 시간에 상품을 빠르게 생성하더라도 staleTime 내에 캐시가 갱신되지 않아 사용자에게 보이지 않는 문제가 발생할 수 있습니다. 이 문제를 해결하기 위해 invalidateQueries를 사용하거나 다른 방법이 있다면 조언 부탁드립니다. 이런 문제를 경험하신 분들은 어떻게 해결하셨는지 사례를 공유해주시면 감사하겠습니다. 답변 기다리겠습니다. 감사합니다! 🙏

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

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에 다시 뿌리려고하는데 화면에 변화가 없습니다 ㅜㅜ 이렇게 하는거 아닌가요??

react query에서 invalidateQueries가 쿼리를 무효화 한다는데 여기서 말하는 무효화를 이해를 못하겠네요

쿼리를 refetch해준다는 것인가요? 정말 무슨말인지 정확히 의미전달이 안됩니다 쉽게 설명해주실 수 있나요?

react-query 와 zustand

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

nextjs에서 react query queryClient 처리

이전에 React를 사용할때는 queryClient를 한번 선언한 후 export하고 invalidateQueries를 실행하는 곳에서 import하여 사용했습니다. 물론 QueryClientProvider에 주입도 선언한 queryClient 그대로 사용했구요. nextjs에서 queryClient를 react처럼 export해서 사용하지 않고 컴포넌트 내부에서 사용하는 이유가 있을까요? 궁금합니다. 또한 invalidateQueries를 사용할 때는 항상 컴포넌트나 커스텀 훅에서 useQueryClient()를 사용해야되는건가요?

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

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

invalidateQueries를 사용했을 때, UI가 Re-Render 되지 않습니다.

안녕하세요, 현재 useQuery를 사용해서 인증과 동시에 유저 데이터를 가져오고 있고, 이 유저 데이터 중 닉네임을 변경하는 코드를 만들고 있어요. 제가 원하는 동작은 닉네임을 변경했을 때, 변경된 닉네임으로 Re-Render 되어서 화면에 보여지는 거예요. 문제는 invalidateQueries를 사용해서 캐시를 무효화해도, 변경된 닉네임으로 화면이 바뀌질 않아요. React-Query DevTools에선 캐시 데이터가 변경된 것을 확인했고, useMutation 훅을 사용해서 닉네임을 변경해봐도 결과는 같았습니다. 이상하게도, 사이트의 네비게이션 바의 프로필 UI에선 닉네임이 즉시 변경되었는데요, 이 네비게이션 바 외에선 자동으로 Re-Render 되지 않습니다. 이와 관련해서 아시는 분이 계실까요?

react-query에서 invalidateQueries 사용 방법?

아래와 같은 코드가 있을 때 로그아웃을 하면 내 정보를 다 삭제해 주려고 합니다. 그 때 invalidateQueries를 사용해서 초기화 시켜주려고 하는데요. 정보가 너무 많아요 혹시 효율적인 방법이 있을까요? 모든 원하는 key의 정보를 한번에 삭제한다던가 하는 함수가 있나요?

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번 방식을 사용하고 있기는 한데, 동작상 두 방식의 정확한 차이를 모르겠어서 이렇게 질문드립니다. 혹시 두 방식 모두 일반적이지 않다면, 일반적인 방식도 함께 알려주시면 정말 감사드리겠습니다!