Building a Type-Safe S3 Image Fetching Hook with React Query and AWS SDK v3
In this comprehensive guide, we'll walk through creating a production-ready custom React hook that streamlines S3 image fetching operations. By combining AWS SDK v3's modern architecture with React Query's powerful caching and TypeScript's type safety, we'll build a reusable solution that optimizes image loading performance while maintaining code quality. Perfect for developers looking to implement efficient image handling in their React applications with AWS S3.
Published Jan 1, 2025
When building modern web applications, efficiently handling image assets stored in Amazon S3 is a common requirement. In this tutorial, we'll create a robust solution using React Query and AWS SDK v3 to fetch and display images from S3 buckets. Our implementation will focus on type safety, proper resource management, and reusability
Our solution consists of three main components:
- A custom hook (
useS3Image) to handle S3 image fetching - A reusable component (
S3Image) to display the images - Implementation in your application
Let's break down each part and understand how they work together.
First, let's examine our custom hook implementation:
Here, we initialize the S3 client with our credentials. Note the use of environment variables for security. The client is configured outside the hook to prevent unnecessary reinitializations.
The hook implementation:
Key features of our hook:
- Uses React Query for automatic caching and request deduplication
- Handles streaming of image data using chunks
- Converts the response to a blob URL for efficient rendering
- Includes proper error handling and type safety
Next, let's look at our reusable component:
Notable features:
- Proper cleanup of blob URLs using
URL.revokeObjectURL - Loading and error states handling
- Integration with Next.js Image component for optimized image rendering
- TypeScript interfaces for prop type safety
Implementation in your application is straightforward:
In your bucket go ahead and add this CORS under permission
Replace with your website name in origins
This implementation provides a robust solution for handling S3 images in React applications. By leveraging React Query's caching capabilities and AWS SDK v3's modern features, we've created a reusable, type-safe solution that can be easily integrated into any React project.
The combination of proper resource cleanup, error handling, and TypeScript support makes this implementation suitable for production use. The modular nature of the hook and component allows for easy customization and extension based on specific requirements.
Remember to properly configure your AWS credentials and IAM permissions when implementing this solution in your own projects.