feat: On connection switch force a re-render by using react-key property based on connection id.

Author: brunomenezes

apps/dave/src/providers/DataProvider.tsx

@@ -1,22 +1,22 @@
 import { CartesiProvider } from "@cartesi/wagmi";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import type { FC, PropsWithChildren } from "react";
+import { useMemo, type FC, type PropsWithChildren } from "react";
 import { useSelectedNodeConnection } from "../components/connection/hooks";
 import queryClient from "./queryClient";
 import WalletProvider from "./WalletProvider";
 
-const newQueryClient = new QueryClient();
-
 const DataProvider: FC<PropsWithChildren> = ({ children }) => {
     const selectedConnection = useSelectedNodeConnection();
-
-    const client =
-        selectedConnection?.type === "system_mock"
-            ? queryClient
-            : newQueryClient;
+    const client = useMemo(
+        () =>
+            selectedConnection?.type === "system_mock"
+                ? queryClient
+                : new QueryClient(),
+        [selectedConnection?.type],
+    );
 
     return (
-        <QueryClientProvider client={client}>
+        <QueryClientProvider client={client} key={selectedConnection?.id}>
             <CartesiProvider rpcUrl={selectedConnection?.url ?? ""}>
                 <WalletProvider>{children}</WalletProvider>
             </CartesiProvider>