[SDK] Fix caching issue with headless UI when custom resolvers are used

thirdweb-dev · Dec 9, 2024 · 63e00b0 · 63e00b0
1 parent f69d1aa
commit 63e00b0
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 5 deletions.
diff --git a/packages/thirdweb/src/react/web/ui/prebuilt/Chain/icon.tsx b/packages/thirdweb/src/react/web/ui/prebuilt/Chain/icon.tsx
@@ -119,7 +119,18 @@ export function ChainIcon({
 }: ChainIconProps) {
   const { chain } = useChainContext();
   const iconQuery = useQuery({
-    queryKey: ["_internal_chain_icon_", chain.id] as const,
+    queryKey: [
+      "_internal_chain_icon_",
+      chain.id,
+      {
+        resolver:
+          typeof iconResolver === "string"
+            ? iconResolver
+            : typeof iconResolver === "function"
+              ? iconResolver.toString()
+              : undefined,
+      },
+    ] as const,
     queryFn: async () => {
       if (typeof iconResolver === "string") {
         return iconResolver;

diff --git a/packages/thirdweb/src/react/web/ui/prebuilt/Chain/name.tsx b/packages/thirdweb/src/react/web/ui/prebuilt/Chain/name.tsx
@@ -155,7 +155,18 @@ export function ChainName({
 }: ChainNameProps) {
   const { chain } = useChainContext();
   const nameQuery = useQuery({
-    queryKey: ["_internal_chain_name_", chain.id] as const,
+    queryKey: [
+      "_internal_chain_name_",
+      chain.id,
+      {
+        resolver:
+          typeof nameResolver === "string"
+            ? nameResolver
+            : typeof nameResolver === "function"
+              ? nameResolver.toString()
+              : undefined,
+      },
+    ] as const,
     queryFn: async () => {
       if (typeof nameResolver === "string") {
         return nameResolver;

diff --git a/packages/thirdweb/src/react/web/ui/prebuilt/Token/icon.tsx b/packages/thirdweb/src/react/web/ui/prebuilt/Token/icon.tsx
@@ -115,7 +115,19 @@ export function TokenIcon({
 }: TokenIconProps) {
   const { address, client, chain } = useTokenContext();
   const iconQuery = useQuery({
-    queryKey: ["_internal_token_icon_", chain.id, address] as const,
+    queryKey: [
+      "_internal_token_icon_",
+      chain.id,
+      address,
+      {
+        resolver:
+          typeof iconResolver === "string"
+            ? iconResolver
+            : typeof iconResolver === "function"
+              ? iconResolver.toString()
+              : undefined,
+      },
+    ] as const,
     queryFn: async () => {
       if (typeof iconResolver === "string") {
         return iconResolver;

diff --git a/packages/thirdweb/src/react/web/ui/prebuilt/Token/name.tsx b/packages/thirdweb/src/react/web/ui/prebuilt/Token/name.tsx
@@ -157,7 +157,19 @@ export function TokenName({
 }: TokenNameProps) {
   const { address, client, chain } = useTokenContext();
   const nameQuery = useQuery({
-    queryKey: ["_internal_token_name_", chain.id, address] as const,
+    queryKey: [
+      "_internal_token_name_",
+      chain.id,
+      address,
+      {
+        resolver:
+          typeof nameResolver === "string"
+            ? nameResolver
+            : typeof nameResolver === "function"
+              ? nameResolver.toString()
+              : undefined,
+      },
+    ] as const,
     queryFn: async () => {
       if (typeof nameResolver === "string") {
         return nameResolver;

diff --git a/packages/thirdweb/src/react/web/ui/prebuilt/Token/symbol.tsx b/packages/thirdweb/src/react/web/ui/prebuilt/Token/symbol.tsx
@@ -154,7 +154,19 @@ export function TokenSymbol({
 }: TokenSymbolProps) {
   const { address, client, chain } = useTokenContext();
   const symbolQuery = useQuery({
-    queryKey: ["_internal_token_symbol_", chain.id, address] as const,
+    queryKey: [
+      "_internal_token_symbol_",
+      chain.id,
+      address,
+      {
+        resolver:
+          typeof symbolResolver === "string"
+            ? symbolResolver
+            : typeof symbolResolver === "function"
+              ? symbolResolver.toString()
+              : undefined,
+      },
+    ] as const,
     queryFn: async () => {
       if (typeof symbolResolver === "string") {
         return symbolResolver;