리액트 쿼리 2

useMutation

데이터를 저장하는 개념이 아님
useQuery처럼 재시도 안 함

 

const deleteMutation = useMutation((postId)=> deletePost(postId));

...
return (
	<button onClick={deleteMutation.mutate(post.id)}>delete</button>
    {deleteMutation.isError && <p style={{color:"red"}}> Error delete post </p>}
    {deleteMutation.isSuccess && <p style={{color:"red"}}> is not deleted </p>}
)



캐시하지 않으니 굳이 쿼리 키 필요 없음

 

 

component mounts => fetch first page => getNextPageParam (hasNextPage?)

==== useInfiniteQuery ====

import {useInfiniteQuery} from "react-query";

const initUrl = "api/people/"
const fetchUrl = async(url) => {
	const res = await fetch(url);
    return res.json();
}


export Infinitepeople = () => {
  const {data, fetchNextPage, hasNextPage, isLoading, isError} = useInfiniteQuery(
  "sw-people", ({pageParam = initUrl}) => fetchUrl(pageParam),
  { getNextPageParam:(lastPage) => lastPage.next || undefined })
  
  
  // InfiniteScroll 이건 라이브러리임 (react-infinite-scroller)


	if(isLoading <div>loading...</div>
    
    만약 isFetching 을 쓴다면 스크롤 할 때마다 스크롤이 위로 올라감
    => 새로운 페이지가 열릴 때마다 조기 반환이 되어서
    
	if(isError <div>{error.toString()}</div>


  return (
  	  // 이렇게 쓰면 괜찮음
  	  {isFetching && <div>loading...<div>}
      <InfiniteScroll loadmore={fetchNextPage} hasMore={hasNextPage}>
      // 이중 맵은 그냥 데이터가 키:값으로 안에 값이 배열이라서 풀어준 거
        {data.pages.map(({results})=>(results.map((person)=>(
            <Person
                key={person.name}
                name={person.name}
            />
        ))))}
      </InfiniteScroll>
  )}


받아온 데이터는 lastPage
lastPage 안에 next 라는 키가 있고 값으로 다음 url을 줌

 

loadMore = {fetchNextpage}
=> 데이터가 더 필요할 때 불러오기 useInfiniteQuery에서 나온 fetchNextPage 함숫값을 이용


hasMore = {hasNextPage}
=> useInfiniteQuery 에서 나온 객체를 해체한 값을 이용...
=> 이건 아마 캐싱된 값을 말하는 거 같음

 

 

** 무한 스크롤 정리 **


양방향 스크롤
=> 데이터 중간부터 시작할 때 유용

fetchNextPage, hasNextPage, getNextPageParam
시작점 이전 / 이후 페이지를 불러올 수 있음

- pageParam 은 가져와야할 다음 페이지를 나타냄
=> getNextPageParam 옵션으로 관리

- pageParam는 hasNextPage(Boolean)값을 제어
=> pageParam가 정의되어 있으면 true // 아니면 false
=> 더 불러올 데이터가 있는지 확인용

- fetchNextPage는 컴포넌트의 영향을 받기 때문에
  컴포넌트가 데이터를 불러와야 할 때를 결정, hasNextPage 로 그만 가져올 수 있도록 함