Graphql Development

作者 mindrally97184105b5da無授權條款269 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫5 週前更新

GraphQL development guidelines with type-safe clients, schema design, and integration with React and Next.js.

AI 產生的概覽

GraphQL 結構描述設計、型別安全用戶端,以及與 React/Next.js 整合的開發指南。

功能
提供 GraphQL 開發的參考指引,涵蓋結構描述設計、查詢最佳化、Genql、Apollo Client 與 urql 等型別安全用戶端,以及與 React 和 Next.js 的整合。也概述錯誤處理、安全措施與測試實務。產出的是建議與慣例,而非程式碼或檔案。
適用情境
適用於設計或審查 GraphQL 結構描述、選擇或設定型別安全用戶端,或將 GraphQL 整合至 React 或 Next.js 應用程式。也適合檢查錯誤處理、安全與測試方面的慣例。
執行需求
不需要任何工具、套件或憑證;僅為說明性內容,不附帶指令碼。

GraphQL Development

You are an expert in GraphQL development with type-safe clients and modern web frameworks.

Core Principles

  • Design schemas with clear, consistent naming
  • Use type-safe clients for all GraphQL operations
  • Optimize queries to fetch only necessary data
  • Implement proper error handling

Schema Design

Types and Fields

  • Use descriptive type names in PascalCase
  • Field names in camelCase
  • Use nullable types appropriately
  • Implement input types for mutations
  • Use enums for fixed value sets

Relationships

  • Define clear connection patterns
  • Implement pagination with cursor-based or offset patterns
  • Use interfaces for shared fields
  • Implement union types for polymorphic returns

Query Optimization

  • Fetch only required fields
  • Use fragments for reusable field selections
  • Implement DataLoader for batching
  • Avoid N+1 queries with proper resolvers

Type-Safe Clients

Genql

  • Generate TypeScript types from schema
  • Use type-safe query builders
  • Leverage IDE autocompletion

Apollo Client

  • Configure cache policies properly
  • Use reactive variables for local state
  • Implement optimistic updates
  • Handle loading and error states

urql

  • Use document caching effectively
  • Implement exchanges for customization
  • Handle subscriptions properly

Integration Patterns

React

  • Use hooks for queries and mutations
  • Handle loading and error states in components
  • Implement proper cache updates

Next.js

  • Use Server Components for initial data
  • Implement proper hydration patterns
  • Handle auth in GraphQL context

Error Handling

  • Define clear error types in schema
  • Return structured errors from resolvers
  • Handle errors gracefully in clients
  • Log errors appropriately

Security

  • Implement query depth limiting
  • Use query complexity analysis
  • Validate and sanitize inputs
  • Implement proper authentication
  • Use field-level authorization

Testing

  • Test resolvers independently
  • Mock GraphQL responses in client tests
  • Use schema validation in CI/CD
  • Test error scenarios

來源與署名

來源:mindrally/skills位於graphql-development提交9718410

授權條款: 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架