반응형 개발/react-query4 react-query v5에 useQuery의 onSuccess가 사라졌다. 사이드프로젝트하다가 api에 문제가 생겨서 손보던 중 react-query v5가 나온걸 보고 v5로 업데이트 했다. 인터페이스가 좀 바뀌어서 이것저것 고치는데 onSuccess를 넣을 자리가 안보였다. 검색해보니 react-query v5에서는 onSuccess가 사라졌다고 한다! 이 글에 나와있는데 주요한것만 작성해본다. 나쁜 Callback 제거 useQuery에서 onSuccess, onError, onSetteled가 제거되었다. (useMutation에는 잘 있다고 한다.) 개발자의 의도와 다르게 행동할 수 있기 때문이다. onError onError같은 경우는 root의 queryClient에서 사용하라고 한다. const queryClient = new QueryClient({ queryC.. 2023. 12. 19. refetch와 mutation의 캐시 동작 refetch와 mutation에서의 캐시 동작 react-query를 쓰는 이유는 loading,error처리의 간편함도 있지만, 캐시 관리의 편리함이 가장 크다. cacheTime(default = 5분)과 staleTime(default = 0)을 적절히 사용하여 요청을 보내지 않고 캐시 데이터를 사용할 수 있다. 이를 통해 서버 부하를 줄일 수 있고, 데이터 로드 속도를 높힐 수 있다. react-query에서 refetch와 mutation을 사용할 때 캐시에 대한 동작은 조금 다르다. refetch refetch는 특정 쿼리를 다시 실행하고 해당 쿼리의 캐시를 업데이트 시킨다. mutation mutation은 데이터를 수정, 추가, 삭제하는 등의 작업을 수행할 때 사용되는데, mutation.. 2023. 9. 12. react-query warning : query data cannot be undefined. please make sure to return a value other than undefined from your query function. query data cannot be undefined. please make sure to return a value other than undefined from your query function. 처음에는 쿼리키 문제인줄 알았다. 하지만 쿼리키를 아무리 조작해봐도 해결되지 않아 구글링을 해보니 Promise를 반환하는 react-query의 query가 undefined를 반환하거나 아무것도 반환하지 않을때 나타난다. 비동기 함수가 아닌 동기 함수를 쿼리 함수로 사용헀거나, 비동기 함수에서 await 키워드를 잘못 사용했을 수 있다. query data cannot be undefined 에러 해결 과정 타입을 Promise로 선언해주고 해결되기를 기대했지만 해결되지 않았다. 나는 openAPI를.. 2022. 11. 19. useMutation : mutate는 void, mutateAsync는 promise 아래와 같이 적으니 await가 걸리지 않았다. /* Mutation */ const { mutate: reviveApplication } = useMutation(variables => reviveApplicationRequest(variables)); .. onOk: async () => { if (slugUrlData) { //await가 걸리지 않음 const { data: reviveApplicationData } = await reviveApplication({ applicationUuid, userUuid: profile?.uui.. 2022. 10. 19. 이전 1 다음 반응형
