chore(shared,clerk-js): Set defaultOptions to queryClient #7285
Conversation
🦋 Changeset detectedLatest commit: fab9ef2 The changes in this PR will be included in the next version bump. This PR includes changesets to release 22 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughThis patch introduces deferred initialization of TanStack Query Client with explicit configuration to disable retries and refetch behaviors, migrates dependencies to pnpm catalog-based resolution for Changes
Sequence DiagramsequenceDiagram
participant Component as React Component
participant Hook as useClerkQueryClient
participant Clerk as Clerk Instance
participant QueryClient as QueryClient (lazy)
Component->>Hook: Call useClerkQueryClient()
Hook->>Clerk: Subscribe to queryClientStatus event
Note over Clerk: Initial state: client uninitialized
Hook->>Hook: Local state: {client: null, isLoaded: false}
Component->>Component: Render with isLoaded=false
Note over Clerk: First access to __internal_queryClient
Clerk->>Clerk: Call `#initQueryClient`()
Clerk->>QueryClient: Lazy-load `@tanstack/query-core`<br/>Create QueryClient with config<br/>(retry disabled, refetch disabled)
QueryClient-->>Clerk: QueryClient ready
Clerk->>Clerk: Emit queryClientStatus = "ready"
Clerk-->>Hook: Status change event
Hook->>Clerk: getQueryClientState(clerk)
Hook->>Hook: Update state: {client, isLoaded: true}
Hook->>Component: Return updated state
Component->>Component: Re-render with isLoaded=true
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Areas requiring extra attention:
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
@clerk/agent-toolkit
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@clerk/elements
@clerk/clerk-expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/clerk-react
@clerk/react-router
@clerk/remix
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/themes
@clerk/types
@clerk/upgrade
@clerk/vue
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/shared/src/react/clerk-rq/use-clerk-query-client.ts (1)
62-69: Consider strengthening the type guard to validate theclientproperty.The
isTaggedRQClienttype guard checks for the__tagproperty but doesn't verify that theclientproperty exists or is aQueryClient. While this is likely safe given internal usage, adding a validation for theclientproperty would make the guard more robust.Apply this diff to strengthen the type guard:
const isTaggedRQClient = (value: unknown): value is ClerkRQClient => { return ( typeof value === 'object' && value !== null && '__tag' in (value as Record<string, unknown>) && - (value as Record<string, unknown>).__tag === 'clerk-rq-client' + (value as Record<string, unknown>).__tag === 'clerk-rq-client' && + 'client' in (value as Record<string, unknown>) ); };packages/clerk-js/src/core/clerk.ts (1)
299-316: Consider adding error handling for query client initialization.The
#initQueryClientmethod uses a fire-and-forget pattern with dynamic import but doesn't handle initialization failures. If the import fails or theQueryClientconstructor throws, the#queryClientremainsundefinedand thequeryClientStatusevent is never emitted, leaving consumers in a perpetual loading state.Apply this diff to add error handling:
#initQueryClient = (): void => { if (this.#queryClient) { return; } void import('./query-core') .then(module => module.QueryClient) .then(QueryClientCtor => { if (this.#queryClient) { return; } this.#queryClient = new QueryClientCtor(clerkQueryClientConfig); // @ts-expect-error - queryClientStatus is not typed this.#publicEventBus.emit('queryClientStatus', 'ready'); + }) + .catch(error => { + // Log initialization failure but don't throw + console.error('Failed to initialize query client:', error); + // Optionally emit error event + // @ts-expect-error - queryClientStatus is not typed + this.#publicEventBus.emit('queryClientStatus', 'error'); }); };
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (7)
.changeset/thirty-pears-reply.md(1 hunks)packages/clerk-js/package.json(1 hunks)packages/clerk-js/src/core/clerk.ts(4 hunks)packages/clerk-js/src/test/mock-helpers.ts(1 hunks)packages/shared/package.json(1 hunks)packages/shared/src/react/clerk-rq/use-clerk-query-client.ts(1 hunks)pnpm-workspace.yaml(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
packages/clerk-js/src/core/clerk.ts (1)
packages/clerk-js/src/core/query-core.ts (1)
QueryClient(3-3)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (9)
packages/shared/src/react/clerk-rq/use-clerk-query-client.ts (2)
71-79: LGTM!The
getQueryClientStatefunction correctly handles both the initialized and uninitialized query client states, providing a mock client when the real one isn't ready yet.
81-101: LGTM!The event-driven approach for tracking query client initialization is well-implemented:
- Initial state is correctly derived
- Event subscription properly updates state
- Cleanup prevents memory leaks
- Falls back to mock client when not loaded
packages/shared/package.json (1)
166-166: LGTM!The migration to catalog-based resolution for
@tanstack/query-corealigns with the new catalog entry inpnpm-workspace.yamland maintains version consistency.pnpm-workspace.yaml (1)
21-23: LGTM!The new catalog entry for TanStack Query provides centralized version management across the workspace, which is a best practice for monorepos.
packages/clerk-js/src/test/mock-helpers.ts (1)
58-60: LGTM!Disabling refetch behaviors in test configuration improves test determinism and prevents flaky tests caused by automatic query refetches. This aligns with the production query client configuration.
packages/clerk-js/package.json (1)
74-74: LGTM!The migration to catalog-based resolution maintains version consistency across the workspace and aligns with the catalog entry in
pnpm-workspace.yaml.packages/clerk-js/src/core/clerk.ts (3)
97-97: LGTM!The type-only imports and discriminated union pattern using
RQ_CLIENT_TAGare well-designed and enable proper tree-shaking while maintaining type safety.Also applies to: 201-203
205-217: LGTM!The query client configuration is well-thought-out:
- Disables retry to use fapiClient's existing retry logic
- Disables automatic refetch on window focus/reconnect to reduce unnecessary requests
- Enables refetch on mount for stale data
- Clear comments explain the design decisions
264-273: LGTM!The getter pattern ensures lazy initialization while protecting against re-initialization via the guard in
#initQueryClient. Returnsundefinedsafely when the client isn't ready yet.
Description
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
Bug Fixes
Chores
✏️ Tip: You can customize this high-level summary in your review settings.