상황 next.js에서는 SSR을 사용하기 때문에 url에 있는 query를 받아올 수가 없다. 해결 1 next page에서 getServerSideProps 함수를 이용해 query를 받아올 수 있다. const Page: NextPage = ({ params }) => { } export async function getServerSideProps (context) { const req = context.req; const params = new URLSearchParams(req._parsedUrl.query); return { props: { params } }; }​ 해결 2 해결 1의 방법으로 page 내부에서는 url parameter를 사용할 수 있다. 하지만 _app.tsx와 같이 ne..

React-query : fetch, cache, synchronize, update(for server state)에 사용되는 라이브러리이다. 공식사이트 React Query Hooks for fetching, caching and updating asynchronous data in React react-query.tanstack.com 배경 server state 사용 시 발생할 수 있는 문제점은 다음과 같다. caching deduping(데이터 중복 제거) update "out of date" data / know when is it reflecting updates data pagination optimization, lazy loading data memory management, garba..

query가 오래 되었다는 것을 판단하고 다시 fetch해올 때, queryClient.invalidateQueries 함수를 사용한다. https://react-query.tanstack.com/guides/query-invalidation Query Invalidation Query Invalidation Waiting for queries to become stale before they are fetched again doesn't always work, especially when you know for a fact that a query's data is out of date because of something the user has done. For that purpose, the Quer..

query와 다르게 CUD에 사용된다. https://react-query.tanstack.com/guides/mutations Mutations Subscribe to our newsletter The latest TanStack news, articles, and resources, sent to your inbox. react-query.tanstack.com 사용예제 const mutation = useMutation(newTodo => axios.post('/todos', newTodo)) return ( {mutation.isLoading ? ( 'Adding todo...' ) : ( {mutation.isError ? ( An error occurred: {mutation.error.mes..

기본 사용 const info = useQuery('unique_key', fetchData); // fetchData는 promise 반환 unique한 key로 정의하며, key에 묶이는 데이터는 비동기 데이터이다. useQuery가 반환하는 result는 비동기 데이터의 상태를 담고 있다. 상태 loading isLoading이 true가 된다. error isError가 true가 되며, error에 에러 정보가 담긴다. success isSuccess가 true가 되며, data에 정보가 담긴다. idle 사용 예제 const { isLoading, isError, data, error } = useQuery('key', fetchData); // const { status, data, erro..