From dec8fd1545fb6e3566d415a534756b004d21e410 Mon Sep 17 00:00:00 2001 From: Arjun Komath Date: Wed, 30 Jul 2025 19:46:55 +1000 Subject: [PATCH 1/2] Fix query invalidation --- hooks/use-organization-change.tsx | 27 ++++++++------------------- 1 file changed, 8 insertions(+), 19 deletions(-) diff --git a/hooks/use-organization-change.tsx b/hooks/use-organization-change.tsx index fb8073f..18e8a52 100644 --- a/hooks/use-organization-change.tsx +++ b/hooks/use-organization-change.tsx @@ -1,33 +1,30 @@ "use client"; -import { useOrganization } from "@clerk/nextjs"; import { useQueryClient } from "@tanstack/react-query"; import { useParams } from "next/navigation"; import { useEffect, useRef } from "react"; import { useTRPC } from "@/trpc/client"; export function useOrganizationChange() { - const { organization } = useOrganization(); const queryClient = useQueryClient(); - const previousOrgId = useRef(undefined); + const previousTenant = useRef(undefined); const { tenant } = useParams(); const trpc = useTRPC(); useEffect(() => { - const currentOrgId = organization?.id; + const currentTenant = tenant as string; if ( - previousOrgId.current !== undefined && - previousOrgId.current !== currentOrgId + previousTenant.current !== undefined && + previousTenant.current !== currentTenant ) { console.log( - `Organization changed from ${previousOrgId.current} to ${currentOrgId}. Invalidating all queries.`, + `Tenant changed from ${previousTenant.current} to ${currentTenant}. Invalidating all queries.`, ); - // Clear all cached queries - queryClient.clear(); + queryClient.invalidateQueries(); } - previousOrgId.current = currentOrgId; + previousTenant.current = currentTenant; Promise.all([ queryClient.prefetchQuery(trpc.settings.getTimezone.queryOptions()), @@ -45,13 +42,5 @@ export function useOrganizationChange() { .catch((err) => { console.error(">>>>> Error prefetching essential queries", err); }); - }, [ - organization?.id, - queryClient, - trpc.user.getProjects.queryOptions, - trpc.settings.getTimezone.queryOptions, - trpc.user.getTodayData.queryOptions, - trpc.user.getNotificationsWire.queryOptions, - tenant, - ]); + }, [tenant, queryClient, trpc]); } From 3bc2144b3e62be2ebe1298b878adaac579d5a915 Mon Sep 17 00:00:00 2001 From: Arjun Komath Date: Wed, 30 Jul 2025 21:32:40 +1000 Subject: [PATCH 2/2] Fix org switcher query invalidation --- app/(dashboard)/[tenant]/layout.tsx | 25 +++++----- .../core/organization-change-handler.tsx | 12 ----- components/layout/navbar.tsx | 12 ++++- hooks/use-organization-change.tsx | 46 ------------------- 4 files changed, 21 insertions(+), 74 deletions(-) delete mode 100644 components/core/organization-change-handler.tsx delete mode 100644 hooks/use-organization-change.tsx diff --git a/app/(dashboard)/[tenant]/layout.tsx b/app/(dashboard)/[tenant]/layout.tsx index cbf839e..5055faa 100644 --- a/app/(dashboard)/[tenant]/layout.tsx +++ b/app/(dashboard)/[tenant]/layout.tsx @@ -1,12 +1,11 @@ -import { OrganizationChangeHandler } from "@/components/core/organization-change-handler"; +import { redirect } from "next/navigation"; +import { NuqsAdapter } from "nuqs/adapters/next/app"; import { ReportTimezone } from "@/components/core/report-timezone"; import { Navbar } from "@/components/layout/navbar"; import { isDatabaseReady } from "@/lib/utils/useDatabase"; import { getOwner } from "@/lib/utils/useOwner"; import { TRPCReactProvider } from "@/trpc/client"; import { caller } from "@/trpc/server"; -import { redirect } from "next/navigation"; -import { NuqsAdapter } from "nuqs/adapters/next/app"; export default async function ConsoleLayout(props: { children: React.ReactNode; @@ -29,18 +28,16 @@ export default async function ConsoleLayout(props: { return ( - - -
- -
- {props.children} -
+ +
+ +
+ {props.children} +
- -
- - + +
+ ); } diff --git a/components/core/organization-change-handler.tsx b/components/core/organization-change-handler.tsx deleted file mode 100644 index ead658b..0000000 --- a/components/core/organization-change-handler.tsx +++ /dev/null @@ -1,12 +0,0 @@ -"use client"; - -import { useOrganizationChange } from "@/hooks/use-organization-change"; - -export function OrganizationChangeHandler({ - children, -}: { - children: React.ReactNode; -}) { - useOrganizationChange(); - return <>{children}; -} diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx index dea945b..23ed00e 100644 --- a/components/layout/navbar.tsx +++ b/components/layout/navbar.tsx @@ -2,13 +2,13 @@ import { OrganizationSwitcher, UserButton } from "@clerk/nextjs"; import { dark } from "@clerk/themes"; -import { useQueries } from "@tanstack/react-query"; +import { useQueries, useQueryClient } from "@tanstack/react-query"; import { ChevronDown, HelpCircle } from "lucide-react"; import Image from "next/image"; import Link from "next/link"; import { useParams, usePathname, useRouter } from "next/navigation"; import { useTheme } from "next-themes"; -import { useMemo, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import { Button } from "@/components/ui/button"; import { DropdownMenu, @@ -46,6 +46,14 @@ export function Navbar({ notificationsWire }: { notificationsWire: string }) { const trpc = useTRPC(); + const queryClient = useQueryClient(); + + useEffect(() => { + queryClient.invalidateQueries({ + refetchType: "all", + }); + }, [queryClient]); + const [{ data: projects = [] }, { data: tasklists = [] }] = useQueries({ queries: [ trpc.user.getProjects.queryOptions({ diff --git a/hooks/use-organization-change.tsx b/hooks/use-organization-change.tsx deleted file mode 100644 index 18e8a52..0000000 --- a/hooks/use-organization-change.tsx +++ /dev/null @@ -1,46 +0,0 @@ -"use client"; - -import { useQueryClient } from "@tanstack/react-query"; -import { useParams } from "next/navigation"; -import { useEffect, useRef } from "react"; -import { useTRPC } from "@/trpc/client"; - -export function useOrganizationChange() { - const queryClient = useQueryClient(); - const previousTenant = useRef(undefined); - const { tenant } = useParams(); - const trpc = useTRPC(); - - useEffect(() => { - const currentTenant = tenant as string; - - if ( - previousTenant.current !== undefined && - previousTenant.current !== currentTenant - ) { - console.log( - `Tenant changed from ${previousTenant.current} to ${currentTenant}. Invalidating all queries.`, - ); - queryClient.invalidateQueries(); - } - - previousTenant.current = currentTenant; - - Promise.all([ - queryClient.prefetchQuery(trpc.settings.getTimezone.queryOptions()), - queryClient.prefetchQuery(trpc.user.getTodayData.queryOptions()), - queryClient.prefetchQuery(trpc.user.getNotificationsWire.queryOptions()), - queryClient.prefetchQuery( - trpc.user.getProjects.queryOptions({ - statuses: ["active"], - }), - ), - ]) - .then(() => { - console.log(">>>>> Prefetched essential queries for tenant", tenant); - }) - .catch((err) => { - console.error(">>>>> Error prefetching essential queries", err); - }); - }, [tenant, queryClient, trpc]); -}