Enjoy Programming

그동안 개발하면서 주로 사용한 fetch api는 주로 apollo의 useQuery, useMutation, useLazyQuery 와 reactQuery 의 useQuery, useMutation, 등이다. 회사가 graphql을 주로 쓰다보니 rest는 주로 공공 api칠때나 뭐 그럴때 빼고는 쓸일이 없다.. 근데 이번에 회사 사이트의 기능중 좀 큰 scale을 가진 기능들이 api가 대대적으로 변경이 되었다... 기존에는 한페이지에서 bulk api를 통해서 한번에 가져온 후 client에서 해당 데이터를 전처리 및 가공해서 페이지에 그렸는데 이번에 바뀌면서 결국 한페이지에서 많게는 20~30번 사이의 fetch를 하게 되었다.. 그동안 위 fetch api를 쓰면서 한페이지에서 많아야 4~5개 ..

이번엔.. 그동안 계속 알아봐야지 하던 useContext를 조금 알아보자. 먼저 프론트엔드 개발을 하며 상태관리는 필연적인 요소이다. 어떻게 하면 더 직관적으로 상태를 소실하지 않고 여러 컴포넌트에서 잘 사용 할 수 있을까.. 필자는 현재 apollo 를 사용하다 보니 redux를 사용하지않고 캐싱을 주된 store로 이용하고 있다. 그런데 이게 좀 어렵긴 하다. fragment를 해주고 cache를 modify하는 작업들이 뭔가 쉽진 않다. 이게 backend에서 어떻게 schema를 구성해주느냐에 따라서도 영향을 미치기 때문에.. 일단 현재 필자가 사용하는 apollo caching을 한번보면 먼저 graphql서버로부터 유저의 프로필을 받아오는 hook을 하나 만들어서 통신을 한다. fetchPo..

프로젝트가 타이트 해서 개발하느라 블로그를 오랜만에 작성한다.. 틈틈히 하려고 하는데 ㅠㅠ 아직 skill이 부족한 탓이지.. 오늘 포스팅은 현재 프로젝트에서 겪은 이슈중 하나인 firebase idtoken이 1시간이 만료인 터라 background에서 주기적으로 refresh를 해줘야 하는 문제가 있었다.. 먼저 맡겼었던 외주쪽은 아에 해결을 못하고 그냥 백에서 인증하라고 했었다가.. 결국 외주와의 관계를 끊었다.. (뭐 이것 뿐만이 아닌 베타를 위해 외주를 맡겼는데 베타테스트도 못할 정도로 마무리를 해놔서 결국 필자가 진행하고 있는 프로젝트로 런칭을 가기로 결정이 났다) 자 본론으로 들어가서 해결한 방법만 빠르게 기술하자. 현재 로직은 이렇다. graphql 서버에서 firebase custom t..

현재 프로젝트 진행 중 apollo client를 이용하여 back의 graphql 서버와 pubsub을 구현 중인데.. 아오 해결이 잘안된다.. 왜 useSubscription은 caching이 안되고 사라지는 것일까.. 진행중.. 정리 후 다시 포스팅

음 이번 포스팅은 react로 할지 graphql로 넣을지 고민하다가... 어짜피 apollo client의 useLazyQuery를 사용하게된게 포스팅의 주 목적이니 graphql로 섹션을 잡았다. 자 보통 버튼 클릭이 일어났을 때 api로 부터 data를 fetching 한다면 당연히 이벤트 callback에서 fetch해서 가져오면 된다 callback 밖에 있다면 버튼 클릭시가 아니라 그냥 input의 데이터가 변화되면서 재 랜더링 될때마다 계속 fetching을 하기에 불필요하다 매우! 그런데 여기서 한가지 문제가 발생했다. 지금 사용하는 useQuery의 경우 공식문서에 따르면 useQuery hook은 component가 mount && render될 때 이미 Apollo Provider가 ..

지금 진행 중인 project가 크게 typescript , nextjs, graphql, apollo client를 사용해 진행중이다. 생각보다 nextjs와 apollo client에서 많이 막히게 된다.. 기본적으로 둘에대한 국내 reference가 별로 없다. 전부 stackoverflow또는 해외 it community가 전부이다. 근데 검색하고 하다보면 역시 공식문서가 짱이다.. 그렇게 생각하고 공식문서를 열심히 보면 또 extends된 기능들이나 공식문서 만으로는 해결이 안되는 문제들이 많다.. ㅠㅠ 첫번째로 최근에 경험 했던 간단한 에러를 살펴보겠다. 먼저 필자는 공식문서에 나온 apollo:codegen을 기본적으로 사용하고 있고 부가적으로 graphql-codegen도 사용중에 있다. ..