react-query에서 invalidateQueries 사용 방법?

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

react-query가 데이터를 캐싱하는거 맞나요?

이번에 react-query를 처음 사용해 보는데요. 데이터를 키에 캐싱해서 보여준다고 공식문서에 적혀있던데 사용해보면서 느낀건 캐싱되고 있는거 맞는지 의문점이 생깁니다. 가장 큰 이유는 데이터를 계속 불러오기 때문입니다. 캐싱된 데이터를 가지고 어느정도 API요청을 줄이고 효율적으로 사용할 수 있을 줄 알았는데 매번 hook을 실행할 때마다 혹은 데이터와 관련없는 버튼을 누를때도 렌더링 될때마다 API요청이 일어나더라고요. 물론 제가 처음이라 잘 사용하는 방법을 몰라서 그렇기도 한데 이렇게 사용하는 거라면 더 비효율적인것 같아요 ㅜㅜ

react-query의 결과 값을 클라이언트에서 조작해도 되는지 궁금해요!

안녕하세요, 프로젝트를 진행하던 중에 팀원과 의견이 갈린 영역이 있어서 질문 올립니다. 스택은 next.js, react-query를 사용하고 있고 서버는 노드입니다. 페이지 중 긴 항목의 아이템들을 보여줘야하는 영역이 있는데, 정렬 로직이 들어가야합니다. 이 정렬 로직을 어디에 추가하느냐에 대해서 의견이 갈렸는데요. 팀원은 react-query를 조회하는 함수는에서 정렬 로직을 수행하는게 좋을 것 같다고 했는데, 저는 서버에서 정렬해서 내려주는게 맞는 것 같아서 서로 의견이 살짝 갈렸었습니다. 서버에서 내려준 값이랑 실제 클라이언트에서 받게되는 값이 달라져서 나중에 볼때 혼란스럽지 않을까하는 우려가 생겨서요. 그리고 조회하는 함수가 SSR에서 호출할때랑 CSR에서 호출할때 조금 달라서, 두 곳 모두 관리를 해야하는게 걸리기도 합니다. 일반적으로 react-query의 결과 값을 클라이언트에서 임의로 조작하나요?

refetchInterval을 사용해서 특정 조건 달성 시 useQuery를 멈추는 방법

react-query useQuery 관련 질문이 있습니다. 특정 조건에 걸릴때까지 주기적으로 요청을 해야하는데, refetchInterval을 어떻게 사용해야할지 잘모르겠습니다. 혹시 아시는분 계실까요?

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

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

Next.js SSR + react-query 조합에서의 일반적인 페이지네이션 렌더링 방식

안녕하세요, Next.js SSR + react-query hydration 조합으로 페이지네이션을 구현하려고 합니다. 핵심 궁금증은 일반적으로 SSR을 구성할 때, 첫 페이지만 SSR을 적용하고 2페이지부터는 CSR로만 돌아가게 하나요? 아니면 모든 페이지를 SSR로도 돌아갈 수 있게 구성을 하나요? 예컨대 커리어리 개발자 Q&A 메뉴는 첫 페이지만 SSR을 적용하고 2페이지(스크롤링)부터는 CSR로만 돌아가게 구성을 한 것 같습니다만, 사실 어떤 선택이든 Trade Off가 있겠으나 일반적으론 어떻게 구성하는지가 궁금하네요!

Next.js SSR + react-query 조합에서의 serializing 에러

안녕하세요! Next.js SSR + react-query 조합을 사용하려고 하는데요, page 컴포넌트 내 getServerSideProps 함수에서 prefetching을 받아온 후에 serializing 에러가 발생합니다. (Next.js는 13버젼입니다.) 에러 내용은 다음과 같습니다. Error: Error serializing `.dehydratedState.queries[0].state.data.headers` returned from `getServerSideProps` in "/top". Reason: `object` ("[object AxiosHeaders]") cannot be serialized as JSON. Please only return JSON serializable data types. 해당 에러 내용으로 구글링을 해보니, 대부분 getServerSideProps 함수 반환 코드에서 return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; 와 같이 dehydrate(queryClient)값을 JSON화 -> Object화를 하라고 하는데요, 이와 같이 사용해도 또 다시 아래와 같은 에러가 납니다. TypeError: Converting circular structure to JSON --> starting at object with constructor 'ClientRequest' | property 'socket' -> object with constructor 'Socket' --- property '_httpMessage' closes the circle Backend API는 Express.js를 사용하고 있으며, res.status(200).json({ data: ~ })와 같은 방식으로 응답을 주고 있습니다. 어떻게 해결할 수 있을까요? 코드 첨부가 안되네요, 아래는 page 컴포넌트가 위치한 파일의 전체 코드입니다. import type { ReactElement } from 'react'; import { dehydrate, QueryClient, useQuery } from '@tanstack/react-query'; import { format } from 'date-fns'; import TopMusicContainer from '~containers/TopMusicContainer'; import Layout from '~layouts/Layout'; import type { NextPageWithLayout } from '~pages/_app'; import TopMusicService from '~services/topMusicService'; import * as MusicType from '~types/musicType'; export async function getServerSideProps() { const queryClient = new QueryClient(); await queryClient.prefetchQuery(['fetchTopMusic'], () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }); return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; } const Top: NextPageWithLayout = (): JSX.Element => { const { data, isLoading } = useQuery({ queryKey: ['fetchTopMusic'], queryFn: () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }, }); return ( <section> <TopMusicContainer /> </section> ); }; Top.getLayout = function getLayout(page: ReactElement) { return <Layout>{page}</Layout>; }; export default Top;

react-query에서 응답 데이터를 변환하는 방법

혹시 API의 응답결과를 react-query에서 원하는 형태로 변경시켜 줄 수 있나요? API 응답의 데이터에는 number[] 의 type입니다. 이걸 Set으로 변경시켜주고 싶어서 아래와 같은 형태로 사용하고 있습니다. (이름은 보안을 위해 변경했습니다) 근데 이렇게 사용하면 해당 데이터를 추가하거나 삭제할때도 뭔가 이상해 집니다. API의 응답형태를 아예 변경해야하는걸까요?

리액트 쿼리 refetch vs invalidate

안녕하세요! 리액트 쿼리를 통해 페이지 네이션을 구현했습니다. 특정 페이지에서 데이터가 변경됐을 때 해당 페이지의 데이터를 다시 가져와서 페이지의 ui를 변경해주어야 합니다. 이때 refetch 또는 invalidate를 사용할 수 있는데 결과는 같은 것 같더라구요. 결과는 같지만 refetch와 invalidate의 동작이나 성능 또는 어떤 방면에서 차이가 있는지 문득 궁금해졌습니다! 혹시 데이터를 새로 가져올 때 어떤 함수를 쓰면 좋을까요? 답변을 통해 좋은 인사이트를 얻고 싶습니다! 감사합니다.

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 toast 구현 관련

안녕하세요. Toast 관련해서 질문이 있습니다. toast를 띄워놓은 상태에서 페이지의 이동이 가능한지요? 현재 진행중인 프로젝트의 상황을 설명 드리겠습니다. 회원가입을 하면 “회원가입완료” 라는 alert창 대신 toast를 띄우고 싶은데요. 라이브러리를 쓰지않고 구현을 해보려고 합니다. 다만 회원가입창의 구조가 여러 겹으로 되어있습니다. Route path는 1개 입니다. Url주소가 같은 상태에서 다음버튼을눌러가면서 인풋창에 정보를 기입하게 되는데요. 최종페이지에서 회원가입 버튼을 누르면 로그인이 동시에 되면서 toast가 뜨도록 구현하고 싶습니다. 시도해본 바로는 modal처럼 페이지 위에서 띄우는건데 그마저도 안뜨고 있긴 합니다… 회원가입과 동시에 로그인이 되어도 바로 메인화면으로 가지 않고 url때문인지 최초의 회원가입 입력페이지를 한번 그려줬다가 메인페이지로 로그인 되어 들어갑니다. 검색을 해도 명확하게 나오지 않는 부분이 있어서 질문해보았습니다ㅠ 토스트를 어디에서 띄우는 것이 현명한 방법일지 몰라서 시도는 해보고 있는데 시간도 촉박합니다.. 라이브러리를 쓰는것이 나을까요..?

next.js swr vs react-query 어떤 라이브러리를 선택해야 할까요?

안녕하세요, next.js로 처음 프로젝트 시작하는 초보 개발자입니다! 지금까지 React로만 개발해오고 상태관리 라이브러리는 Redux만 사용해봐서 이번에 새로운 라이브러리를 사용해보려고 합니다. next.js에서는 swr이나 react-query를 자주 사용한다고 하는데 어떤걸 쓰면 좋을까요? 장단점이나 여러가지 알려주시면 감사하겠습니다🙌

react-query의 useQueries 이용

const results = useQueries([ { queryKey: ['post', 1], queryFn: fetchPost }, { queryKey: ['post', 2], queryFn: fetchPost }, ]) 이런식으로 useQueries를 이용해서 해당 키에 데이터를 넣는데요. 이게 엄청나게 많아지면 시간이 오래걸리지 않을까요? 첫번째 fetch하고 두번째 fetch하고 ..... 비효율적인것 같은데 useQueries를 많이 사용하나요?

react-query에서 랜더링 할 때마다 api를 계속 요청합니다.

react-query를 처음 사용해 보는데요. query-key에 대해서 데이터를 캐싱해놓고 꺼내서 사용할 수 있다고 해서 사용해보았습니다. 데이터가 이미 캐싱되어 있고 데이터에 변화가 없는 상태인데도 계속해서 데이터를 새로 불러오도록 API를 요청합니다. cacheTime이라는 것이 있는데 이것도 기본 5분으로 설정되어 있다는데 왜 안되는 걸까요?

react query에서 placeholderData와 initial data 차이

안녕하십니까~ 프로젝트 코드를 보는 중에 react-query의 useQuery 옵션 중에 "placeholderData"라는 값에 더미 데이터를 넣어주고 있습니다. 근데 이걸 initialData라는 옵션에 넣어도 동일하게 작동하길래 둘의 차이가 뭔지 궁금하더라구요 ㅎㅎ 혹시 아시는 분 계신가요?

react-query fetching 스켈레톤 오류

react-query의 isFetching 값을 사용해서 데이터를 fetching 할 때 스켈레톤을 보여주려고 하는데요, 제가 의도하지 않은 타이밍에도 스켈레톤이 뜹니다. 이미 데이터가 한 번 로딩된 이후에도 다시 스켈레톤이 표시됐다가 데이터가 불러와지는데 왜 그런지 아시는 분 계실까요?

react-query를 이용해서 필요할 때만 데이터를 가져오고 싶어요.

회원인 유져는 회원의 추가 정보들을 가져오고, 비회원인 경우는 추가 정보는 아예 조회하지 않도록 하고 싶어요 어떻게 하면 좋을까요????