graphql codegen apollo next ssr

Maintaner가 필요했습니다

swr 및 gql-request 기반으로 한 대체 솔루션은 여기에서 찾을 수 있습니다.

GraphQL-Codegen-Apollo-Next-SSR

NEXTJS SSR 용 Apollo 코드를 생성하십시오

동기

Nextjs는 최근 공식 Apollo GraphQL 플러그인 ( getInitialProps 기반)에서 채택한 HOC 패턴을 사용할 수없는 getServerSideProps 소개했습니다. 동시에 Apollo Client ( getDataFromTree )에서 제공하는 SSR 메소드는 REACT 앱을 여러 번 렌더링하여 모든 관련 쿼리를 수집하고 가져 오도록 강화합니다. 최상위 쿼리를 선언하면 렌더링 시간을 절약하고 getServerSideProps 와 함께 작동하는 더 간단한 패턴을 제공 할 수 있습니다. 이 플러그인은 각 서버 쿼리에 대해 getServerSideProps 의 TypeSafe 버전을 생성하고 해당 HOC는 캐시 결과를 반환하는 React 구성 요소를 래핑합니다. 이 솔루션의 제한/장점은 최상위 레벨 캐시로 덮지 않는 한 내부 반응 구성 요소에 내장 된 모든 쿼리가 무시된다는 것입니다.

구성

• excludePatterns (기본값 : NULL) : 운영 이름을 제외하려는 regexp
• excludePatternsOptions (기본값 : '') : regexp 플래그는 작동 이름을 제외합니다
• reactApolloVersion (기본값 : 2) : Apollo 클라이언트 버전
• apolloCacheImportFrom (기본값 : Apollo-Cache-Inmory) : Apollo-Cache-Inmemory 의존성
• apolloImportFrom (기본값 : Apollo-Client V2 또는 @Apollo/Client V3) : Apollo 클라이언트 종속성
• apolloCacheImportFrom (기본값 : Apollo-Cache-Inmemory v2 또는 @apollo/client v3) : Apollo Cache 클라이언트 종속성
• apolloStateKey (기본값 : apollostate) : Apollo State 저장에 사용되는 키
• withHooks (기본값 : False) : 생성 된 반응 후크를 활성화/비활성화하여 출력을 사용자 정의했습니다.
• withHOC (기본값 : true) : HOC를 활성화/비활성화하여 출력을 사용자 정의했습니다.
• customImports (기본값 : '') : 전체 사용자 정의 가져 오기 선언
• contextType (기본값 : 'Any') : Contex 유형은 GetApolloclient로 전달되었습니다
• contextTypeRequired (기본값 : False) : GetServersideProps에서 호출 할 때 컨텍스트가 필요한 경우
• pre (default : '') : 각 함수 전에 사용자 정의 코드
• post (default : '') : 각 함수 후에 사용자 정의 코드
• apolloClientInstanceImport (default : '') : apolloclient 인스턴스 가져 오기를 추가하십시오
• replaceQuery (기본값 : False) : 생성 된 작업 내부의 "쿼리"키워드 교체
• replacePage (기본값 : False) : 생성 된 작업 내부의 "Page"키워드 교체
• reactImport (기본값 : 가져 오기 유형 'React';) : Custom React Import

예제 구성

 overwrite: true
schema:
    - 'https://myschema/graphql'
documents:
    - 'src/**/*.graphql'
generates:
    src/@types/codegen/graphql.tsx:
        plugins:
            - 'typescript'
            - 'typescript-operations'
            - 'typescript-react-apollo'
    src/@types/codegen/page.tsx:
        config:
            documentMode: external
            importDocumentNodeExternallyFrom: ./graphql
        preset: import-types
        presetConfig:
            typesPath: ./graphql
        plugins:
            - ./build/src/index.js
hooks:
    afterAllFileWrite:
        - prettier --write