Enjoy Programming

최근 회사에서 인력이 부족해서 백엔드 api까지 만들고 프론트 작업까지 진행중이다. 현재는 복잡한건 안하고 호출해서 가져오도록 api를 만드는게 다이긴 하지만... 아무튼 그렇다.. @async_timer async getIssueNewsList( input: GetIssueNewsListInputDto, ): Promise { const fName = this.getIssueNewsList.name; this.larchiveLoggerService.customLog( { fName, vName: 'GetIssueNewsListInputDto', message: input, }, fName, ); try { const uri = this.dataSwaggerUrl + '/news/aggregated-ne..

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

최근 업무중에 한 곳의 서비스에서 다른 서비스의 backend api를 호출할 일이 생겼다. rest api라면 endpoint를 설정해서 해주면 되고 apollo를 쓰지 않았다면 graphql request나 별도의 패키지에 endpoint를 설정해줬으면 되었겠지만... apollo client를 사용하는 서비스라서 client하나에 새로운 endpoint를 설정해줘야 했다. 현재 서비스 내부에서는 wslink && httpLink를 생성해서 사용하고 있는데 검색 좀 해보니 http link를 또 생성해서 context로 구별 하라고 하더라.. 이렇게 신규 링크를 생성해주고 이렇게 apollo client 객체 생성할때 링크에 apollo 에서 제공하는 split함수와 함께 operation에서 con..

project 진행중 인증 유효시간을 구현중 문제가 생겼다... 시간 state를 로컬스토리지에서 사용하려고 window.localStorage를 사용하려고 했는데 이게 왠걸 useEffect안에서는 사용이 되는데 state안에서는 사용이 안되는 것이다;;; 검색을 해보니 nextjs에서는 먼저 server side가 랜더링되고 그 이후 client side가 랜더링 된다. 당연히 server side에는 window객체가 없다. 그래서 window 나 document 객체는 componentDidMount 내에서 실행해 줘야 하는 것이었다. 그래서 useEffect에서는 발동을 하지만 먼저 선언해버리면 안되는 것이었다. 자 해결을 해보자... 여러가지 시도를 하던중.. 아직 nextjs는 제대로 문서를..

음 이번 포스팅은 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도 사용중에 있다. ..