From 3f908397445a2c9625104f2dbcd1afea8478b282 Mon Sep 17 00:00:00 2001
From: Quentin Gliech <quenting@element.io>
Date: Mon, 12 Feb 2024 12:17:54 +0100
Subject: [PATCH] Replace remaining atomWithQuery with urql except paginated
 lists

---
 .../SessionDetail/SessionDetail.tsx           | 22 ++-----------------
 frontend/src/components/UserGreeting.tsx      | 15 ++-----------
 2 files changed, 4 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/SessionDetail/SessionDetail.tsx b/frontend/src/components/SessionDetail/SessionDetail.tsx
index afa36fbf0..dcd3946fc 100644
--- a/frontend/src/components/SessionDetail/SessionDetail.tsx
+++ b/frontend/src/components/SessionDetail/SessionDetail.tsx
@@ -13,11 +13,8 @@
 // limitations under the License.
 
 import { Alert } from "@vector-im/compound-web";
-import { useAtomValue } from "jotai";
-import { atomFamily } from "jotai/utils";
-import { atomWithQuery } from "jotai-urql";
-import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { useQuery } from "urql";
 
 import { graphql } from "../../gql";
 import { Link } from "../../routing";
@@ -35,17 +32,6 @@ const QUERY = graphql(/* GraphQL */ `
   }
 `);
 
-const sessionFamily = atomFamily(
-  ({ userId, deviceId }: { userId: string; deviceId: string }) => {
-    const sessionQueryAtom = atomWithQuery({
-      query: QUERY,
-      getVariables: () => ({ userId, deviceId }),
-    });
-
-    return sessionQueryAtom;
-  },
-);
-
 // A type-safe way to ensure we've handled all session types
 const unknownSessionType = (type: never): never => {
   throw new Error(`Unknown session type: ${type}`);
@@ -55,11 +41,7 @@ const SessionDetail: React.FC<{
   deviceId: string;
   userId: string;
 }> = ({ deviceId, userId }) => {
-  const sessionFamilyAtomWithProps = useMemo(
-    () => sessionFamily({ deviceId, userId }),
-    [deviceId, userId],
-  );
-  const result = useAtomValue(sessionFamilyAtomWithProps);
+  const [result] = useQuery({ query: QUERY, variables: { deviceId, userId } });
   const { t } = useTranslation();
 
   const session = result.data?.session;
diff --git a/frontend/src/components/UserGreeting.tsx b/frontend/src/components/UserGreeting.tsx
index 31c98b5e5..a47fd5d2f 100644
--- a/frontend/src/components/UserGreeting.tsx
+++ b/frontend/src/components/UserGreeting.tsx
@@ -13,10 +13,8 @@
 // limitations under the License.
 
 import { Heading, Text, Avatar } from "@vector-im/compound-web";
-import { useAtomValue } from "jotai";
-import { atomFamily } from "jotai/utils";
-import { atomWithQuery } from "jotai-urql";
 import { useTranslation } from "react-i18next";
+import { useQuery } from "urql";
 
 import { graphql } from "../gql";
 
@@ -38,17 +36,8 @@ const QUERY = graphql(/* GraphQL */ `
   }
 `);
 
-export const userGreetingFamily = atomFamily((userId: string) => {
-  const userGreeting = atomWithQuery({
-    query: QUERY,
-    getVariables: () => ({ userId }),
-  });
-
-  return userGreeting;
-});
-
 const UserGreeting: React.FC<{ userId: string }> = ({ userId }) => {
-  const result = useAtomValue(userGreetingFamily(userId));
+  const [result] = useQuery({ query: QUERY, variables: { userId } });
   const { t } = useTranslation();
 
   if (result.data?.user) {