feat: Migrate to @tanstack/react-query and invalidate cache on domain purchase

package.json

@@ -53,6 +53,7 @@
     "@solana/wallet-adapter-react": "0.15.35",
     "@solana/wallet-adapter-react-ui": "0.9.34",
     "@solana/web3.js": "1.87.6",
+    "@tanstack/react-query": "^5.18.1",
     "axios": "1.6.7",
     "buffer": "6.0.3",
     "expo": "49.0.18",
@@ -65,7 +66,6 @@
     "expo-status-bar": "~1.6.0",
     "lodash": "4.17.21",
     "react": "18.2.0",
-    "react-async-hook": "4.0.0",
     "react-dom": "18.2.0",
     "react-error-overlay": "6.0.11",
     "react-native": "0.72.6",

src/App.tsx

@@ -37,6 +37,8 @@ import { CreateSubdomainModal } from "./components/CreateSubdomainModal";
 import { SuccessSubdomainModal } from "./components/SuccessSubdomainModal";
 import { t } from "@lingui/macro";
 import { i18n } from "@lingui/core";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { queryClient } from "./lib";
 import {
   LanguageProvider,
   useLanguageContext,
@@ -201,19 +203,21 @@ function App() {
         https://github.com/gorhom/react-native-bottom-sheet/issues/1389
       */}
       <GestureHandlerRootView style={{ flex: 1 }}>
-        <SolanaProvider>
-          <RecoilRoot>
-            <NavigationContainer>
-              <LanguageProvider i18n={i18n}>
-                <StatusModalProvider>
-                  <ModalProvider stack={stackModal}>
-                    <TabNavigator />
-                  </ModalProvider>
-                </StatusModalProvider>
-              </LanguageProvider>
-            </NavigationContainer>
-          </RecoilRoot>
-        </SolanaProvider>
+        <QueryClientProvider client={queryClient}>
+          <SolanaProvider>
+            <RecoilRoot>
+              <NavigationContainer>
+                <LanguageProvider i18n={i18n}>
+                  <StatusModalProvider>
+                    <ModalProvider stack={stackModal}>
+                      <TabNavigator />
+                    </ModalProvider>
+                  </StatusModalProvider>
+                </LanguageProvider>
+              </NavigationContainer>
+            </RecoilRoot>
+          </SolanaProvider>
+        </QueryClientProvider>
       </GestureHandlerRootView>
     </ErrorBoundary>
   );

src/components/ProfileBlock.tsx

@@ -10,7 +10,6 @@ import tw from "@src/utils/tailwind";
 import { abbreviate } from "@src/utils/abbreviate";
 import { useWallet } from "@src/hooks/useWallet";
 import { useFavoriteDomain } from "@src/hooks/useFavoriteDomain";
-import { useProfilePic } from "@bonfida/sns-react";
 
 interface ProfileBlockProps {
   children?: ReactNode;
@@ -66,7 +65,7 @@ export const ProfileBlock = ({
               openModal("EditPicture", {
                 currentPic: picRecord,
                 domain: domain,
-                setAsFav: !favorite.result?.reverse,
+                setAsFav: !favorite.data?.reverse,
                 refresh: onNewPicUploaded,
               })
             }

src/hooks/useDomainInfo.tsx

@@ -1,11 +1,13 @@
 import { isTokenized } from "@bonfida/name-tokenizer";
-import { useSolanaConnection } from "../hooks/xnft-hooks";
+import { useQuery } from "@tanstack/react-query";
 import { NameRegistryState, getDomainKeySync } from "@bonfida/spl-name-service";
-import { useAsync } from "react-async-hook";
+import { QueryKeys } from "@src/lib";
+import { useSolanaConnection } from "../hooks/xnft-hooks";
 
 export const useDomainInfo = (domain: string) => {
   const connection = useSolanaConnection();
-  const fn = async () => {
+
+  const queryFn = async () => {
     if (!connection) return;
     const { pubkey } = getDomainKeySync(domain);
     const { registry, nftOwner } = await NameRegistryState.retrieve(
@@ -20,5 +22,10 @@ export const useDomainInfo = (domain: string) => {
       isTokenized: _isTokenized,
     };
   };
-  return useAsync(fn, [!!connection, domain]);
+
+  return useQuery({
+    queryKey: [QueryKeys.domainInfo, domain],
+    queryFn,
+    staleTime: 1000 * 30,
+  });
 };

src/hooks/useDomains.tsx

@@ -1,5 +1,6 @@
-import { useAsync } from "react-async-hook";
+import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
+import { QueryKeys } from "@src/lib";
 
 export interface Result {
   key: string;
@@ -12,15 +13,20 @@ export interface Response {
 }
 
 const get = async (key: string | undefined | null) => {
-  if (!key) return;
+  if (!key) return [];
   const { data }: { data: Response } = await axios.get(
     `https://sns-sdk-proxy.bonfida.workers.dev/domains/${key}`,
   );
-  if (data.s !== "ok") return;
+  if (data.s !== "ok") return [];
   data.result.sort((a, b) => a.domain.localeCompare(b.domain));
   return data.result;
 };
 
 export const useDomains = (owner: string | null | undefined) => {
-  return useAsync(get, [owner]);
+  return useQuery({
+    queryKey: [QueryKeys.domainsList, owner],
+    queryFn: () => get(owner),
+    enabled: !!owner,
+    staleTime: 1000 * 30,
+  });
 };

src/hooks/useFavoriteDomain.tsx

@@ -1,19 +1,24 @@
 import { getFavoriteDomain } from "@bonfida/spl-name-service";
 import { PublicKey } from "@solana/web3.js";
 import { useSolanaConnection } from "./xnft-hooks";
-import { useAsync } from "react-async-hook";
 import { useWallet } from "./useWallet";
+import { QueryKeys } from "@src/lib";
+import { useQuery } from "@tanstack/react-query";
 
 export const useFavoriteDomain = (owner: string | undefined) => {
   const connection = useSolanaConnection();
   const { publicKey } = useWallet();
   owner = owner || publicKey?.toBase58();
 
-  const fn = async () => {
+  const queryFn = async () => {
     if (!connection || !owner) return;
     const fav = await getFavoriteDomain(connection, new PublicKey(owner));
     return fav;
   };
 
-  return useAsync(fn, [owner, !!connection]);
+  return useQuery({
+    queryKey: [QueryKeys.favoriteDomain, owner],
+    queryFn,
+    staleTime: 1000 * 30,
+  });
 };

src/hooks/usePyth.tsx

@@ -3,7 +3,7 @@ import { PublicKey } from "@solana/web3.js";
 import { Connection } from "@solana/web3.js";
 import { tokenList } from "../utils/tokens/popular-tokens";
 import { useSolanaConnection } from "./xnft-hooks";
-import { useAsync } from "react-async-hook";
+import { useQuery } from "@tanstack/react-query";
 
 export interface Pyth {
   price: number;
@@ -39,7 +39,8 @@ const getPrice = async (connection: Connection, feed: PublicKey) => {
 
 export const usePyth = () => {
   const connection = useSolanaConnection();
-  const fn = async () => {
+
+  const queryFn = async () => {
     if (!connection) return;
     const results = new Map<string, Pyth>();
     for (let x of FEEDS.keys()) {
@@ -52,5 +53,10 @@ export const usePyth = () => {
 
     return results;
   };
-  return useAsync(fn, [!!connection]);
+
+  return useQuery({
+    queryKey: [],
+    queryFn,
+    staleTime: 1000 * 5,
+  });
 };

src/hooks/useRecords.tsx

@@ -3,7 +3,6 @@ import {
   ETH_ROA_RECORDS,
   GUARDIANS,
   Record,
-  RecordResult,
   SELF_SIGNED,
 } from "@bonfida/spl-name-service";
 import { useRecordsV2 } from "@bonfida/sns-react";
@@ -76,7 +75,7 @@ export const useRecords = (domain: string | undefined, records: Record[]) => {
 
   const execute: ExecuteFunction<void> = useCallback(async () => {
     try {
-      await domainInfo.execute();
+      await domainInfo.refetch();
       await res.execute();
     } catch (error) {
       console.error(error);
@@ -90,11 +89,11 @@ export const useRecords = (domain: string | undefined, records: Record[]) => {
   });
 
   useEffect(() => {
-    if (!res || !res.result || !domainInfo || !domainInfo.result) {
+    if (!res || !res.result || !domainInfo || !domainInfo.data) {
       return setData({
         execute,
         result: [],
-        loading: res.loading || domainInfo.loading,
+        loading: res.loading || domainInfo.isLoading,
       });
     }
 
@@ -108,7 +107,7 @@ export const useRecords = (domain: string | undefined, records: Record[]) => {
       const header = r?.retrievedRecord.header;
       const stalenessId = r?.retrievedRecord.getStalenessId();
       const roaId = r?.retrievedRecord.getRoAId();
-      const owner = new PublicKey(domainInfo.result.owner);
+      const owner = new PublicKey(domainInfo.data.owner);
 
       // Check staleness
       if (
@@ -144,16 +143,16 @@ export const useRecords = (domain: string | undefined, records: Record[]) => {
     setData({
       result: _data,
       execute,
-      loading: domainInfo.loading || res.loading,
+      loading: domainInfo.isLoading || res.loading,
     });
   }, [
     res.loading,
     JSON.stringify(res.result?.map((e) => e?.deserializedContent)),
-    domainInfo.result?.owner,
-    domainInfo.result?.isTokenized,
+    domainInfo.data?.owner,
+    domainInfo.data?.isTokenized,
     domain,
     ...records,
-    domainInfo.loading,
+    domainInfo.isLoading,
   ]);
 
   return data;

src/hooks/useSubdomains.tsx

@@ -1,4 +1,3 @@
-import { useAsync } from "react-async-hook";
 import {
   NAME_PROGRAM_ID,
   findSubdomains,
@@ -11,6 +10,8 @@ import {
 } from "@bonfida/spl-name-service";
 import { useSolanaConnection } from "./xnft-hooks";
 import { AccountInfo, PublicKey } from "@solana/web3.js";
+import { useQuery } from "@tanstack/react-query";
+import { QueryKeys } from "@src/lib";
 
 export interface SubdomainResult {
   key: string;
@@ -20,7 +21,7 @@ export interface SubdomainResult {
 export const useSubdomains = (domain: string) => {
   const connection = useSolanaConnection();
 
-  const fn = async () => {
+  const queryFn = async () => {
     if (!connection) return;
     const { pubkey: key } = getDomainKeySync(domain);
 
@@ -30,7 +31,11 @@ export const useSubdomains = (domain: string) => {
     return subdomains;
   };
 
-  return useAsync(fn, [!!connection, domain]);
+  return useQuery({
+    queryKey: [QueryKeys.subdomainsFromUser, domain],
+    queryFn,
+    staleTime: 1000 * 30,
+  });
 };
 
 const deserializeReverseSub = (
@@ -44,7 +49,7 @@ const deserializeReverseSub = (
 export const useSubdomainsFromUser = (owner: string) => {
   const connection = useSolanaConnection();
 
-  const fn = async () => {
+  const queryFn = async () => {
     if (!connection) return;
     const accounts = await connection.getProgramAccounts(NAME_PROGRAM_ID, {
       filters: [{ memcmp: { offset: 32, bytes: owner } }],
@@ -111,5 +116,9 @@ export const useSubdomainsFromUser = (owner: string) => {
     return result;
   };
 
-  return useAsync(fn, [!!connection, owner]);
+  return useQuery({
+    queryKey: [QueryKeys.subdomainsFromUser, owner],
+    queryFn,
+    staleTime: 1000 * 30,
+  });
 };