# usequery

planethoon

사이퍼즈 스트리머 위젯에서 어떻게 확장하면 좋을까 고민하다가 전적 검색으로 넓혀볼까 싶었다. 사실 현재 사이퍼즈의 전적 검색을 지원하는 웹앱은 여러 가지가 있지만(심지어, 공식 홈페이지에서도 지원한다!) 최근 10판의 정보만 보여준다거나, 직관적으로 전적을 보기 불편하다거나, 광고가 너무 많고, 전적이 바로 보이지 않는다는 문제들이 산재해 있어서 이를 개선한다면 분명 수요가 존재할 것이라고 생각하고 작업에 착수했다. 우선, useQuery react-query를 이야기하기 전에, 네오플 오픈 API에 대해서 먼저 짚고 넘어가자면, 네오플 오픈 API에 대한 요청은 보안 이슈로 무조건으로 프록시 서버를 한번 거쳐야 한다. 그래서 한번 Next.js의 기능 중 하나인 API Routes를

chosule

Stale이란 "신선하지 않은" 이라는 뜻을 가지고 있다. 기존에 조회한 데이터에서 데이터가 변경 되었을경우나, 데이터가 저장된(캐싱된) 상태에서 리액트 쿼리는 내가 가진 데이터는 신선하지 않은 데이터 !! 라고 인식한다. 또한 Stale은 "신선하지않아서 최신화가 필요한 데이터" 라는 의미로도 해석할 수 있다. >useQuery가 stale하다 는 캐싱되어있는 data를 stale한 (신선하지않은,오래된) 상태로 여긴다. 리액트 쿼리 문서에서는 오래된 쿼리는 다음과 같은 경우에 백그라운드에서 자동으로 다시 가져온다고 한다. >- 쿼리의 새 인스턴스가 마운트 되는 경우 창이 다시 포커싱 된 경우 네트워크가 다시 연결된 경우 쿼리가 선택적으로 새로 고침 간격으로 구성된 경우 예상치 못한 리페치가 표시되는경우 이를 위해 해줄수있는 방법은 staleTime cacheTime 을 사용해줄 수 있다. ☝

chosule

☝🏻 customhook 데이터를 받아오는 custom hook을 만들어서 다른 컴포넌트에 api를 fetch하는 커스텀훅을 받아온다고 가정해보자. 커스텀훅에서 만들었던 logding , error , data 라는 상태값을 내가 원하는 컴포넌트에서 호출하게 되고, 동일하게 데이터를 받는 로직을 실행하게 될것이다. 만약 브라우저에 커스텀훅을 받아온 한개의 컴포넌트가 2개 나열되어있어야 한다면 console로 확인해 봤을때 컴포넌트안에 커스텀훅의 데이터가 두번씩 출력되는걸 확인 할 수 있다. ☝🏻 커스텀 훅을 만들어 데이터를 받아왔을때 문제점 ? 커스텀훅에서 만든 상태값은 전역적으로 재사용하거나 캐싱하기 위한 별도의 로직이 담겨있지않다. 커스텀훅을 호출하는 컴포넌트들 마다 내부 상태들이 다 각각 다르게 설정이되고 , 커스텀훅을 사용할때마다 네트워크 통신이 발생한다. 그래서 서버 상태 가져오기 , 캐싱 을 보다 쉡기

kjyook

react에서 서버로부터 데이터를 받아오기 프런트앤드 코딩을 처음 진행하면서 알게 된 하나의 사실은 내가 글자 혹은 데이터를 작성해서 화면에 띄우는 것은 굉장히 쉽지만 서버에서 관리하는 데이터를 받아오는 것은 귀찮다는 사실이었다. 하지만 우리는 슬프게도 많은 데이터는 서버에서 관리해야 하고 이 데이터를 화면에 띄우거나 활용해야 할 때면 이를 서버에서 받아와야 한다. server에서 데이터를 받아오는 방법은 많을 것이지만 내가 유일하게 알고 있고, 우리가 활용한 방법은 useQuery를 활용하는 것이였다. 우리가 만든 서버에서 api를 호출해 오는 코드를 전부 소개하는 것도 좋지만 오늘은 useQuery를 사용하는 코드를 집중적으로 봐보도록 하자. useQuery의 사용법! api를 호출하여 얻은 데이터를 활용하는 곳에서 사용하는 코드이다. useQuery의 함수 인자는 많이 있으니 구현하고 싶은 기능에 따라 사용하면 된다. 아래는 useQu

koyk0408

1. 발단 유저네임 앞에 아이콘이 하나 있다. 이것은 유저가 기분을 선택했을 때, 그 기분의 색을 나타내준다. 하나의 귀여운 포인트랄까. 그런데 이게 작동하지 않는 것을 발견했다. 2. 어떤 부분이 문제였나 최대한 영어를 배제하고 한글로 서비스를 하고 싶었던 우리...^_^ 그래서 display는 한글로 되도록 하고 있다. 무드카드를 보면 '행복' 이런식으로 한글로 나타나 있는 것을 볼 수 있다. 그러나 팔레트는 영어로 되어있다. userMood === palette.mood 를 리턴하도록 했으니 아무것도 나오지 않을 수밖에 없었다. 3. 고치자 그래서 열심히 고민해서 고쳐봤다. 기존에는 유저의 팔레트를 useQuery로 받아오고, redux로 유저의 오늘 기분을 받아와 비교했었다. 비동기 데이터에서 리덕스를 최대한 배제하고 싶어서 어떻게 고치면 될까 고민하다가 api 문서를 살펴봤다. 유저 디스플레이네임을 안다면 유저의 오늘 기분을 가져올 수 있다! `mood/

tootb

TanStack Query React-Query를 왜 사용해? 이에 대한 질문은 state(상태) 관리에서 찾을 수 있다. 원래 React에서 상태 관리를 하려면 Redux를 활용하며 서버 데이터를 활용할 때는 반드시 Redux-saga, Redux-Thunk, RTK-Query 같은 또 다른 미들웨어를 사용해야 했다. 이로써 boiler-plate가 비대해지는 상황이 생긴다. 기존의 많이 쓰이던 상태관리 라이브러리는 클라이언트 상태를 작업하기에는 좋으나 async나 서버 상태 작업에 최적화되어있지는 않다. 그 이유는 서버 state는 완전히 그 개념이 다르기 때문이다 > #### server state 사용자가 제어하거나 소유하지 않는 위치에서 원격으로 유지됨(데이터베이스) fetching하고 updating하는데 asynchronous API를

cnsrn1874

Photo by Denny Müller TkDodo의 Breaking React Query's API on purpose를 번역한 글입니다. 라이브러리 인터페이스용 API를 설계하는 건 꽤 어려운 일입니다. 사람들은 API가 유연하고 모든 요구 사항을 만족하길 원하는 동시에, 미니멀하고 직관적이어서 학습 곡선이 가파르지 않길 원합니다. 두 가지는 동전의 양면과 같아서 그 중간 어딘가에서 균형잡길 원하죠. 좋은 기본 기능도 아주 중요합니다. 또 어려운 건 설계

imconfi11

react-query v3.39.2 기준 목차 어디서 두 번 사용했어? 두 번 사용한 이유 두 번 사용해서 발생한 문제 해결방법 결론 어디서 두 번 사용했어? 부모 컴포넌트와 자식의 자식 컴포넌트에서 사용했다. 두 번 사용한 이유? 부모 컴포넌트에서 useQuery로 필요한 데이터를 받고 자식의 자식 컴포넌트에서 그 데이터가 필요했다. 세 가지 방법이 생각났다. props로 넘겨주기 전역상태관리 라이브러리 recoil 이용하기 똑같은 useQuery를 자식의 자식 컴포넌트에서 사용하기 첫 번째 방법은 depth가 2개라서 번거롭다. 두 번째 방법은 atom을 만들고 상태값을 set해줘야 하기 때문에 번거롭다. 마지막 방법은 애초에 캐싱을 한고 그걸 이용한다면 리소스 낭비가 적을 것 같고 컴포넌트 관리측면에서 위의 두 가지 방법보다 좋다. 그래서 두 번 사용하기로 했다. 두 번 사용해서 발생한 문제 `u

autumnhee

프로젝트를 진행하다가 원하는 시점에 조회하고 싶은 데이터가 있었는데 queryKey값을 제대로 작성하지 않아서 원하는 시점에 조회를 못 하게 됐던 상황이 생겼었다. 문제해결을 하면서 간단하게 useQuery에 대해서 글을 작성해본다. React Query를 사용하여 서버로부터 데이터를 조회해올 때 useQuery를 사용해야 한다. 데이터 변경 작업을 할 때는 useMutation을 사용해야 한다. 👩🏻‍💻 useQuery useQuery는 비동기로 작동한다. 즉, 한 컴포넌트에 여러개의 useQuery가 있다면 하나가 끝나고 다음 useQuery가 실행되는 것이 아닌 두개의 useQuery가 동시에 실행된다. useQuery는 3가지 매개변수를 받는다. 이와 같은 useQuery는 아래와 같은 형태로 쓰이게 된다. 📌 queryKey queryKey는 React Query가 query 캐싱을 관리할 수 있도록 도와준다. queryKey는

zitto

🏷️ [목차] 라우터 객체와 라우팅 정적라우팅과 동적라우팅 비동기 통신과 조건부렌더링 graphql 뮤테이션에 try ~ catch 적용 Apollo 디버깅 툴(Apollo-Client-Devtools) 🖇️ [출처 및 참조] 코드캠프 MDN https://medium.com/w-bs-log/history-push%EC%99%80-replace%EC%9D%98-%EC%B0%A8%EC%9D%B4-ed5f2f7db7dc https://www.zerocho.com/category/HTML&DOM/post/599d2fb635814200189fe1a7 https://e-juhee.tistory.com/entry/router-push-router-replace

doldory55

두 번째 글이다. 암튼, 프로젝트를 하면서 React-Query를 사용하여 개발하게 되었다. 처음에 React-Query를 사용할 때는 이해가 잘 되지 않았지만 계속 쓰다보니 더 이상 React-Query 없이는 살 수 없는 몸이 되버렸다. 그래서 React-Query를 쓰는 법을 알려주도록 하겠다. React-Query란?? 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 React 라이브러리이다. 진짜 사기다. 쉽게 설명하기 위해 예시를 들면, useEffect로는 페이지가 렌더링될 때마다 서버로 요청을 보내서 사용을 한다면 React-Query는 서버에게 요청을 보낸 뒤 받은 리스폰 값을 캐싱하여 사용을 한다. 그리고 캐싱된 데이터가 만료되면 자동으로 요청을 보내 새로운 데이터를 가져온다. 리액트로 개발을 하는 사람에겐 정말 매력적인 라이브러리이다. 그래서 어케 사용함?? React-Quer

aimzero9303

react-query란 React Query는 React 애플리케이션에서 데이터를 가져오고 관리하는 라이브러리이다. 이를 사용하면 API 호출을 간단하게 처리할 수 있고, 캐싱과 자동 업데이트 기능을 통해 데이터를 더 효율적으로 관리할 수 있다. React Query를 사용하면, 이전에 호출한 결과를 캐싱하여 동일한 요청이 있을 경우에는 API 호출을 다시 하지 않는다. 또한, 자동으로 데이터를 업데이트하여 최신 정보를 보여주며, 이를 통해 코드를 더 간결하게 작성할 수 있다. 따라서, React Query는 데이터를 가져오고 관리하는 작업을 단순화하고, 개발자가 더 적은 코드를 작성하여 빠르게 애플리케이션을 개발할 수 있도록 도와준다. 사용하기 패키지 설치 npm install react-query _app.tsx QueryClientProvider로 감싸준다. List.tsx React Query의 useQuery h

ktw3577

컴포넌트의 child 컴포넌트에서 같은 query-key('user' 라고 하자)를 가진 cache data를 가져오는경우가 많을텐데, 이런경우 어떤 useQuery('user')를 기준으로 cache data가 set되는가? 답은 가장 child component의 useQuery('user')를 기준으로 cache data를 set하게 된다. 그렇다면, queryClient.invalidateQueries('user')를 실행하면 어떤 useQuery를 기준으로 data를 set하게될까? 답은 가장 root단에 가까운 useQuery('user')를 기준으로 data가 set되게 된다. interval로 query 치는상황에 invalidate하게되면? 위와같이 invalidate를 실행하면 'user' data가 stale상태가 되고 다시 fetchFn을 이용해 refetch되므로 interver time은 reset된다! **

ktw3577

useQuery useQuery는 query-key를 observe하고있는 observer로 해당 query-key에 관련된 cache가 변할경우 자동적으로 data를 업데이트한다. queryClient queryClient는 cache와 직접적으로 소통하기위해 사용되어 주로 아래와 같은 상황에 사용된다. Invalidating queries : 특정 query를 invalidate해 data를 stale상태로 만들고, data refetching을 일으키고 싶은경우. Refetching queries : 특정 query를 강제로 refetch하고 싶은경우. Prefetching data : 필요한경우 data를 미리 가져오고 싶을때. Clearing cache : 특정 쿼리를 제거하고싶은경우. Setting query data : 수동으로 특정 캐시를 셋, 업데이트 하고싶은경우. useMutation useMutation은 side-eff

pikadev1771

[Udemy] React Query로 서버 상태 관리하기 >### 참고 : Client State와 Server State Client State 웹 브라우저 세션과 관련된 데이터 ex) 언어 선택, 테마 선택 > Server State 서버에 저장된 데이터. 클라이언트에 표시하기 위해 필요 ex) 블로그 게시물 데이터 1. React Query Server State(서버 상태)를 관리하는 리액트 라이브러리 서버 데이터의 캐시를 관리 (해당 캐시의 데이터를 설정한 바에 따

chosule

📝React query 사용해보기 ✅ 1. 설치 ✅ 2. 예시 App.js 👇🏻 Todos.jsx 👇🏻 ✅ 3. 결과 > console.log('fetching...') 결과 fetching 이 한번만 나오는걸 확인해볼수 있다. 예를 들어 A의 컴포넌트가 usequery를 사용했을때 네트워크 통신을 요청해 네트워크에서 데이터를 받아와서 메모리상의 데이터를 보관해두고 그다음의 두번째 B컴포넌트 에서 다시 usequery를 사용해서 동일한 todos 라는 키를 사용한다면 메모리상에 담겨있던(usequery로 인해 캐싱되어있던) 같은 데이터를 다시 주게되고 캐시된 같은 데이터를 쓰게 된다. 두개의 A,B컴포넌트가 동일한 usequery의 키를 사용함으로 딱 한번만 네트워크 통신이 발생하는걸 확인해볼수 있다. ✅ 4. 캐싱을 잘 사용하려면

park0eun

상황에 따라 더 적합한 것으로 사용 Query React Query를 이용해 서버로부터 데이터를 조회해올 때 사용 cf) useMutation - 데이터 변경작업 👉 queryKey : useQuery마다 부여되는 고유 Key, 문자열 또는 배열형태로 사용 가능. : React Query가 query 캐싱을 관리할 수 있도록 도와줌. res1과 res2가 동일한 queryKey를 사용하여 데이터를 가져오려고 할 때, 일반적인 상황에서는 res1, res2로 두 번 서버에 request전달된다. 하지만, 위 코드에서는 res1에서 request를 서버에 전달하게 되면 res2에서는 이미 동일한 queryKey에 대한 결괏값이 있기 때문에 추가 요청을 하지 않고 res1의 결과를 그대로 가져와 사용한다. = 서버에 1개의 request만 전달 queryFn이 다르게 정의되어 있더라도 res2에서는 res1의 결과를 그대로 전달받기 때문에 queryFn1이

olzlel2000

queryKey & 의존성배열 전에 작성한 post blog의 코드를 보자. 맨 아래에 post 클릭하면 postDetail 컴포넌트에 데이터를 보내게 된다. 여기서 Detail 부분이 comment의 데이터를 불러오기 위해서는 익명함수를 추가해 post 데이터를 받아온 값 안에 id를 넣어준다. 하지만 실행하면 어떤 post title을 눌러도 모두 같은 comment가 나오게 된다. 왜 이런걸까? react-query의 캐시 관리 때문이다. comment를 불러오는 useQuery의 key가 "fetchComments"로 통일되어 있기 때문이다. react-query의 리페치 트리거는 > 1. 컴포넌트를 다시 마운트하거나 윈도우를 다시 포커스할 때 useQuery에서 반환되어 수동으로 리페칭을 실행할 때 따로 설정한 시간으로 리페칭을 자동 실행할 때 변이(Mutation)를 생성한 뒤 쿼리를 무효화할 시 클라이언트의 데이터가 서

olzlel2000

react-query Devloots 적용 react-query를 사용하기 위해서는 QueryClientProvider가 App내부의 컴포넌트를 감싸야 한다. 또한 Devtools의 사용을 위해서는 내부에 ReactQueryDevtools 컴포넌트를 넣어야 한다. 성공적으로 적용된 모습이다. 아직 query를 불러온 것이 없기 때문에 빈 모양이지만 불러왔을 경우, 서버 데이터의 stale, fresh 등의 상태나 cache상태도 체크가 가능하며 어떤 데이터가 있는지도 확인 가능하니 크롬devtools를 대체하여 사용하기에도 좋다. devtools의 장점 활성, 비활성, 만료(stale)등의 모든 쿼리의 상태를 알려준다. 그리고 마지막으로 업데이트된 타임스탬프도 알려준다. 쿼리에 의해

restarea

해당 글은 무겁고 사이즈가 큰 프로젝트를 진행함에 앞서 server state를 어떤식으로 일관되게 가독성있게 관리하여 효율적인 작업이 가능할까를 고민하며 react query를 이용한 server state 관리법과 폴더구조, 설계등을 담은 글로서 하나의 의견으로 봐주시면 감사드리겠습니다. 배경 리액트를 이용해 웹 어플리케이션을 만드는데 있어 서버에서 데이터를 주고 받는 것은 불가결한 행위이며 이에 대한 고민을 끝없이 해왔다. a. 서버에 api call을 날려 이를 useState를 통해 담는다. 형제 관계에 있는 컴포넌트나 여러 떨어진 곳에 위치한 컴포넌트에서 같은 데이터를 필요로 할 때 우리는 전역 store에 해당 state를 등록한다. post등의 call을 날리는 경우에는 api