위 트러블슈팅 과정에서 쿼리를 작성하는데 아래와 같은 에러가 발생하였다. 🥲
에러 : ModuleNotFoundError ...page-data
❗️ Uncaught Error: The result of this StaticQuery could not be fetched.
❗️ ModuleNotFoundError: Module not found: Error: Can't resolve '../public/ page-data/sq/d/2014662613.json' in '../components'
about 페이지와 project 페이지가 번갈아가면서 에러가 떴다..
해결 과정
graphiQL 도구에서는 정상적으로 데이터가 출력되는데, 내 프로젝트에 적용하면 에러가 발생하여 처음엔 이전 데이터가 캐시되어 발생하는 에러인줄 알았다.
그래서 yarn clean 명령어로 캐시도 날려보고, 라이브러리 버전과의 충돌 문제라는 글을 발견하여 node_modules, yarn.lock 파일도 제거 후 yarn install 명령어로 라이브러리도 다시 설치해보았지만 동일했다,,,ㅠ
어떤 부분이 문제인지 알아보기 위해 하나씩 주석 처리를 하며 디버깅을 하기 시작했다.
about 페이지에서 두 개의 쿼리를 사용하고 있는데 (json 파일을 위한 쿼리, md 파일을 위한 쿼리) json 쿼리는 기존에 존재했기 때문에 md 쿼리를 주석처리 해보았는데 동일한 에러가 발생했다. 이번엔 두 쿼리를 모두 주석하였는데, 에러가 사라졌다. 🫢
쿼리문 작성법에 문제가 있는 것이 확실해져 gatsby github issue에서 동일한 에러를 찾아보니,
...!!
쿼리의 이름이 동일하면 안 된다는 것이었다...!
graphiQL 도구에서 쿼리의 이름이 디폴트값으로 MyQuery 로 되어있어 똑같이 복사/붙여넣기 하여 내 코드에 넣은 것이 문제가 되었던 것이다. 😅
코드를 확인해보니, project 페이지에 넣은 쿼리문과 about 페이지의 쿼리 두 개가 모두 MyQuery 로 되어있었다..ㅋㅋㅎ
그래서 about 페이지의 쿼리 하나만 주석했을 땐 에러가 발생했고, 두 개를 모두 주석했을 때 에러가 사라진 것이었다ㅠ
세 개의 쿼리에 모두 쿼리의 기능과 어울리는..? 이름으로 변경해주고,
빌드를 진행하니 에러가 사라졌다 😊✨
참고
