2022/06 (64) 썸네일형 리스트형 리액트 쿼리 : 네트워크 오프라인 시 동작 원문 : https://tkdodo.eu/blog/offline-react-query 오타가 너무 많았어서 수정하였습니다. TL;DR : fetchStatus - 네트워크 연결 상태를 나타내는 횡단관심사 React Query는 비동기 상태 관리 도구 입니다. queryFn의 리턴값이 프로미스인 이상, 라이브러리는 동작합니다. 데이터가 어디에서 왔는지는 중요하지 않습니다. fetchStatus는 loading, sucess,error와 직교하는 또 다른 상태입니다. fetching: 쿼리가 실행중입니다 - 요청이 실행중입니다. paused: 쿼리가 실행되고 있지 않습니다 네트워크가 다시 연결될 때까지 쿼리가 일시 중지됩니다. idle: 쿼리가 현재 실행중이지 않습니다. v4의 기본 모드에서는 네트워크 연.. 리액트 쿼리 : 에러 처리 https://tkdodo.eu/blog/react-query-error-handling React Query Error Handling After covering the sunshine cases of data fetching, it's time to look at situations where things don't go as planned and "Something went wrong..." tkdodo.eu 서론 리액트 쿼리는 비동기 상태 관리 라이브러리입니다. 오류 처리는 비동기적 데이터 가져오기 작업의 필수적인 부분입니다. 모든 요청이 성공하는 것은 아니며 모든 프로미스가 fullfilled되는 것도 아닙니다. 우리는 보통 처음에 성공을 가정하고 구현합니다. 그러나 에러를 처리하는 방법에 대해.. 리액트 쿼리 : 상태 관리 라이브러리 원문 보기 : https://tkdodo.eu/blog/react-query-as-a-state-manager React Query as a State Manager Everything you need to know to make React Query your single source of truth state manager for your async state tkdodo.eu TL;DR 리액트 쿼리는 데이터 페치 라이브러리가 아니라, 상태관리 라이브러리 입니다. 비동기 상태 관리 도구 React Query는 비동기 상태 관리자입니다. Promise를 리턴하는 한, 모든 형태의 비동기 상태를 관리할 수 있습니다. QueryKey를 통해 해당 상태를 식별하며, 데이터 페칭을 추상화합니다. export c.. 리액트 쿼리 : 초기값과 플레이스홀더 원문 보기 : https://tkdodo.eu/blog/placeholder-and-initial-data-in-react-query 대부분의 경우 우리(및 사용자)는 성가신 로딩 스피너를 싫어합니다. 그들은 때때로 필요하지만 우리는 여전히 가능하면 피하고 싶습니다. React Query는 이미 많은 상황에서 이를 제거할 수 있는 도구를 제공합니다. 백그라운드 업데이트가 진행되는 동안 캐시에서 오래된 데이터를 가져오고, 나중에 필요하다는 것을 알면 데이터를 미리 가져올 수 있으며 - prefetch data 쿼리 키가 변경되어 하드 로딩 상태를 피하기 위해 이전 데이터를 유지할 수도 있습니다. - keep previous data 또 다른 방법은 우리의 사용 사례에 적합할 것으로 생각되는 데이터로 캐시를.. 리액트 쿼리 : Query Function Context로 queryFn 타이핑 원문 : https://tkdodo.eu/blog/leveraging-the-query-function-context 요점 인라인 함수를 사용하지 마세요. Query Function Context를 활용하세요. 객체 키를 생성하는 쿼리 키 팩토리를 사용하세요. 들어가며 인라인 queryFn 예제를 살펴봅시다 type State = 'all' | 'open' | 'done' type Todo = { id: number state: TodoState } type Todos = ReadonlyArray const fetchTodos = async (state: State): Promise => { const response = await axios.get(`todos/${state}`) return respo.. 리액트 쿼리 : 쿼리키 원문 : https://tkdodo.eu/blog/effective-react-query-keys 쿼리 키 라이브러리가 내부적으로 데이터를 올바르게 캐시하기 위해 필요합니다. 쿼리 종속성이 변경될 때 자동으로 다시 가져올 수 있도록 하기 위해 필요합니다. 쿼리 캐시와 수동으로 상호 작용할 수 있도록 해줍니다. 변이(뮤테이션) 후 데이터를 업데이트하거나 일부 쿼리를 수동으로 무효화해야 하는 경우와 같이 필요할 때 데이터 캐싱 내부적으로 쿼리 캐시는 단지 자바스크립트 객체입니다. 키는 직렬화된 쿼리키이며 값은 메타 정보가 추가된 쿼리 데이터입니다. 키는 결정적인 방식(deterministic way)으로 해시되므로 객체도 사용할 수 있습니다. 최상위 수준에서 키는 문자열 혹은 배열이어야 하며, 일반 객체의 .. 리액트 쿼리 : 웹소켓 원문 보기 : https://tkdodo.eu/blog/using-web-sockets-with-react-query 웹소켓이란? WebSocket을 사용하면 푸시 메시지 또는 "라이브 데이터"를 서버에서 클라이언트(브라우저)로 보낼 수 있습니다. 일반적으로 HTTP를 사용하면 클라이언트가 서버에 요청하여 일부 데이터를 요청하고 서버가 해당 데이터 또는 오류로 응답한 다음 연결이 닫힙니다. 클라이언트가 연결을 열고 요청을 시작하는 역할만 담당하기에, 업데이트를 사용할 수 있음을 알게 되면 서버가 클라이언트에 데이터를 푸시할 여지가 없습니다. 이를 WebSockets 이 해결합니다. 다른 HTTP 요청과 마찬가지로 브라우저는 연결을 시작하지만 WebSocket으로 연결을 업그레이드하고 싶다고 지시합니다... 리액트 쿼리 : 타입스크립트 원문 보기 : https://tkdodo.eu/blog/react-query-and-type-script React Query and TypeScript Combine two of the most powerful tools for React Apps to produce great user experience, developer experience and type safety. tkdodo.eu 리액트 쿼리의 동적이며 unopinated인 특성 때문에 ts와 사용하기 어려운 부분들이 존재합니다. 좀 더 알아봅시다. Generics React Query는 Generics를 많이 사용합니다. 라이브러리가 실제로 데이터를 가져오지 않고 API가 반환하는 데이터의 타입을 알 수 없기 때문에 필요합니다. 공식 문서.. 이전 1 2 3 4 5 6 7 8 다음
