#usemutation

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

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

next js 14 react query

next js 14에서 react query를 사용해보고 있는데 QueryClient를 세팅하고 useMutation를 사용했는데 "No QueryClient set, use QueryClientProvider to set one"라고 오류가 떠서 어떻게 하면 고칠수 있는지 궁금합니다 query-provider.tsx 부분입니다

react query 내에서 과연 react hook을 사용해도 괜찮을까요? 에러 내용을 어떻게 뽑아내면 좋을까요?

안녕하세요. 이번에 로그인 시 에러가 날 때, 서버에서 보내주는 각각의 데이터값이 있는데 그것을 추출해서 활용하려고 합니다. 우선 아래 코드와 같이 useMutation (v5) 를 사용했구요. onError 에서 그 값을 추출해서 리턴하고 싶어했습니다. (error 의 타입은 Error 나 AxiosError 하면 해결되는 줄 알았는데, message 값까지 들어가면 타입 정의가 되지 않더라구요.. any를 바꿀 팁도 알려주시면 감사하겠습니다 ㅎ..) (* mutation 의 error의 return 값은 null 로 찍혔습니다..! *) 여튼, 콘솔로 값은 읽을 수 있으나 isError 값이나, error 객체도 원하는 결과값이 나오지 않고, 외부 리턴값으로 활용하는 방법이 떠오르지 않아, 일단 2가지 방법으로 추출을 시도했었습니다. - let 변수를 활용해서 상단에 선언 후에, error 시 재선언하여 값을 입력 - state를 정의하여 setState값으로 입히기 첫번째 방법은 항상 undefined로 읽혀지고, 두번째 방법은 서버 응답 속도에 따라서 값이 받아질 때가 있고, 아닌 경우는 기본 defaultState 값으로 읽혀집니다. 또한, 하나의 hook 내에서 다른 hook 을 선언해버리면 리액트의 훅 규칙을 어기는 것으로 알고 있습니다. 그러기에 위 방법은 옳지 않은 방법인 것 같아서, 옳은 에러 데이터 추출방법을 알고 싶습니다. 감사합니다 :)

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를 사용해서 get 요청을 하는경우에도 useMutation을 활용해도될까요?

리액트 쿼리를 사용하는중 버튼을 클릭했을때 해당 기간에대한 데이터를 서버로부터 받아와야하는데요. 이럴경우엔 useQuery가 맞는거같은데 enabled를 사용해서 처리해야하는지, get요청이지만 useMutation을 사용해야하는지 고민입니다.. 어떻게 생각하시나요?

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을 사용해서 기다리도록 작성되어 있는데, 어떤 문제가 있는 걸까요?

React Query 커스텀훅으로 분리, 어떤 방향으로 하나요?

Q. React Query를 커스텀훅으로 분리할 때, useQuery와 useMutation을 따로 작성하는게 좋을까요? 아니면 하나의 커스텀 훅 내에서 작성하는 것이 좋을까요? React Query를 이제 막 접하게 된 신입 프론트엔드 개발자입니다. 회사 프로젝트에서 React Query를 사용해서 서버 데이터를 받아오고 있는데, 코드 재사용성을 위해서 React Query로 데이터를 받아오는 부분과 수정 및 삭제하는 코드를 커스텀훅으로 분리하려 합니다. 검색해보니, 많은 분들이 useQuery와 useMutation을 따로 분리해서 작성하더라고요. 그런데 제가 작성하려던 방향은 다음과 같이 useQuery와 useMutation을 하나의 커스텀훅 내에서 리턴되는 방향이었습니다. React Query를 처음 써보는데, 코드의 방법 1과 방법2 중에서 어떤 방향이 더 재사용성이 좋은가요? 현업에서는 어떤 방향을 주로 사용하나요? (급하게 긁어와 수정한 코드라 정확하지 않을 수 있습니다)

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

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

react-query useQuery vs useMutation (데이터 조회 시)

안녕하세요. react-query에서 useQuery와 useMutation을 쓰는 도중 의문이 생겨서 질문드립니다. 보통 Read 작업은 useQuery를 쓰고, Create/Update/Delete 작업은 useMutation을 쓰라고들 말씀하시는데요, 특정 페이지 렌더링 시 자동 fetch하지 않고, 사용자 액션 발생 시에만 fetch 요청을 하는 경우 useQuery가 반환하는 refetch 함수를 쓰거나 useMutation가 반환하는 mutate 함수를 사용하면 구현이 가능하더라구요. (제가 테스트한 코드는 gist에 있습니다.) 여기서 궁금한 건 Read 작업임에도 불구하고 useMutation으로도 구현이 가능하다면 굳이 위 상황에서 useQuery로 구현했을 때의 이점이 있을까요?

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