글로벌 스테이트(global state)
글로벌 스테이트란, 여러컴포넌트에 사용되는 state다
전역상태관리(global state) 툴로는 context-Api, Redux, Recoil등이 있다
fetchPolicy
recoil과 context-api를 보기전에 , apollo-client의 고급 기능을 먼저 보자
apollo-client로 global state를 만들게되면 Apollo-Cache 라는곳에 저장된다
만일 2번 컴포넌트에서 useQuery를 해오게 되면 useQuery를 해서 받아온 데이터가 Apollo-Cache에 저장된 후 컴포넌트로 들어온다
이후에 3번 컴포넌트에서 같은 데이터를 요청하게 되면, Apollo-Cache 에 먼저가서 데이터가 있는지 확인하고 없으면 백엔드에 요청을 있으면 백엔드에 요청을 하지 않고 컴포넌트로 바로 보내준다
이를 Apollo-client의 fetchPolicy(fetch 정책)라고 한다
fetchPolicy에는 여러가지 기능들이 있으며, 변경이 가능하다
fetchPolicy의 기능
- “cache-first” default → 캐시에 있는지 먼저 확인
- “network-only” → 캐시에 있든 없든 무조건 백엔드에 요청
1. 새로운 컴포넌트 등장시에도 글로벌 스테이트 값은 유지된다
2. 새로운 페이지 이동에는 글로벌 스테이트 값이 유지되지 않는다
export default function StaticRoutingMovedPage(): JSX.Element {
const [isOpen, setIsOpen] = useState(false)
const router = useRouter()
const { data } = useQuery<Pick<IQuery, "fetchBoards">, IQueryFetchBoardsArgs>(
FETCH_BOARDS
)
// 1. 새로운 컴포넌트 등장시에도 글로벌 스테이트 값이 유지되는지?
const onClickIsOpen = (): void => {
setIsOpen(true)
}
// 2. 새로운 페이지 이동에도 글로벌 스테이트 값이 유지되는지?
const onClickMove = (): void => {
void router.push("/section22/22-01-fetch-policy-moved")
}
return (
<div>
<button onClick={onClickIsOpen}>
1. 버튼 클릭 시 새로운 컴포넌트 나타남
</button>
{isOpen && <FetchPolicyExample />}
==================================
<button onClick={onClickMove}>2. 버튼 클릭 시 페이지 이동</button>
</div>
)
}
매 페이지마다 가장 먼저 실행되는 _app.tsx에서
글로벌 캐시는 InMemoryCache() 부분
아폴로캐시스테이트, 아폴로캐시 이런 식으로 들어옴
const client = new ApolloClient({
link: ApolloLink.from([uploadLink]),
cache: new InMemoryCache(), // 컴퓨터의 메모리에다가 백엔드에서 받아온 데이터 임시로 저장 => 나중에 더 자세히
})
페이지를 이동하면 앱 컴포넌트가 새롭게 실행되면서 기존 것이 삭제돼서 새로운 걸 받아오게 됨
=> 페이지마다 new가 안되게 막아주기
const GLOBAL_STATE = new InMemoryCache();
컴포넌트 밖에다 이렇게 작성하면 리렌더링 안됨