d4e08ae2bd
This commit combines multiple improvements to the React Query migration: Performance Optimization: - Increase default staleTime from 10s to 30s for better performance - Reduces unnecessary network requests while maintaining data freshness Error Handling: - Add ErrorBoundary component with user-friendly error UI - Integrated at app root level for comprehensive coverage - Provides error details and reload option Documentation: - Add docs/auth-architecture.md explaining AuthContext design decisions - Document why AuthContext is preferred over React Query for current user Code Cleanup: - Remove all JSDoc comments from hooks and components - Keep essential inline comments for clarity - Simplifies code readability Files modified: - src/lib/query-client.ts - Optimized staleTime - src/main.tsx - Added ErrorBoundary wrapper - src/components/ErrorBoundary.tsx - New component - src/hooks/useMemoQueries.ts - Removed JSDoc - src/hooks/useUserQueries.ts - Removed JSDoc - src/components/PagedMemoList/PagedMemoList.tsx - Removed JSDoc - docs/auth-architecture.md - New documentation All changes verified with TypeScript compilation and production build. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
55 lines
2 KiB
Markdown
55 lines
2 KiB
Markdown
# Authentication State Architecture
|
|
|
|
## Current Approach: AuthContext
|
|
|
|
The application uses **AuthContext** for authentication state management, not React Query's `useCurrentUserQuery`. This is an intentional architectural decision.
|
|
|
|
### Why AuthContext Instead of React Query?
|
|
|
|
#### 1. **Synchronous Initialization**
|
|
- AuthContext fetches user data during app initialization (`main.tsx`)
|
|
- Provides synchronous access to `currentUser` throughout the app
|
|
- No need to handle loading states in every component
|
|
|
|
#### 2. **Single Source of Truth**
|
|
- User data fetched once on mount
|
|
- All components get consistent, up-to-date user info
|
|
- No race conditions from multiple query instances
|
|
|
|
#### 3. **Integration with React Query**
|
|
- AuthContext pre-populates React Query cache after fetch (line 81-82 in `AuthContext.tsx`)
|
|
- Best of both worlds: synchronous access + cache consistency
|
|
- React Query hooks like `useNotifications()` can still use the cached user data
|
|
|
|
#### 4. **Simpler Component Code**
|
|
```typescript
|
|
// With AuthContext (current)
|
|
const user = useCurrentUser(); // Always returns User | undefined
|
|
|
|
// With React Query (alternative)
|
|
const { data: user, isLoading } = useCurrentUserQuery();
|
|
if (isLoading) return <Spinner />;
|
|
// Need loading handling everywhere
|
|
```
|
|
|
|
### When to Use React Query for Auth?
|
|
|
|
Consider migrating auth to React Query if:
|
|
- App needs real-time user profile updates from external sources
|
|
- Multiple tabs need instant sync
|
|
- User data changes frequently during a session
|
|
|
|
For Memos (a notes app where user profile rarely changes), AuthContext is the right choice.
|
|
|
|
### Future Considerations
|
|
|
|
The unused `useCurrentUserQuery()` hook in `useUserQueries.ts` is kept for potential future use. If requirements change (e.g., real-time collaboration on user profiles), migration path is clear:
|
|
|
|
1. Remove AuthContext
|
|
2. Use `useCurrentUserQuery()` everywhere
|
|
3. Handle loading states in components
|
|
4. Add suspense boundaries if needed
|
|
|
|
## Recommendation
|
|
|
|
**Keep the current AuthContext approach.** It provides better DX and performance for this use case.
|