graphql codegen apollo next ssr

Майнтанер нужен

Альтернативное решение, основанное на swr и gql-request можно найти здесь

graphql-codegen-apollo-next-ssr

Создать код Apollo для NextJS SSR

Мотивы

NextJS недавно представил getServerSideProps , который не позволяет использовать шаблон HOC, принятый официальным плагином Apollo GraphQL (на основе getInitialProps ). В то же время метод SSR, предлагаемый Apollo Client ( getDataFromTree ), обеспечивает соблюдение приложения React несколько раз для сбора и получения всех соответствующих запросов. Обеспечивая запрос на высшем уровне, мы можем сэкономить время рендеринга и предоставить более простой шаблон, который работает с getServerSideProps . Этот плагин генерирует типовую версию getServerSideProps для каждого запроса на сервера, а соответствующий HOC для обертывания компонента React, возвращающего результат кэша. Ограничение/преимущество этого решения состоит в том, что все запросы, встроенные во внутренние компоненты реагирования, игнорируются, если только не охватываются кэш верхнего уровня.

Конфигурация

• excludePatterns (по умолчанию: null): regexp, чтобы исключить имена операций
• excludePatternsOptions (по умолчанию: ''): флаги Regexp, чтобы исключить имена операций
• reactApolloVersion (по умолчанию: 2): версия клиента Apollo
• apolloCacheImportFrom (по умолчанию: Apollo-Cache-Inmemory): Apollo-Cache-Inmemory
• apolloImportFrom (по умолчанию: Apollo-Client v2 или @apollo/client v3): зависимость клиента Apollo
• apolloCacheImportFrom (по умолчанию: Apollo-Cache-Inmemory V2 или @Apollo/Client v3): зависимость клиента Apollo Cache
• apolloStateKey (по умолчанию: Apollostate): ключ, используемый для хранения штата Аполлон
• withHooks (по умолчанию: false): настроить вывод, включив/отключив сгенерированные крючки React.
• withHOC (по умолчанию: true): настроить вывод, включив/отключив HOC.
• customImports (по умолчанию: ''): полная индивидуальная декларация импорта
• contextType (по умолчанию: «любой»): тип Contex передается GetApolloclient
• contextTypeRequired (по умолчанию: false): если контекст должен потребоваться при вызове из GetServerSideProps
• pre (default: ''): пользовательский код перед каждой функцией
• post (по умолчанию: ''): пользовательский код после каждой функции
• apolloClientInstanceImport (по умолчанию: ''): добавить импорт экземпляра Apolloclient
• replaceQuery (по умолчанию: false): заменить ключевое слово «запрос» внутри сгенерированных операций
• replacePage (по умолчанию: false): замените ключевое слово «страница» внутри сгенерированных операций
• reactImport (по умолчанию: тип импорта React из «React»;): Пользовательский импорт React

Пример конфигурации

 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