Apollo Graphql Client 모듈을 사용하던 중 다음과 같은 오류를 접하는 경우가 종종 있습니다. ObservableQuery with this id doesn't exist 위 오류는 React Hooks 또는 Vue/Nuxt의 @vue/apollo-composable이나, @nuxtjs/apollo 등의 apollo client를 사용하는 모든 모듈에서 제공되는 fetchMore 즉 페이지 네이션을 쉽게 하기 위한 graphql client의 기능을 사용하던 중 발생하는 오류입니다. 하지만 지금 말씀드린 내용은 어디서 발생하는지를 언급한 것이며, 원인은 이러한 이유 때문은 아닙니다. 즉 언제나 그렇듯 모듈이 문제가 아니라, 사람! 사용자가 문제라는 것이죠. Dirty Solution 다른 ..

Vue 또는 Nuxt에서 vue apollo 4를 사용하며 composition api에서 유연하게 작성하기 위해서는 @vue/apollo-composable이 필요로 합니다. 물론 없어도 @nuxtjs/apollo를 통해서 작성할 순 있지만, apollo가 setup 밖에 있다 보니, 변수 참조가 안되어 초기 데이터 로드를 query명과 일치하여야만 합니다. 굉장히 불편하며 모순적입니다. 현재 @vue/apollo-composable 4.0.0 은 알파 버전이며 오류가 나타나는 버전은 alpha.12 입니다. alpha.11도 동일하다고 하니... alpha.10을 설치하면 해결됩니다. 하지만 alpha의 저. 버전은 이상하게 package.json으로 재 명시해도 12로 설치가 되고, node_mod..

JEST에서 vue 또는 nuxt를 사용하는 도중 setup binding property "" is already declared as a prop Test Case 자체는 성공으로 Passed가 나타나지만 console에서는 오류가 나는 것을 확인할 수 있습니다. 위 오류는 Composition API를 사용한 JEST Test 결과에서 주로 등장을 하게 되는데, 가장 기본적인 해결 방법은 테스트 케이스 내에서 로컬 뷰에 VueCompositionAPI를 사용한다고 선언을 해주어야 합니다. import Vue from 'vue' import VueCompositionAPI from '@vue/composition-api' const localVue = createLocalVue() localVue.u..

Nuxt.js에서 JEST를 사용하다 보면 마주치는 오류중 하나로 template tag를 JEST에서 해석할 수 없어서 나타나는 증상 중 하나입니다. 대표적으로 nuxt-link 등의 nuxt만의 고유한 태그들에서 이러한 현상이 발생할 수 있습니다. Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. 이것을 해결하기 위해서는 JEST setup에서 mocking된 component.vue를 하나 생성해주어야 합니다. // test/__mocks__/clientOnlyMock.vue setup.js를 통해 생성한 컴포넌..

python 3.8 이후부터 windows에서 async 한 개발을 하면 정상 동작을 하였음에도 불구하고 다음과 같은 오류가 나타납니다. RuntimeError: Event loop is closed 이러한 이슈로 많은 사람들이 해결책을 찾기 위해 aiohttp가 아닌 httpx를 사용을 권장하지만 근본적인 해결책은 되지 않는 것 같습니다. 이유는 미세까진아니고 조금 체감이 될 정도로 httpx.AsyncClient()가 aiohttp보다 느리게 체감됩니다. 해당 이슈를 해결하기 위한 해결책으로 baysul 이라는 유저가 다음과 같은 내용을 제시했는데 window를 사용함과 동시에 Python이 3.8 이상일 때 발생하는 현상으로 Window Selector 이벤트 루프 정책을 글로벌할게 설정하면 이를 ..

Nuxt.js에서 typescript를 사용하여 nuxt-ts를 사용할 경우 router에서 파라미터 하위 페이지에서 파일명이 _id.vue가 됩니다. 이러한 경우에는 파일명이 _id이니 class 명을 _id로 사용하게 되는데, 거기서 다음과 같은 오류가 발생하게 됩니다. [Vue warn]: Invalid component name: "_id". Component names should conform to valid custom element name in html5 specification. 사실 크게 문제되는 경우는 없지만, 콘솔창이 더러워지니 좀 신경쓰입니다. 해결방법은 class 명에서 _(언더바)를 제거해주시면 됩니다. // 변경 전 export default class _id extends..