profile
코딩 일기장
태그 목록
전체보기 (158)React(6)CSS(6)프로그래머스(5)객체지향(4)programmers(4)객체(4)Props(3)status(3)git(3)styled component(3)useRef(3)new Date(3)http(3)stopPropagation(2)json(2)CSR(2)SSR(2)로그인유지(2)최대공약수(2)preventDefault(2)Event(2)localstorage(2)Prettier(2)cors(2)State(2)Math.round(2)정규표현식(2)setTimeout(2)Token(2)useEffect(2)usedispatch(2)axios(2)linux(2)Math.sqrt()(2)JOIN(2)html(2)JavaScript(2)client(2)useselector(2)redux(2)set(2)react ts redux(1)js typescript(1)object(1)배열(1)component(1)etag(1)sudo(1)res(1)proto(1)promise(1)sql(1)express 공식문서(1)express session(1)tab(1)깊은복사(1)Cashe(1)HTTP Headers(1)자료구조(1)API(1)link(1)schema(1)visual studio(1)push(1)prepend()(1)순열(1)기본값(1)useHistory(1)SQL 키워드(1)JSON.stringify(1)stateCode(1)document.querySelector(1)catch(1)소수 구하기(1)bind(1)cookies(1)Linux 명령어(1)If-None-Match(1)stack(1)queue(1)애자일(1)three.js(1)REST(1)쿠키(1)align items(1)justify content(1)mac(1)이미지(1)purecomponent(1)git remote(1)React.lazy(1)fillRect(1)new Array()(1)oAuth(1)three Fiber(1)유효성검사(1)nodemon(1)project(1)url(1)getBoundingClientRect(1)If-Modified-Since(1)chmod(1)jwt.verify(1)head(1)면접(1)MVC(1)소수점(1)Stable Diffusion(1)Dispatch(1)text(1)소수 둘째 자리(1)소수구하기(1)명예의전당(1)중복순열(1)react-draggable(1)CSS 변수 지정(1)css 상속(1)dotenv(1)리랜더링(1)await(1)matrix(1)stylecomponent(1)storybook(1)useState(1)ajax(1)useRef 변화 감지(1)조합(1)react-typescript-redux(1)기사단원의 무기(1)환경변수(1)Side Effect(1)margin:auto(1)img(1)alt(1)react redux(1)&times(1)참조값(1)Spread(1)async(1)notifyOnNetworkStatusChange: true(1)ref(1)Math.ceil(1)class(1)includes()(1)store(1)Flex(1)export(1)&&(1)apollo cache(1)useParams(1)고차함수(1)rel(1)graphql(1)html 전역속성(1)위치(1)푸드파이트대회(1)ESLint(1)tcp(1)salt(1)css 선택자(1)밀림(1)unshift(1)pointer-events(1)Object.create(1)query(1)su(1)에라토스테네스의 체(1)action(1)Hashing(1)비트연산자(1)classList(1)2022(1)UDP(1)cli(1)switch(1)https(1)JWT(1)protocol(1)새로고침(1)scrollIntoViews()(1)mongodb(1)concat(1)비밀번호 수정(1)편차(1)docker(1)Last-Modified(1)require(1)Map 역순(1)캐시(1)filter(1)href(1)fillStyle(1)default(1)jwt.sign(1)z-index(1)foreach(1)비동기함수(1)CSS data(1)interface(1)Math.floor(1)window.requestAnimationFrame(1)빌드(1)options(1)객체 배열 중복 제거(1)event.target(1)콘텐츠 협상(1)재귀함수(1)padEnd()(1)데이터베이스(1)StructuredClone(1)10진법(1)Sort(1)variables 분기(1)rsi(1)비트맵(1)setInterval(1)가비지 컬렉션(1)DOM(1)body(1)mysql(1)화살표함수(1)길찾기(1)object.entries(1)useCallback(1)data-*(1)shift(1)리렌더링(1)벡터(1)카카오맵(1)border(1)focus(1)http/네트워크(1)splice(1)모달(1)content negotiation(1)Pop(1)Date.now(1)block(1)resizeObserver.observe(1)inline(1)onchange(1)transition(1)split()(1)최소공배수(1)HTTP와 HTTPS 차이점(1)단축키(1)토큰(1)appendChild(1)params(1)provider(1)form(1)label(1)super(1)Fetch(1)react typescript(1)Flat(1)AI 이미지(1)draggable(1)pick or not(1)리액트 초기화(1)IntersectionObserver(1)인증/보안(1)render(1)상속(1)toString(1)window.scrollY(1)lazy(1)날씨 API(1)JSX(1)express(1)slice(1)ssg(1)next js(1)변수(1)react cookie(1)중복 제거(1)req(1)useNavigate(1)svg(1)랜더링(1)object.keys(1)Map(1)border-box(1)Math.random(1)분산(1)postman(1)mutation(1)Threshold(1)MongoDB CRUD(1)CreateElement(1)else(1)outsideClickOff(1)object.values(1)진법(1)표준편차(1)ISR(1)운영체제(1)closure(1)utf(1)padStart()(1)modal(1)3D(1)rcc(1)Suspense(1)resizeObserver.unobserve(1)Payload(1)브랜치(1)session(1)컴퓨터 공학 기초(1)과일 장수(1)문자열 뒤집기(1)터미널(1)hover(1)scope(1)call(1)스레드(1)sop(1)비관계형 데이터베이스(1)canvas(1)브라우저 초기화(1)Document.getElementById()(1)tag(1)생략(1)자정(1)유클리드호제법(1)

graphQL Client(update)

graphQL Provider 보통 index에서 useContext Provider처럼 App 자체를 싼다. client를 하나 설정하고 그걸 따서 Provider로 제공한다고 생각하면 됨. index에서 사용 원래 사용법 매일 client를 끌고와야 하는 단점, state를 매일 만들어서 넣어야 하는 단점들. 그러므로 useQuery라는 hook을 사용. 구조분해 할당으로 받을 수 있음. 변수를 필요로하는 쿼리로 변수를 보내는 server code Client code Apollo cache 위에 클라이언트 코드를 다시 보자. 여기에서 new InMemoryCache()는 Apollo cache를 의미한다. 이게 필요한 이유는 유저가 브라우저에서 한번 들어갔던 것을 케시에 저장해놓아서 다시 들어가도 로딩을 새로 하지 않아 속도가 빠르게 적용이 된다. 즉, apollo cache -> 들어

2022년 7월 25일
·
0개의 댓글
·