graphql codegen apollo next ssr

จำเป็นต้องมีการบำรุงรักษา

ทางเลือกอื่นที่ใช้ swr และ gql-request สามารถดูได้ที่นี่

graphql-codegen-apollo-next-ssr

สร้างรหัส Apollo สำหรับ NextJS SSR

แรงจูงใจ

NextJS เพิ่งเปิด getServerSideProps ซึ่งไม่อนุญาตให้ใช้รูปแบบเฉพาะกิจที่ใช้โดยปลั๊กอิน Apollo GraphQL อย่างเป็นทางการ (ขึ้นอยู่กับ getInitialProps ) ในขณะเดียวกันวิธีการ SSR ที่นำเสนอโดย Apollo Client ( getDataFromTree ) บังคับใช้แอพ React เพื่อแสดงผลหลายครั้งเพื่อรวบรวมและดึงข้อความค้นหาที่เกี่ยวข้องทั้งหมด โดยการประกาศแบบสอบถามระดับบนเราสามารถประหยัดเวลาการแสดงผลและให้รูปแบบที่ง่ายกว่าซึ่งทำงานร่วมกับ getServerSideProps ปลั๊กอินนี้สร้าง getServerSideProps เวอร์ชัน Typesafe สำหรับการสืบค้นเซิร์ฟเวอร์แต่ละตัวและ HOC ที่สอดคล้องกันเพื่อห่อส่วนประกอบปฏิกิริยาที่ส่งคืนผลลัพธ์แคช ข้อ จำกัด/ข้อได้เปรียบของโซลูชันนี้คือการสืบค้นทั้งหมดที่ฝังอยู่ในส่วนประกอบของปฏิกิริยาภายในจะถูกละเว้นเว้นแต่จะครอบคลุมโดยแคชระดับบนสุด

การกำหนดค่า

• excludePatterns (ค่าเริ่มต้น: null): regexp เพื่อยกเว้นชื่อการทำงาน
• excludePatternsOptions (ค่าเริ่มต้น: ''): regexp ตั้งค่าสถานะเพื่อยกเว้นชื่อการทำงาน
• reactApolloVersion (ค่าเริ่มต้น: 2): Apollo Client Version
• apolloCacheImportFrom (ค่าเริ่มต้น: Apollo-cache-inmemory): การพึ่งพา Apollo-cache-inmory
• apolloImportFrom (ค่าเริ่มต้น: Apollo-Client V2 หรือ @Apollo/ไคลเอนต์ v3): การพึ่งพาไคลเอนต์ Apollo
• apolloCacheImportFrom (ค่าเริ่มต้น: Apollo-cache-inmemory v2 หรือ @apollo/client v3): Apollo Cache Client Dependency
• apolloStateKey (ค่าเริ่มต้น: ApollOstate): คีย์ที่ใช้สำหรับการจัดเก็บสถานะ Apollo
• withHooks (ค่าเริ่มต้น: FALSE): ปรับแต่งเอาต์พุตโดยการเปิดใช้งาน/ปิดการใช้งานตะขอปฏิกิริยาที่สร้างขึ้น
• withHOC (ค่าเริ่มต้น: จริง): ปรับแต่งเอาต์พุตโดยการเปิดใช้งาน/ปิดการใช้งาน HOC
• customImports (ค่าเริ่มต้น: ''): คำประกาศการนำเข้าแบบกำหนดเองเต็มรูปแบบ
• contextType (ค่าเริ่มต้น: 'any'): ประเภท contex ส่งผ่านไปยัง getapolloclient
• contextTypeRequired (ค่าเริ่มต้น: false): หากบริบทควรได้รับเมื่อเรียกจาก GetServersideProps
• pre (ค่าเริ่มต้น: ''): รหัสที่กำหนดเองก่อนแต่ละฟังก์ชัน
• post (ค่าเริ่มต้น: ''): รหัสที่กำหนดเองหลังจากแต่ละฟังก์ชัน
• apolloClientInstanceImport (ค่าเริ่มต้น: ''): เพิ่มการนำเข้าอินสแตนซ์ Apolloclient
• replaceQuery (ค่าเริ่มต้น: เท็จ): แทนที่คำหลัก "Query" ภายในการดำเนินการที่สร้างขึ้น
• replacePage (ค่าเริ่มต้น: false): แทนที่คำหลัก "หน้า" ภายในการดำเนินการที่สร้างขึ้น
• reactImport (ค่าเริ่มต้น: ประเภทการนำเข้าปฏิกิริยาจาก '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