Router refresh fix + tRPC improvement (#310)

* make sure router refresh happens after nav Signed-off-by: Aaron Sutula <[email protected]> * use trpc invalidate instead of refetch Signed-off-by: Aaron Sutula <[email protected]> --------- Signed-off-by: Aaron Sutula <[email protected]> Co-authored-by: Aaron Sutula <[email protected]>
tablelandnetwork · Aug 12, 2024 · 8e4f983 · 8e4f983 · vercel · Aug 12, 2024
1 parent 63f4875
commit 8e4f983
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 44 deletions.
diff --git a/packages/web/app/[org]/(org)/_components/new-project-button.tsx b/packages/web/app/[org]/(org)/_components/new-project-button.tsx
@@ -22,8 +22,8 @@ export default function NewProjectButton({
         </Button>
       }
       onSuccess={(project) => {
-        router.refresh();
         router.push(`/${org.slug}/${project.slug}`);
+        router.refresh();
       }}
     ></NewProjectForm>
   );

diff --git a/packages/web/app/[org]/(org)/settings/_components/edit-org.tsx b/packages/web/app/[org]/(org)/settings/_components/edit-org.tsx
@@ -48,8 +48,8 @@ export default function EditOrg({
   );
   const updateOrg = api.orgs.updateOrg.useMutation({
     onSuccess: (org) => {
-      router.refresh();
       router.replace(`/${org.slug}/settings`);
+      router.refresh();
     },
   });
 

diff --git a/packages/web/app/[org]/[project]/[env]/[table]/_components/deploy-button.tsx b/packages/web/app/[org]/[project]/[env]/[table]/_components/deploy-button.tsx
@@ -22,16 +22,16 @@ export default function DeployButton({
   const [openExecDeployModal, setOpenExecDeployModal] = useState(false);
   const router = useRouter();
 
-  const deploymentsQuery = api.deployments.deploymentsByEnvironmentId.useQuery({
-    environmentId: env.id,
-  });
+  const utils = api.useUtils();
 
   const handleDeploy = () => {
     setOpenExecDeployModal(true);
   };
 
   const onSuccessfulDeploy = (deployment: schema.Deployment) => {
-    void deploymentsQuery.refetch();
+    void utils.deployments.deploymentsByEnvironmentId.invalidate({
+      environmentId: env.id,
+    });
     router.refresh();
   };
 

diff --git a/packages/web/app/[org]/[project]/settings/_components/env.tsx b/packages/web/app/[org]/[project]/settings/_components/env.tsx
@@ -35,18 +35,22 @@ export default function Env({
   const router = useRouter();
   const [showForm, setShowForm] = useState(false);
   const [query, setQuery] = useState(env.name);
+
+  const utils = api.useUtils();
+
   const nameAvailable = api.environments.nameAvailable.useQuery(
     query !== env.name
       ? { projectId: env.projectId, name: query, envId: env.id }
       : skipToken,
     { retry: false },
   );
-  const envPreference =
-    api.environments.environmentPreferenceForProject.useQuery({ projectId });
+
   const updateEnv = api.environments.updateEnvironment.useMutation({
     onSuccess: () => {
       router.refresh();
-      void envPreference.refetch();
+      void utils.environments.environmentPreferenceForProject.invalidate({
+        projectId,
+      });
       setShowForm(false);
       form.reset();
     },

diff --git a/packages/web/app/[org]/[project]/settings/_components/envs.tsx b/packages/web/app/[org]/[project]/settings/_components/envs.tsx
@@ -31,20 +31,17 @@ export default function Envs({
     schema.Environment | undefined
   >();
 
-  const projectsEnvs = api.environments.projectEnvironments.useQuery({
-    projectId: project.id,
-  });
-
-  const envPreference =
-    api.environments.environmentPreferenceForProject.useQuery({
-      projectId: project.id,
-    });
+  const utils = api.useUtils();
 
   const deleteEnv = api.environments.deleteEnvironment.useMutation({
     onSuccess: () => {
       router.refresh();
-      void projectsEnvs.refetch();
-      void envPreference.refetch();
+      void utils.environments.projectEnvironments.invalidate({
+        projectId: project.id,
+      });
+      void utils.environments.environmentPreferenceForProject.invalidate({
+        projectId: project.id,
+      });
       setEnvToDelete(undefined);
     },
   });

diff --git a/packages/web/app/_components/primary-header-item.tsx b/packages/web/app/_components/primary-header-item.tsx
@@ -77,8 +77,8 @@ export default function PrimaryHeaderItem({
   }
 
   function onNewOrgSuccess(org: schema.Org) {
-    router.refresh();
     router.push(`/${org.slug}`);
+    router.refresh();
   }
 
   function onProjectSelected(project: schema.Project) {
@@ -92,8 +92,8 @@ export default function PrimaryHeaderItem({
 
   function onNewProjectSuccess(project: schema.Project) {
     if (!org) return;
-    router.refresh();
     router.push(`/${org.slug}/${project.slug}`);
+    router.refresh();
   }
 
   function onEnvironmentSelected(selectedEnv: schema.Environment) {
@@ -108,8 +108,8 @@ export default function PrimaryHeaderItem({
 
   function onNewEnvSuccess(newEnv: schema.Environment) {
     if (!org || !project) return;
-    router.refresh();
     navToEnv(newEnv);
+    router.refresh();
     // TODO: Set session record of this change.
   }
 

diff --git a/packages/web/components/profile.tsx b/packages/web/components/profile.tsx
@@ -101,11 +101,11 @@ export default function Profile({
 
   const onSignInSuccess = ({ auth }: { auth: Auth | undefined }) => {
     if (auth) {
-      router.refresh();
       setAuth(auth);
       if (!dontRedirect) {
         router.push(`/${auth.personalOrg.slug}`);
       }
+      router.refresh();
     } else {
       setShowRegisterDialog(true);
     }
@@ -116,12 +116,12 @@ export default function Profile({
   };
 
   const onRegisterSuccess = (auth: Auth) => {
-    router.refresh();
     setAuth(auth);
     setShowRegisterDialog(false);
     if (!dontRedirect) {
       router.push(`/${auth.personalOrg.slug}`);
     }
+    router.refresh();
   };
 
   return (

diff --git a/packages/web/components/table-menu.tsx b/packages/web/components/table-menu.tsx
@@ -4,7 +4,6 @@ import { Ellipsis } from "lucide-react";
 import { usePathname, useRouter } from "next/navigation";
 import { useState } from "react";
 import { type Schema, type schema } from "@tableland/studio-store";
-import { skipToken } from "@tanstack/react-query";
 import { type RouterOutputs } from "@tableland/studio-api";
 import { Button } from "./ui/button";
 import NewDefForm from "./new-def-form";
@@ -56,22 +55,17 @@ export default function TableMenu({
   const router = useRouter();
   const pathname = usePathname();
 
-  const deploymentsQuery = api.deployments.deploymentsByEnvironmentId.useQuery(
-    env ? { environmentId: env.id } : skipToken,
-  );
-
-  const defsQuery = api.defs.projectDefs.useQuery(
-    project ? { projectId: project.id } : skipToken,
-  );
+  const utils = api.useUtils();
 
   const onEditDefSuccess = (updatedDef: schema.Def) => {
+    if (!project) return;
     if (def?.slug !== updatedDef.slug) {
       router.replace(
-        `/${org!.slug}/${project!.slug}/${env!.slug}/${updatedDef.slug}`,
+        `/${org!.slug}/${project.slug}/${env!.slug}/${updatedDef.slug}`,
       );
     }
     router.refresh();
-    void defsQuery.refetch();
+    void utils.defs.projectDefs.invalidate({ projectId: project.id });
   };
 
   const onDeleteTable = () => {
@@ -80,22 +74,26 @@ export default function TableMenu({
   };
 
   const onUndeployTable = () => {
-    void deploymentsQuery.refetch();
+    void utils.deployments.deploymentsByEnvironmentId.invalidate({
+      environmentId: env?.id,
+    });
     setTableSettingsOpen(false);
     setUndeployTableOpen(true);
   };
 
   const onDeleteTableSuccess = () => {
-    setDeleteTableOpen(false);
-    void defsQuery.refetch();
     if (!org || !project || !env) return;
-    router.refresh();
+    setDeleteTableOpen(false);
+    void utils.defs.projectDefs.invalidate({ projectId: project.id });
     router.replace(`/${org.slug}/${project.slug}/${env.slug}`);
+    router.refresh();
   };
 
   const onUndeployTableSuccess = () => {
     setUndeployTableOpen(false);
-    void deploymentsQuery.refetch();
+    void utils.deployments.deploymentsByEnvironmentId.invalidate({
+      environmentId: env?.id,
+    });
     router.refresh();
   };
 
@@ -145,7 +143,9 @@ export default function TableMenu({
           def={{ ...def, schema }}
           onSuccess={() => {
             router.refresh();
-            void deploymentsQuery.refetch();
+            void utils.deployments.deploymentsByEnvironmentId.invalidate({
+              environmentId: env?.id,
+            });
           }}
         />
       )}
@@ -154,26 +154,28 @@ export default function TableMenu({
         open={!!importTableFormProps}
         onOpenChange={(open) => !open && setImportTableFormProps(undefined)}
         onSuccess={(org, project, def, env) => {
-          router.refresh();
           const newPathname = `/${org.slug}/${project.slug}/${env.slug}/${def.slug}`;
           if (pathname !== newPathname) {
             router.push(newPathname);
           } else {
-            void deploymentsQuery.refetch();
+            void utils.deployments.deploymentsByEnvironmentId.invalidate({
+              environmentId: env.id,
+            });
           }
+          router.refresh();
         }}
       />
       <NewDefForm
         schemaPreset={schema}
         open={newDefFormOpen}
         onOpenChange={setNewDefFormOpen}
         onSuccess={(selectedOrg, selectedProject, def) => {
-          router.refresh();
           router.push(
             `/${selectedOrg.slug}/${selectedProject.slug}${env ? `/${env.slug}/${def.slug}` : `?table=${def.slug}`}`,
           );
+          router.refresh();
           if (selectedProject.id === project?.id) {
-            void defsQuery.refetch();
+            void utils.defs.projectDefs.invalidate({ projectId: project.id });
           }
         }}
       />