invalidate query cache on auth change #184

narthur · 2025-09-29T19:04:13Z

Currently it seems that if clerk auth changes, the data in the react query cache remains stale. This should invalidate the whole cache on clerk auth change.

Summary by CodeRabbit

New Features
- App now reacts to authentication events and automatically refreshes relevant cached data, keeping user and session information up to date without manual reloads.
Tests
- Authentication provider mocks updated to include event listener support used by the app.
Chores
- Added development dependency for Clerk type definitions.

coderabbitai · 2025-09-29T19:04:20Z

Walkthrough

Adds a Clerk event subscription hook, integrates it into App to invalidate queries on Clerk events, updates the Clerk React mock to expose addListener, and adds @clerk/types as a dev dependency.

Changes

Cohort / File(s)	Summary
Clerk mock update `__mocks__/@clerk/clerk-react.tsx`	Extends `useClerk` mock return to include `addListener: vi.fn(() => vi.fn())` alongside `session: null`.
Clerk event handling `src/lib/useOnClerkEvent.ts`, `src/App.tsx`	Adds `useOnClerkEvent(callback: ListenerCallback)` hook that subscribes via `clerk.addListener` and forwards `{ user, session, client }`; cleans up listener on unmount. `App.tsx` imports the hook and invalidates React Query cache on Clerk events.
Tooling / dependencies `package.json`	Adds devDependency `@clerk/types@^4.89.0`.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

I twitch my ears at events that chime,
A listener hops in, ready in time.
When Clerk calls out, I clear the ground,
Queries refreshed with a joyous bound.
Carrots saved, the cache unwinds—hooray! 🐇🥕

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title succinctly communicates the primary intent of the changeset by stating that the query cache will be invalidated when authentication changes occur, directly reflecting the core functionality added in the PR. It uses clear and specific language without extraneous details or vague terms.

✨ Finishing touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch payment-method-prompt

📜 Recent review details

Configuration used: Repository: TaskRatchet/coderabbit/.coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5a76a11 and 6247e15.

📒 Files selected for processing (1)

src/App.tsx (3 hunks)

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: narthur
PR: TaskRatchet/taskratchet-web#166
File: global-setup.ts:25-25
Timestamp: 2025-08-12T21:38:27.063Z
Learning: The project uses __mocks__/clerk/clerk-react.tsx to provide mock implementations for Clerk authentication components and hooks instead of inline mocking in global-setup.ts. The mock file exports ClerkProvider, Protect, RedirectToSignIn, SignedIn, UserButton components and useUser/useClerk hooks with test-friendly return values.

📚 Learning: 2025-08-12T21:38:27.063Z

Learnt from: narthur
PR: TaskRatchet/taskratchet-web#166
File: global-setup.ts:25-25
Timestamp: 2025-08-12T21:38:27.063Z
Learning: The project uses __mocks__/clerk/clerk-react.tsx to provide mock implementations for Clerk authentication components and hooks instead of inline mocking in global-setup.ts. The mock file exports ClerkProvider, Protect, RedirectToSignIn, SignedIn, UserButton components and useUser/useClerk hooks with test-friendly return values.

Applied to files:

src/App.tsx

🧬 Code graph analysis (1)

src/App.tsx (1)

src/lib/useOnClerkEvent.ts (1)

useOnClerkEvent (5-15)

🔇 Additional comments (1)

src/App.tsx (1)
44-49: Clear the cache on sign-out events to prevent cross-user leaks.

When Clerk signals a sign-out, invalidateQueries() merely marks cached data stale, so a new user can momentarily see the previous user’s data until refetch completes. Call queryClient.clear() whenever the event payload indicates there is no active session, and fall back to invalidation for other auth changes. useOnClerkEvent already forwards { user, session, client }, so the handler can branch on session.
-const onClerkEvent = useCallback(() => {
-	void queryClient.invalidateQueries();
-}, [queryClient]);
+const onClerkEvent = useCallback(
+	({ session }: { session: Client | null | undefined }) => {
+		if (!session) {
+			queryClient.clear();
+			return;
+		}
+		void queryClient.invalidateQueries();
+	},
+	[queryClient]
+);

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2025-09-29T19:04:43Z

Outdated dependencies

┌────────────────────────────────────────┬─────────────────┬───────────────┐
│ Package                                │ Current         │ Latest        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @clerk/themes                          │ 2.4.7           │ 2.4.22        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ dayjs                                  │ 1.11.13         │ 1.11.18       │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ humanize-duration                      │ 3.33.0          │ 3.33.1        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ vite (dev)                             │ 7.1.2           │ 7.1.7         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @clerk/clerk-react                     │ 5.41.0          │ 5.49.0        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @eslint/compat (dev)                   │ 1.3.2           │ 1.4.0         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @eslint/js (dev)                       │ 9.33.0          │ 9.36.0        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @stripe/stripe-js                      │ 7.8.0           │ 7.9.0         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @testing-library/jest-dom (dev)        │ 6.6.4           │ 6.8.0         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @typescript-eslint/eslint-plugin (dev) │ 8.39.1          │ 8.45.0        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @typescript-eslint/parser (dev)        │ 8.39.1          │ 8.45.0        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ eslint (dev)                           │ 9.33.0          │ 9.36.0        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ knip (dev)                             │ 5.62.0          │ 5.64.1        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ prettier (dev)                         │ 3.3.3           │ 3.6.2         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ query-string                           │ 9.2.2           │ 9.3.1         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @mui/icons-material                    │ 5.18.0          │ 7.3.2         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @mui/material                          │ 5.18.0          │ 7.3.2         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @mui/x-date-pickers                    │ 7.29.4          │ 8.12.0        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @types/node (dev)                      │ 22.17.1         │ 24.6.0        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @types/react (dev)                     │ 18.3.23         │ 19.1.15       │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @types/react-dom (dev)                 │ 18.3.7          │ 19.1.9        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @vitest/ui (dev)                       │ 2.1.9           │ 3.2.4         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ eslint-plugin-testing-library (dev)    │ 6.5.0           │ 7.11.0        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ globals (dev)                          │ 15.15.0         │ 16.4.0        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ jsdom (dev)                            │ 24.1.3          │ 27.0.0        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ react                                  │ 18.3.1          │ 19.1.1        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ react-dom                              │ 18.3.1          │ 19.1.1        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ react-router-dom                       │ 6.30.1          │ 7.9.3         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ react-toastify                         │ 10.0.6          │ 11.0.5        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ rollup-plugin-visualizer (dev)         │ 5.14.0          │ 6.0.3         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ type-fest (dev)                        │ 4.41.0          │ 5.0.1         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ vitest (dev)                           │ 2.1.9           │ 3.2.4         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @mui/lab                               │ 5.0.0-alpha.173 │ 7.0.0-beta.17 │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ vitest-fetch-mock (dev)                │ 0.3.0           │ 0.4.5         │
└────────────────────────────────────────┴─────────────────┴───────────────┘

github-actions · 2025-09-29T19:05:03Z

Bundle Stats

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Total bundle size	% Changed
5	1.75 MB → 1.75 MB (+450 B)	+0.02%

Changeset

File	Δ	Size
`src/lib/useOnClerkEvent.ts`	🆕 +298 B	0 B → 298 B
`src/App.tsx`	📈 +152 B (+3.09%)	4.8 kB → 4.95 kB

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

Asset	File Size	% Changed
assets/index.js	492.64 kB → 493.08 kB (+450 B)	+0.09%

Smaller

No assets were smaller

Unchanged

Asset	File Size	% Changed
assets/dom.js	144.67 kB	0%
assets/material.js	636.95 kB	0%
assets/diffToNow.js	55.09 kB	0%
assets/DueForm.js	465.88 kB	0%

coderabbitai

Actionable comments posted: 6

📜 Review details

Configuration used: Repository: TaskRatchet/coderabbit/.coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1bc9fcb and 5a76a11.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (4)

__mocks__/@clerk/clerk-react.tsx (1 hunks)
package.json (1 hunks)
src/App.tsx (2 hunks)
src/lib/useOnClerkEvent.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (3)

📓 Common learnings

Learnt from: narthur
PR: TaskRatchet/taskratchet-web#166
File: global-setup.ts:25-25
Timestamp: 2025-08-12T21:38:27.063Z
Learning: The project uses __mocks__/clerk/clerk-react.tsx to provide mock implementations for Clerk authentication components and hooks instead of inline mocking in global-setup.ts. The mock file exports ClerkProvider, Protect, RedirectToSignIn, SignedIn, UserButton components and useUser/useClerk hooks with test-friendly return values.

📚 Learning: 2025-08-12T21:38:27.063Z

Learnt from: narthur
PR: TaskRatchet/taskratchet-web#166
File: global-setup.ts:25-25
Timestamp: 2025-08-12T21:38:27.063Z
Learning: The project uses __mocks__/clerk/clerk-react.tsx to provide mock implementations for Clerk authentication components and hooks instead of inline mocking in global-setup.ts. The mock file exports ClerkProvider, Protect, RedirectToSignIn, SignedIn, UserButton components and useUser/useClerk hooks with test-friendly return values.

Applied to files:

__mocks__/@clerk/clerk-react.tsx
src/App.tsx
src/lib/useOnClerkEvent.ts

📚 Learning: 2025-08-16T19:53:45.147Z

Learnt from: narthur
PR: TaskRatchet/taskratchet-web#166
File: src/components/organisms/NavBar.tsx:40-49
Timestamp: 2025-08-16T19:53:45.147Z
Learning: In the TaskRatchet project, NavBar.spec.tsx still uses the old useSession mock and doesn't test the new Clerk authentication integration with useUser and useClerk hooks, so tests pass even when the Clerk mock returns session: null.

Applied to files:

__mocks__/@clerk/clerk-react.tsx

🧬 Code graph analysis (2)

src/App.tsx (1)

src/lib/useOnClerkEvent.ts (1)

useOnClerkEvent (5-15)

src/lib/useOnClerkEvent.ts (1)

__mocks__/@clerk/clerk-react.tsx (1)

useClerk (32-35)

__mocks__/@clerk/clerk-react.tsx

package.json

src/App.tsx

src/lib/useOnClerkEvent.ts

invalidate query cache on auth change

3f79aaf

narthur deployed to payment-method-prompt - tr-web PR #184 September 29, 2025 19:04 — with Render View deployment

fix tests

5a76a11

narthur deployed to payment-method-prompt - tr-web PR #184 September 29, 2025 19:06 — with Render View deployment

coderabbitai bot reviewed Sep 29, 2025

View reviewed changes

useCallback with onClerkEvent

6247e15

narthur temporarily deployed to payment-method-prompt - tr-web PR #184 September 29, 2025 19:22 — with Render Destroyed

This was referenced Sep 29, 2025

Clear query cache on sign-out to prevent stale cross-user data #185

Open

Refactor useOnClerkEvent hook for better stability and API safety #186

Open

narthur merged commit bc094b8 into master Sep 29, 2025
13 of 14 checks passed

coderabbitai bot mentioned this pull request Sep 30, 2025

fix clerk provider usage #187

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

invalidate query cache on auth change #184

invalidate query cache on auth change #184

Uh oh!

narthur commented Sep 29, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Sep 29, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Sep 29, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Sep 29, 2025 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

invalidate query cache on auth change #184

invalidate query cache on auth change #184

Uh oh!

Conversation

narthur commented Sep 29, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Sep 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Pre-merge checks and finishing touches

Uh oh!

github-actions bot commented Sep 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Outdated dependencies

Uh oh!

github-actions bot commented Sep 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Stats

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

narthur commented Sep 29, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Sep 29, 2025 •

edited

Loading

github-actions bot commented Sep 29, 2025 •

edited

Loading

github-actions bot commented Sep 29, 2025 •

edited

Loading