fix(shared): Correct useOrganizationList/useOrganization loading state#8395
fix(shared): Correct useOrganizationList/useOrganization loading state#8395jacekradko merged 3 commits intomainfrom
Conversation
…indow Report isLoading: true when the React Query client has not yet attached and the query is enabled. This restores the documented !isLoaded || resource.isLoading loading gate for paginated resources in useOrganizationList and useOrganization, which previously reported isLoaded: true with isLoading: false and data: [] during the render between clerk-js loading and the query client being ready.
🦋 Changeset detectedLatest commit: 826ca60 The changes in this PR will be included in the next version bump. This PR includes changesets to release 20 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.
|
📝 WalkthroughWalkthroughA patch changeset for Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Warning Review ran into problems🔥 ProblemsTimed out fetching pipeline failures after 30000ms Comment |
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@clerk/expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
It's been flagged that after upgrading from
@clerk/nextjs6.32 to 7.0.12, consumers ofuseOrganizationListbriefly seeisLoaded: truealongsideuserMemberships.isLoading: falseanddata: []before any fetch actually runs. The documented loading gate (!isLoaded || userMemberships.isLoading) can't catch this window, so the UI flashes an empty state on the cold path.Root cause
isLoadedflips totrueas soon asclerk.loaded && userthat's independent of when the React Query client actually attaches. On slower bootstraps (prod/staging, not local dev) those two signals desync for a render.In that gap,
useBaseQueryshort-circuits to a dummy result while it waits for the client, and that dummy used to returnisLoading: falsefor everyone.usePagesOrInfinitethen coerces the missing data to[], and the two signals together read as "loaded, no data."The fix: while the client is still attaching, report
isLoading: truewhen the query is enabled. Disabled queries (e.g.useOrganizationList()with no opt-in params) keep returningisLoading: false, so existing behavior there is preserved.useOrganizationshares the same hook stack, so it gets the fix for free.This regressed in #7568 (SWR → React Query). Both
useClerkQueryanduseClerkInfiniteQueryroute throughuseBaseQuery, so the single change covers both paths.Test plan
useBaseQuery.spec.tsxexercising enabled / disabled / omittedenabledin the pre-client window, plus the infinite-query pathpnpm --filter=@clerk/shared test— 1041 tests passingpnpm --filter=@clerk/ui test— 1677 tests passing (existinguseCoreOrganizationListfixture tests still green)pnpm --filter=@clerk/shared buildpasses