invalidate query cache on auth change

__mocks__/@clerk/clerk-react.tsx

@@ -31,4 +31,5 @@ export const useUser = vi.fn(() => ({
 
 export const useClerk = vi.fn(() => ({
 	session: null,
+	addListener: vi.fn(() => vi.fn()),
 }));

package.json

@@ -38,6 +38,7 @@
     "react-toastify": "^10.0.6"
   },
   "devDependencies": {
+    "@clerk/types": "^4.89.0",
     "@eslint/compat": "^1.3.2",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.33.0",

src/App.tsx

@@ -8,7 +8,7 @@ import {
 } from '@clerk/clerk-react';
 import { dark } from '@clerk/themes';
 import { Alert, Box, Container, Link, Stack } from '@mui/material';
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { QueryClientProvider } from 'react-query';
 import {
 	BrowserRouter as Router,
@@ -27,6 +27,7 @@ import Settings from './components/pages/Settings';
 import Tasks from './components/pages/Tasks';
 import * as browser from './lib/browser';
 import getQueryClient from './lib/getQueryClient';
+import { useOnClerkEvent } from './lib/useOnClerkEvent';
 
 const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
 
@@ -40,6 +41,12 @@ export function App(): JSX.Element {
 	const location = useLocation();
 	const queryClient = getQueryClient();
 
+	const onClerkEvent = useCallback(() => {
+		void queryClient.invalidateQueries();
+	}, [queryClient]);
+
+	useOnClerkEvent(onClerkEvent);
+
 	const handleTodayClick = () => {
 		setLastToday(browser.getNowDate());
 	};

src/lib/useOnClerkEvent.ts

@@ -0,0 +1,15 @@
+import { useClerk } from '@clerk/clerk-react';
+import type { ListenerCallback } from '@clerk/types';
+import { useEffect } from 'react';
+
+export function useOnClerkEvent(callback: ListenerCallback) {
+	const clerk = useClerk();
+
+	useEffect(() => {
+		if (!clerk) return;
+		const unsubscribe = clerk.addListener(({ user, session, client }) => {
+			callback({ user, session, client });
+		});
+		return unsubscribe;
+	}, [clerk, callback]);
+}