chore(shared,clerk-js): Set defaultOptions to queryClient #7285
Conversation
🦋 Changeset detectedLatest commit: 3bb19da 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 defers TanStack Query Client initialization with explicit default options (retry and refetch behaviors disabled), migrates Changes
Sequence DiagramsequenceDiagram
participant Component as React Component
participant Hook as useClerkQueryClient
participant Clerk as Clerk Instance
participant QueryClient as `@tanstack/query-core`
Component->>Hook: call useClerkQueryClient()
Hook->>Clerk: subscribe to queryClientStatus
Note over Clerk: client not initialized
Component->>Component: render with isLoaded=false
Clerk->>Clerk: access __internal_queryClient -> `#initQueryClient`()
Clerk->>QueryClient: lazy-load and create QueryClient with clerkQueryClientConfig
QueryClient-->>Clerk: QueryClient instance
Clerk->>Clerk: wrap with RQ_CLIENT_TAG and emit "ready"
Clerk-->>Hook: queryClientStatus change
Hook->>Clerk: getQueryClientState(clerk)
Hook->>Component: update state {client, isLoaded:true}
Component->>Component: re-render with isLoaded=true
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Tip 📝 Customizable high-level summaries are now available in beta!You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.
Example instruction:
Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later. 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.
panteliselef
force-pushed
the
elef/consolidate-query-client-settings
branch
from
fab9ef2 to
3bb19da
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
packages/clerk-js/src/core/clerk.ts (2)
201-217: Centralized query client config is clear and aligned with intentExtracting
RQ_CLIENT_TAG,ClerkRQClient, andclerkQueryClientConfigmakes the internal query client shape and its defaults explicit and easy to audit. The chosen defaults (no internal retries, no focus/reconnect refetch, refetch-on-mount enabled) fit well with the comment about delegating retry behavior tofapiClient.If you anticipate needing per-environment tuning later, you could consider threading an optional override into
#initQueryClient(or intoClerkOptions) and shallow-merging it intoclerkQueryClientConfig, but that’s not necessary for this PR.
264-316: Lazy query client init flow looks correct; consider logging import failuresThe interaction between
__internal_queryClientand#initQueryClientis sound: the getter kicks off async initialization, returns a tagged wrapper only once the client exists, and guards against duplicate construction if multiple calls race.One small improvement for observability would be to surface failures of the dynamic import or constructor, so consumers have something concrete to debug instead of a silently missing client. You can, for example, log via the existing
debugLogger:#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 => { + debugLogger.error('Failed to initialize QueryClient', { error }, 'clerk'); + }); };This keeps behavior the same on success while giving a clear signal in dev/production logs when something goes wrong during initialization.
📜 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)
🚧 Files skipped from review as they are similar to previous changes (5)
- packages/shared/src/react/clerk-rq/use-clerk-query-client.ts
- packages/clerk-js/package.json
- packages/clerk-js/src/test/mock-helpers.ts
- pnpm-workspace.yaml
- .changeset/thirty-pears-reply.md
🧰 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 (1)
packages/clerk-js/src/core/clerk.ts (1)
97-97: Type-only import for QueryClient/QueryClientConfig is appropriateUsing a
typeimport here keeps runtime bundling tied to the local./query-coredynamic import while still giving the class strong typing for#queryClientandClerkRQClient. This looks correct and consistent with the lazy-initialization approach.
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.