GraphQL Tooling

Generate TypeScript types from Quiltt's GraphQL schema for type-safe queries, mutations, and subscriptions with full IDE autocompletion.

Time: ~20 minutes Level: Intermediate Requirements: TypeScript, GraphQL basics

Link to this section#Why GraphQL Code Generator?

GraphQL Code Generator provides:

• Auto-generated TypeScript types from your schema
• Full IDE autocompletion for queries
• Compile-time error catching
• Type safety across your entire app

Link to this section#Prerequisites

• Quiltt account with API access
• Next.js project with TypeScript
• Basic GraphQL knowledge
• Node.js 18+ and pnpm

Link to this section#1. Install Dependencies

Add GraphQL Code Generator packages:

Link to this section#2. Configure Environment

Add your API credentials:

Link to this section#3. Create Config File

Add codegen.ts in your project root:

What this does:

• Fetches Quiltt's schema using your API key
• Watches .ts/.tsx files for GraphQL operations
• Generates types in src/types/generated/
• Auto-formats with Prettier

Link to this section#4. Add Scripts

Update package.json:

Link to this section#5. Use Generated Types

Create a component with type-safe queries:

Link to this section#2. Mutation Example

Here's how to use generated types with mutations:

Link to this section#3. Subscription Example

Here's how to implement type-safe subscriptions:

Link to this section#Best Practices

Link to this section#1. Fragment Usage

Use fragments to share common fields between queries:

Link to this section#2. Type Safety for Custom Hooks

Create type-safe custom hooks:

Link to this section#3. Error Handling Types

Create type-safe error handling utilities:

Link to this section#Troubleshooting

Link to this section#1. Schema Loading Issues

If you're having trouble loading the schema:

Link to this section#2. Generation Issues

If you're experiencing generation problems:

1. Clear the generated files:

2. Verify your GraphQL operations:

Link to this section#3. Type Resolution Issues

If you're having problems with type resolution:

Link to this section#Advanced Topics

Link to this section#1. Custom Scalars

Configure custom scalar types:

Link to this section#2. Operation Presets

Create operation presets for common queries:

Link to this section#3. Development Workflow

Set up a development workflow that automatically generates types:

Link to this section#Conclusion

By following this guide, you've set up a robust GraphQL development environment with:

• Automatic type generation
• Type-safe operations
• IDE support
• Error catching at compile time

Remember to:

• Keep your schema up to date
• Use fragments for reusable fields
• Handle errors consistently
• Maintain type safety across your application

Link to this section#Next Steps

Continue Learning:

• Account Statements Tutorial - Fetch and display account statements

Related Tutorials:

• Authentication Tutorial - Session token setup and management
• Multi-Aggregator Connectors Tutorial - Build a full connection flow

Reference Documentation:

• GraphQL API overview - Complete GraphQL guide
• GraphQL Queries - Available query operations
• GraphQL Mutations - Available mutations
• GraphQL Pagination - Cursor-based pagination patterns