Migrate to context-based Apollo Client and AuthenticityTokensManager #11137
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Replace global client exports with context-based client access across all
React Router loaders and actions. This ensures the Apollo Client instance
is properly obtained from the React Router context rather than using a
global export.
Changes:
- Replace `import { client } from 'useIntercodeApolloClient'` with
`import { apolloClientContext } from 'AppContexts'`
- Update LoaderFunction and ActionFunction signatures to include
RouterContextProvider type parameter
- Add context parameter destructuring to all loader/action functions
- Get client via `context.get(apolloClientContext)` at function start
- Update exported helper functions in EventAdmin/create.ts to accept
client as parameter for consistency
Affects 87 files across loaders, actions, and route handlers.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Complete the migration by updating remaining loader and action functions that were still using the global client export. This ensures all React Router data loading is consistent with the context-based approach. Changes: - Update 25 additional files with LoaderFunction/ActionFunction exports - Replace global client imports with apolloClientContext - Add RouterContextProvider type parameters to all loaders/actions - Get client via context.get(apolloClientContext) in all functions - Update EventAdmin/$id.ts helper functions to accept client parameter 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Replace direct imports of the global client export with the useApolloClient()
hook from @apollo/client/react for all component-level usage. This completes
the migration away from the global client singleton pattern.
Changes:
- Replace 'import { client } from useIntercodeApolloClient' with
'import { useApolloClient } from @apollo/client/react'
- Add 'const client = useApolloClient();' inside component/hook functions
This is separate from loader/action migrations which use apolloClientContext
from the React Router context.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
These two files were incorrectly changed to use the useApolloClient() hook pattern in the previous commit, but they actually have loaders that need to use the apolloClientContext pattern instead. Fixes: - OAuth/AuthorizedApplications.tsx: Use apolloClientContext in loader - OrganizationAdmin/OrganizationIndex.tsx: Use apolloClientContext in loader 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
These files were incorrectly changed to import useApolloClient in the previous commit, but they have loaders/actions that need to use apolloClientContext instead. Fixed files: - EventProposals: AdminEditEventProposal, EditEventProposal, EventProposalHistory - FormAdmin: FormAdminIndex, FormEditor - OAuth: AuthorizationPrompt - Reports: EventProvidedTickets, EventsByChoice, SignupSpy, index - SignupModeration: UserRankedChoiceQueue - SignupRoundsAdmin: SignupRoundsAdminPage, index - StaffPositionAdmin: StaffPositionsTable - UserActivityAlerts: UserActivityAlertsAdmin All loaders and actions now correctly get the client from React Router context using apolloClientContext. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Documents key patterns and conventions in the codebase, with special focus on the Apollo Client usage patterns: - Context-based client access in loaders/actions - Hook-based client access in components - Common mistakes to avoid - File organization and routing patterns - GraphQL, forms, modals, and other conventions This will help AI assistants understand the codebase structure and follow established patterns when making changes. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fixed 40+ files that were still importing the global client from useIntercodeApolloClient. All loaders and actions now properly get the Apollo Client from React Router context. Key changes: - Updated 40 files with loaders/actions to use apolloClientContext - Refactored conventionDayLoader to accept client as parameter - Updated call sites in ScheduleApp and AppRouter to pass client This completes the migration away from the global client singleton pattern. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Migrated 11 files from using the deprecated AuthenticityTokensManager.instance singleton pattern to properly using AuthenticityTokensContext. Changes: - React components now use useContext(AuthenticityTokensContext) - Router actions use context.get(authenticityTokensManagerContext) - All token access now goes through the context manager instance - DevModeGraphiql updated to use useEffect instead of useCallback Fixed files: - Authentication: ForgotPasswordForm, ResetPassword, SignInForm, SignOutButton, SignUpForm - BuiltInForms: FileUploadForm - ClickwrapAgreement: index - CmsAdmin: CmsGraphqlQueryForm - DevModeGraphiql - MyProfile: MyProfileForm - OAuth: AuthorizationPrompt This completes the migration away from singleton patterns to context-based dependency injection. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fixed Rubocop errors by adding: - Type description for ClientConfigurationType - Field descriptions for all three fields - Disabled GraphQL/ExtractType cop for the rails fields (style suggestion) All Rubocop offenses resolved. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Contributor
Code Coverage Report: Only Changed Files listed
Minimum allowed coverage is |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR completes a comprehensive migration from singleton patterns to context-based dependency injection for both Apollo Client and AuthenticityTokensManager throughout the application.
Changes Overview
Apollo Client Migration (~204 files)
Loaders and Actions:
apolloClientContextfrom the router contextLoaderFunction<RouterContextProvider>andActionFunction<RouterContextProvider>context.get(apolloClientContext)Component Code:
useApolloClient()hook from@apollo/client/reactUtility Functions:
conventionDayLoaderto accept client as a parameterAuthenticityTokensManager Migration (11 files)
React Components:
AuthenticityTokensManager.instancesingleton touseContext(AuthenticityTokensContext)Router Actions:
context.get(authenticityTokensManagerContext)in action functionsDocumentation
Added comprehensive
CLAUDE.mddocumentation covering:Migration Statistics
Breaking Changes
None - this is a refactoring that maintains the same public API.
Testing
Benefits
🤖 Generated with Claude Code