graphql codegen apollo next ssr

Pemeliharaan dibutuhkan

Solusi alternatif berdasarkan swr dan gql-request dapat ditemukan di sini

GraphQL-Codegen-Apollo-Next-Ssr

Hasilkan Kode Apollo untuk SSR NextJS

Motivasi

NextJS baru -baru ini memperkenalkan getServerSideProps yang tidak memungkinkan untuk menggunakan pola HOC yang diadopsi oleh plugin resmi Apollo GraphQL (berdasarkan getInitialProps ). Pada saat yang sama metode SSR yang ditawarkan oleh Apollo Client ( getDataFromTree ) menegakkan aplikasi React untuk merender beberapa kali untuk mengumpulkan dan mengambil semua kueri yang relevan. Dengan mendeklarasikan kueri tingkat atas, kami dapat menghemat waktu rendering dan memberikan pola yang lebih sederhana yang bekerja dengan getServerSideProps . Plugin ini menghasilkan versi typeSafe dari getServerSideProps untuk setiap permintaan server, dan HOC yang sesuai untuk membungkus komponen React yang mengembalikan hasil cache. Keterbatasan/keuntungan dari solusi ini adalah bahwa semua pertanyaan yang tertanam ke dalam komponen reaksi dalam diabaikan, kecuali dicakup oleh cache tingkat atas.

Konfigurasi

• excludePatterns (Default: NULL): RegExp untuk mengecualikan nama operasi
• excludePatternsOptions (default: ''): bendera regexp untuk mengecualikan nama operasi
• reactApolloVersion (default: 2): Versi klien Apollo
• apolloCacheImportFrom (default: apollo-cache-inmemory): ketergantungan apollo-cache-inmemory
• apolloImportFrom (Default: Apollo-Client V2 atau @Apollo/Client V3): Ketergantungan Klien Apollo
• apolloCacheImportFrom (default: apollo-cache-inmemory v2 atau @apollo/klien v3): ketergantungan klien cache apollo
• apolloStateKey (default: Apollostate): Kunci yang digunakan untuk menyimpan Negara Bagian Apollo
• withHooks (default: false): Disesuaikan output dengan mengaktifkan/menonaktifkan kait reaksi yang dihasilkan.
• withHOC (default: true): Disesuaikan output dengan mengaktifkan/menonaktifkan hoc.
• customImports (default: ''): Deklarasi Impor Kustom Lengkap
• contextType (default: 'any
• contextTypeRequired (default: false): Jika konteks harus diperlukan saat dipanggil dari getServerDeprops
• pre (default: ''): Kode khusus sebelum setiap fungsi
• post (default: ''): Kode khusus setelah setiap fungsi
• apolloClientInstanceImport (default: ''): Tambahkan impor instance apolloclient
• replaceQuery (default: false): Ganti kata kunci "kueri" di dalam operasi yang dihasilkan
• replacePage (Default: False): Ganti kata kunci "halaman" di dalam operasi yang dihasilkan
• reactImport (Default: Jenis Impor Bereaksi dari 'React';): Kustom React Impor

Contoh konfigurasi

 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