Overview
Understanding the React SDK architecture
The Shelby Protocol React SDK is built on top of React Query (@tanstack/react-query) and the Shelby SDK (@shelby-protocol/sdk) to provide a seamless React experience for interacting with the Shelby Protocol.
Core Dependencies
React Query
React Query is a powerful data synchronization library for React that provides:
- Automatic caching: Query results are cached and shared across components
- Background refetching: Keep data fresh automatically
- Optimistic updates: Update UI before server confirmation
- Request deduplication: Multiple components requesting the same data share a single request
- Error handling: Built-in error states and retry logic
React Query Documentation
Learn how to use React Query's hooks and features
React Query GitHub
View the source code and contribute to React Query
Shelby SDK
The Shelby SDK provides the core functionality for interacting with the Shelby Protocol:
- ShelbyClient: Main client for coordination and RPC operations
The React SDK wraps these SDK methods with React Query hooks, providing:
- Type-safe React hooks
- Automatic query key generation
- Integration with React Query's caching and synchronization
For most apps, the recommended route is to provide a single client with
ShelbyClientProvider and let hooks read it from context. You can still pass a
client directly when you need multiple clients.