With our core implementation complete, let's explore how this system provides an excellent developer experience through IDE integration, development workflows, and advanced type safety features.
Our implementation includes comprehensive IDE support, particularly for VSCode. This is configured through the project's package.json:
{
"graphql": {
"schema": "http://localhost:3001/api/graphql",
"documents": "**/*.{graphql,js,ts,jsx,tsx}"
}
}To enable full GraphQL support in VSCode, two extensions are required:
GraphQL: Syntax Highlighting (GraphQL.vscode-graphql-syntax)
GraphQL: Language Feature Support (GraphQL.vscode-graphql)
These extensions provide:
Syntax highlighting for GraphQL files
Autocompletion for queries and fields
Real-time validation against the schema
Hover information for types and fields
Jump-to-definition support
Let's walk through the typical workflow for adding a new GraphQL query to the system:
Query Development in Apollo Sandbox
Run the development server
Open Apollo Sandbox through the npm run studio command
Write and test the query with real data
Verify variables and results
Creating the Query File
Copy the tested query to a new .graphql file
Receive immediate feedback from VSCode plugins about schema compliance
Type-safe variables through GraphQL Code Generator
Generating the Query Map
npm run gql:query-map
This command:
Processes all .graphql files
Generates unique query identifiers
Updates the query map
Copies the map to the CMS project
4 . Using the Query
Import the generated types
Use the fetcher with full type safety
Get autocompletion for query variables
Receive runtime validation through Zod
The system is designed for optimal performance in both development and production:
Development Mode
Full GraphQL endpoint for easy exploration
Detailed logging for debugging
Hot reloading of queries
Direct schema validation
Production Mode
Compact GET requests
CDN caching support
Minimal network overhead
Version-safe query handling
Our implementation provides multiple layers of type safety:
1. GraphQL Schema Types Generated by GraphQL Code Generator:
export type CMSUiString = {
id: string;
text?: string | null;
};
export type CMSLocaleInputType = "en_US" | "de_DE" /* ... */;2. Runtime Validation Using Zod for runtime type checking:
export const ZodUiStrings = z.array(
z.object({
id: z.string(),
text: z.string().nullable(),
})
);3. Query Variables Validation
const QuerySchema = z.object({
variables: z.string().optional().default("{}"),
});
This multi-layered approach ensures type safety from development through production:
Compile-time checking through TypeScript
Runtime validation through Zod
Schema validation through GraphQL
IDE support through VSCode extensions
The complete system provides a robust, type-safe, and developer-friendly approach to GraphQL integration. Developers get the benefits of full GraphQL exploration during development while users get the performance benefits of persisted queries in production.
Key benefits include:
Excellent developer experience with full IDE support
Type safety at every level
Performance optimization for production
Comprehensive logging and debugging tools
Safe deployment patterns
This implementation demonstrates that it's possible to have both excellent developer experience and production performance without compromise. The system is already running successfully in production, handling translation management with minimal operational costs while providing a smooth development experience.
Ancora nessun commento, sii il primo:
© 2024 da Moritz Thomas