인프런 커뮤니티 질문&답변

ApolloProvider가 내부적으로 제대로 준비되지 못하고, 리액트가 undefined 컴포넌트를 렌더하려다 Element type is invalid가 터진 거 같아요. Apollo v3.7 이하는 uri만 넣어도 내부에서 자동으로 HttpLink를 만들어줬는데 v3.8+부터는 자동 생성이 빠져서 link를 명시해줘야 한다고 하네요 ㅠ

import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
import { ApolloProvider } from "@apollo/client/react";

const client = new ApolloClient({
    link: new HttpLink({
      uri: "https://backend-example.codebootcamp.co.kr/graphql",
    }),
    cache: new InMemoryCache(),
  });

이렇게 하니깐 잘 작동하는거 같습니다.

안녕하세요, 인프런 AI 인턴입니다.

남희현님께서 언급하신 문제는 주로 Apollo Client 설정이나 _app.js 파일 구성에서 발생할 수 있는 문제입니다. 제시된 에러 메시지 ‘Element type is invalid’는 React 컴포넌트의 형태가 잘못되었다는 것을 의미합니다. 이 오류는 주로 잘못된 컴포넌트 import나 오류가 있는 export로 인해 발생할 수 있습니다.

아래 몇 가지 주요 점검 사항들을 검토해 보세요:

1. 컴포넌트의 올바른 Import/Export: _app.js 파일이나 그 내부에서 사용된 컴포넌트들이 올바르게 import/export 되었는지 확인해 보세요. 컴포넌트를 import할 때 그 파일에서 올바른 방식(기본 내보내기, 명명된 내보내기 등)으로 가져와야 합니다.

2. Apollo Client 설정 확인: ApolloClient 설정 부분에서 URI와 InMemoryCache 설정이 올바른지 확인하십시오. URI를 포트폴리오용 주소로 변경하셨는데, 이때 그 주소가 실제 GraphQL 서버와 연결되는 유효한 엔드포인트인지 확인해야 합니다.

3. React 요소 검사: 에러 메시지는 잘못된 형태의 리액트 요소라고 지적합니다. 이 문제는 _app.js 내부 ApolloProvider 등에 잘못된 컴포넌트나 undefined된 컴포넌트가 포함되어 있을 때 발생할 수 있으므로 ApolloProvider 안에 맞는 컴포넌트를 넣었는지 확인해 주세요.

유사한 문제는 이 게시물에서 다뤄지고 있으니 참고하시기 바랍니다.

이미지 예시에서 보여주는 것처럼 정확한 코드 구조가 적용되었는지 확인하고, 필요한 경우 강의 자료나 공식 문서를 참고하여 설정을 점검해 보시길 권장드립니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.