✏️ 글로벌 스테이트와 fetch-policy
글로벌 스테이트
실제원리는 fetch를 하면 globalState에 fetch를 했냐?
있으면 → 그대로 가져와(백엔드 요청 없이)
없으면 → 백엔드에서 가져와
그래서 패치프로필, 패치보드 데이터들이 글로벌스테이트에 먼저 저장이 된다.
그것을 패치 정책이라고 한다. (petch policy)
만약에 무조건 새거 받고싶어! 하면 petchPolicy 옵션을 network-only로 설정해줘야한다.
그러면 글로벌스테이트에 있던 없던 network-only옵션을 주면, 무조건 api요청으로 데이터를 받아온다.
예시)
크게 글로벌스테이트의 역사는 종류가 여러가지 나눠진다.
Redux → MobX → SWR → ReactQuery+ Recoil & ApolloClient + Recoil
(또는 Recoil 대신 Zuatand)
현재 위 과정처럼 글로벌스테이트에 저장하고, 없으면 서버에 요청 보내는 과정을 Redux, MobX, SWR은 모두 만들어줬어야 했는데
최근에는 ReactQuery, ApolloClient가 해주기 때문에 편해졌다.
그나마 Redux 에서 RTK가 나왔지만, 요새 ReactQuery조합으로 많이 사용한다.
글로벌 스테이트는 결국 2가지가 있는데
- 클라이언트 데이터 = 리액트에서 카운터 만드는 것들
- 서버 데이터 = 백엔드에서 가져오는 data들
결국 서버와 클라이언트 두개 다 저장한다고 생각하면 된다.
Redux는 클라이언트 코드와 서버 데이터를 나눠야하는데 리덕스는 안나눠져있다!
React Query = REST API 서버 요청하는 데이터 역할
Apollo Client = graphQL 서버 캐싱
두개는 미니 리덕스!
서버 캐싱 = 캐싱(임시저장) 이라고 생각하면 된다.
패치정책
default : cache-first
network-only로 하고싶으면 옵션에서 바꿔줘야 함!
만약에 글로벌 스테이트에서 값이 없으면?
예시로 fetchBoards, 글로벌 스테이트에 id, writer, title이 있는데
새롭게 받아와야하는 내용은 content도 포함이 되어있다.
그러면 다시 백엔드에 api를 요청해서 데이터를 받아오게 된다!
내부작동 원리는 이렇게 생각하면 됨
ApolloCache의 패치정책
페이지를 이동하면 app 컴포넌트가 새롭게 실행되기 때문에, 아폴로 클라이언트에서는 패치정책이 실행이 되면서 새롭게 다시 받아와진다.
기존것이 지워졌기 때문에 페이지 이동할때 new가 안되게 방어를 해줘야한다.
함수영역안에는 리렌더링이 되기때문에 바깥에 지정해주면 글로벌 스테이트에서 꺼내오게 된다.