MystenLabs · williamrobertson13 · Oct 24, 2023 · Oct 19, 2023 · Oct 19, 2023 · Oct 19, 2023
diff --git a/.changeset/khaki-monkeys-thank.md b/.changeset/khaki-monkeys-thank.md
@@ -0,0 +1,6 @@
+---
+'@mysten/create-dapp': minor
+'@mysten/dapp-kit': minor
+---
+
+Upgrade dapp-kit and the scaffold applications to react-query v5
@@ -30,7 +30,7 @@
 		"@mysten/kiosk": "workspace:*",
 		"@mysten/sui.js": "workspace:*",
 		"@sentry/react": "^7.59.2",
-		"@tanstack/react-query": "^4.29.25",
+		"@tanstack/react-query": "^5.0.0",
 		"bignumber.js": "^9.1.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",

@@ -87,7 +87,7 @@ export function useCoinMetadata(coinType?: string | null) {
 		retry: false,
 		enabled: !!coinType,
 		staleTime: Infinity,
-		cacheTime: 24 * 60 * 60 * 1000,
+		gcTime: 24 * 60 * 60 * 1000,
 	});
 }
 

@@ -3,33 +3,27 @@
 
 import { useSuiClient } from '@mysten/dapp-kit';
 import { PaginatedCoins } from '@mysten/sui.js/client';
-import { useInfiniteQuery, UseInfiniteQueryResult } from '@tanstack/react-query';
+import { useInfiniteQuery } from '@tanstack/react-query';
 
 const MAX_COINS_PER_REQUEST = 10;
 
 export function useGetCoins(
 	coinType: string,
 	address?: string | null,
 	maxCoinsPerRequest = MAX_COINS_PER_REQUEST,
-): UseInfiniteQueryResult<PaginatedCoins> {
+) {
 	const client = useSuiClient();
-	return useInfiniteQuery(
-		['get-coins', address, coinType, maxCoinsPerRequest],
-		({ pageParam }) =>
+	return useInfiniteQuery<PaginatedCoins>({
+		queryKey: ['get-coins', address, coinType, maxCoinsPerRequest],
+		initialPageParam: null,
+		getNextPageParam: ({ hasNextPage, nextCursor }) => (hasNextPage ? nextCursor : null),
+		queryFn: ({ pageParam }) =>
 			client.getCoins({
 				owner: address!,
 				coinType,
-				cursor: pageParam ? pageParam.cursor : null,
+				cursor: pageParam as string | null,
 				limit: maxCoinsPerRequest,
 			}),
-		{
-			getNextPageParam: ({ hasNextPage, nextCursor }) =>
-				hasNextPage
-					? {
-							cursor: nextCursor,
-					  }
-					: false,
-			enabled: !!address,
-		},
-	);
+		enabled: !!address,
+	});
 }
@@ -7,7 +7,7 @@ import { useQuery, type UseQueryOptions } from '@tanstack/react-query';
 
 type UseGetDelegatedStakesOptions = {
 	address: string;
-} & UseQueryOptions<DelegatedStake[], Error>;
+} & Omit<UseQueryOptions<DelegatedStake[], Error>, 'queryKey' | 'queryFn'>;
 
 export function useGetDelegatedStake(options: UseGetDelegatedStakesOptions) {
 	const client = useSuiClient();

@@ -2,24 +2,24 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useSuiClient } from '@mysten/dapp-kit';
+import { DynamicFieldPage } from '@mysten/sui.js/src/client';
 import { normalizeSuiAddress } from '@mysten/sui.js/utils';
 import { useInfiniteQuery } from '@tanstack/react-query';
 
 const MAX_PAGE_SIZE = 10;
 
 export function useGetDynamicFields(parentId: string, maxPageSize = MAX_PAGE_SIZE) {
 	const client = useSuiClient();
-	return useInfiniteQuery(
-		['dynamic-fields', parentId],
-		({ pageParam = null }) =>
+	return useInfiniteQuery<DynamicFieldPage>({
+		queryKey: ['dynamic-fields', { maxPageSize, parentId }],
+		queryFn: ({ pageParam = null }) =>
 			client.getDynamicFields({
 				parentId: normalizeSuiAddress(parentId),
-				cursor: pageParam,
+				cursor: pageParam as string | null,
 				limit: maxPageSize,
 			}),
-		{
-			enabled: !!parentId,
-			getNextPageParam: ({ nextCursor, hasNextPage }) => (hasNextPage ? nextCursor : null),
-		},
-	);
+		enabled: !!parentId,
+		initialPageParam: null,
+		getNextPageParam: ({ nextCursor, hasNextPage }) => (hasNextPage ? nextCursor : null),
+	});
 }
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useSuiClient } from '@mysten/dapp-kit';
-import { type SuiObjectDataFilter } from '@mysten/sui.js/client';
+import { PaginatedObjectsResponse, type SuiObjectDataFilter } from '@mysten/sui.js/client';
 import { useInfiniteQuery } from '@tanstack/react-query';
 
 const MAX_OBJECTS_PER_REQ = 6;
@@ -13,9 +13,10 @@ export function useGetOwnedObjects(
 	maxObjectRequests = MAX_OBJECTS_PER_REQ,
 ) {
 	const client = useSuiClient();
-	return useInfiniteQuery(
-		['get-owned-objects', address, filter, maxObjectRequests],
-		({ pageParam }) =>
+	return useInfiniteQuery<PaginatedObjectsResponse>({
+		initialPageParam: null,
+		queryKey: ['get-owned-objects', address, filter, maxObjectRequests],
+		queryFn: ({ pageParam }) =>
 			client.getOwnedObjects({
 				owner: address!,
 				filter,
@@ -25,12 +26,11 @@ export function useGetOwnedObjects(
 					showDisplay: true,
 				},
 				limit: maxObjectRequests,
-				cursor: pageParam,
+				cursor: pageParam as string | null,
 			}),
-		{
-			staleTime: 10 * 1000,
-			enabled: !!address,
-			getNextPageParam: (lastPage) => (lastPage?.hasNextPage ? lastPage.nextCursor : null),
-		},
-	);
+
+		staleTime: 10 * 1000,
+		enabled: !!address,
+		getNextPageParam: ({ hasNextPage, nextCursor }) => (hasNextPage ? nextCursor : null),
+	});
 }
@@ -2,18 +2,19 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useSuiClient } from '@mysten/dapp-kit';
-import { SuiObjectDataOptions } from '@mysten/sui.js/src/client';
-import { useQuery } from '@tanstack/react-query';
+import { SuiObjectDataOptions, SuiObjectResponse } from '@mysten/sui.js/client';
+import { useQuery, UseQueryOptions } from '@tanstack/react-query';
 
 import { chunkArray } from '../utils/chunkArray';
 
 export function useMultiGetObjects(
 	ids: string[],
 	options: SuiObjectDataOptions,
-	queryOptions?: { keepPreviousData?: boolean },
+	queryOptions?: Omit<UseQueryOptions<SuiObjectResponse[]>, 'queryKey' | 'queryFn'>,
 ) {
 	const client = useSuiClient();
 	return useQuery({
+		...queryOptions,
 		queryKey: ['multiGetObjects', ids],
 		queryFn: async () => {
 			const responses = await Promise.all(
@@ -27,6 +28,5 @@ export function useMultiGetObjects(
 			return responses.flat();
 		},
 		enabled: !!ids?.length,
-		...queryOptions,
 	});
 }
@@ -13,6 +13,6 @@ export function useProductAnalyticsConfig() {
 		queryKey: ['apps-backend', 'product-analytics-config'],
 		queryFn: () => request<ProductAnalyticsConfigResponse>('product-analytics'),
 		staleTime: 24 * 60 * 60 * 1000,
-		cacheTime: Infinity,
+		gcTime: Infinity,
 	});
 }
@@ -22,7 +22,7 @@ export function useSuiCoinData() {
 	return useQuery({
 		queryKey: ['sui-coin-data'],
 		queryFn: () => request<CoinData>('coins/sui', {}),
-		cacheTime: 24 * 60 * 60 * 1000,
+		gcTime: 24 * 60 * 60 * 1000,
 		staleTime: Infinity,
 	});
 }
@@ -42,8 +42,8 @@
 		"@radix-ui/react-switch": "^1.0.3",
 		"@radix-ui/react-tabs": "^1.0.4",
 		"@sentry/react": "^7.59.2",
-		"@tanstack/react-query": "^4.29.25",
-		"@tanstack/react-query-devtools": "^4.29.25",
+		"@tanstack/react-query": "^5.0.0",
+		"@tanstack/react-query-devtools": "^5.0.1",
 		"@tanstack/react-table": "^8.9.3",
 		"@types/d3-array": "^3.0.5",
 		"@types/throttle-debounce": "^5.0.0",

@@ -38,7 +38,7 @@ function TooltipContent({ data }: { data: AllEpochsAddressMetrics[number] }) {
 
 export function AccountsCardGraph() {
 	const { data: addressMetrics } = useGetAddressMetrics();
-	const { data: allEpochMetrics, isLoading } = useGetAllEpochAddressMetrics({
+	const { data: allEpochMetrics, isPending } = useGetAllEpochAddressMetrics({
 		descendingOrder: false,
 	});
 	const adjEpochAddressMetrics = useMemo(() => allEpochMetrics?.slice(-30), [allEpochMetrics]);
@@ -77,7 +77,7 @@ export function AccountsCardGraph() {
 						!adjEpochAddressMetrics?.length && 'bg-gray-40',
 					)}
 				>
-					{isLoading ? (
+					{isPending ? (
 						<div className="flex flex-col items-center gap-1">
 							<LoadingIndicator />
 							<Text color="steel" variant="body/medium">

@@ -37,7 +37,7 @@ export function EpochsActivityTable({
 	});
 
 	const epochs = useGetEpochs(limit);
-	const { data, isFetching, pagination, isLoading, isError } = useCursorPagination(epochs);
+	const { data, isFetching, pagination, isPending, isError } = useCursorPagination(epochs);
 
 	const cardData = data ? genTableDataFromEpochsData(data) : undefined;
 
@@ -46,7 +46,7 @@ export function EpochsActivityTable({
 			{isError && (
 				<div className="pt-2 font-sans font-semibold text-issue-dark">Failed to load Epochs</div>
 			)}
-			{isLoading || isFetching || !cardData ? (
+			{isPending || isFetching || !cardData ? (
 				<PlaceholderTable
 					rowCount={limit}
 					rowHeight="16px"

@@ -35,7 +35,7 @@ export function TransactionsActivityTable({
 	const { data: count } = useQuery({
 		queryKey: ['transactions', 'count'],
 		queryFn: () => client.getTotalTransactionBlocks(),
-		cacheTime: 24 * 60 * 60 * 1000,
+		gcTime: 24 * 60 * 60 * 1000,
 		staleTime: Infinity,
 		retry: false,
 	});
@@ -44,7 +44,7 @@ export function TransactionsActivityTable({
 		limit,
 		refetchInterval,
 	);
-	const { data, isFetching, pagination, isLoading, isError } = useCursorPagination(transactions);
+	const { data, isFetching, pagination, isPending, isError } = useCursorPagination(transactions);
 	const goToFirstPageRef = useRef(pagination.onFirst);
 	goToFirstPageRef.current = pagination.onFirst;
 	const cardData = data ? genTableDataFromTxData(data.data) : undefined;
@@ -60,7 +60,7 @@ export function TransactionsActivityTable({
 				</div>
 			)}
 			<div className="flex flex-col space-y-3 text-left">
-				{isLoading || isFetching || !cardData ? (
+				{isPending || isFetching || !cardData ? (
 					<PlaceholderTable
 						rowCount={limit}
 						rowHeight="16px"

@@ -5,13 +5,13 @@ import { StatsWrapper } from './FormattedStatsAmount';
 import { useGetNetworkMetrics } from '~/hooks/useGetNetworkMetrics';
 
 export function Checkpoint() {
-	const { data, isLoading } = useGetNetworkMetrics();
+	const { data, isPending } = useGetNetworkMetrics();
 
 	return (
 		<StatsWrapper
 			label="Checkpoint"
 			tooltip="The current checkpoint"
-			unavailable={isLoading}
+			unavailable={isPending}
 			size="sm"
 			orientation="horizontal"
 		>

@@ -20,7 +20,7 @@ export function UnderlyingObjectCard({
 	name,
 	dynamicFieldType,
 }: UnderlyingObjectCardProps) {
-	const { data, isLoading, isError, isFetched } = useSuiClientQuery('getDynamicFieldObject', {
+	const { data, isPending, isError, isFetched } = useSuiClientQuery('getDynamicFieldObject', {
 		parentId,
 		name,
 	});
@@ -35,14 +35,14 @@ export function UnderlyingObjectCard({
 	const {
 		data: normalizedStruct,
 		isFetched: normalizedStructFetched,
-		isLoading: loadingNormalizedStruct,
+		isPending: loadingNormalizedStruct,
 	} = useSuiClientQuery('getNormalizedMoveStruct', {
 		package: packageId,
 		module: moduleName,
 		struct: functionName,
 	});
 
-	const isDataLoading = isLoading || loadingNormalizedStruct;
+	const isDataLoading = isPending || loadingNormalizedStruct;
 
 	// Check for error first before showing the loading spinner to avoid infinite loading if GetDynamicFieldObject fails
 	if (

@@ -19,10 +19,10 @@ export default function CoinsPanel({ coinType, id }: CoinsPanelProps) {
 	const containerRef = useRef(null);
 	const coinsSectionRef = useRef(null);
 	const { isIntersecting } = useOnScreen(containerRef);
-	const { data, isLoading, isFetching, fetchNextPage, hasNextPage } = useGetCoins(coinType, id);
+	const { data, isPending, isFetching, fetchNextPage, hasNextPage } = useGetCoins(coinType, id);
 	const [_, containerWidth] = useElementDimensions(coinsSectionRef);
 
-	const isSpinnerVisible = hasNextPage || isLoading || isFetching;
+	const isSpinnerVisible = hasNextPage || isPending || isFetching;
 
 	useEffect(() => {
 		if (isIntersecting && hasNextPage && !isFetching) {

@@ -27,7 +27,7 @@ export function OwnedCoins({ id }: { id: string }) {
 	const [currentSlice, setCurrentSlice] = useState(1);
 	const [limit, setLimit] = useState(20);
 	const [filterValue, setFilterValue] = useState(COIN_FILTERS.RECOGNIZED);
-	const { isLoading, data, isError } = useSuiClientQuery('getAllBalances', {
+	const { isPending, data, isError } = useSuiClientQuery('getAllBalances', {
 		owner: normalizeSuiAddress(id),
 	});
 	const recognizedPackages = useRecognizedPackages();
@@ -97,7 +97,7 @@ export function OwnedCoins({ id }: { id: string }) {
 
 	return (
 		<div className="h-full w-full md:pr-10">
-			{isLoading ? (
+			{isPending ? (
 				<div className="m-auto flex h-full w-full justify-center text-white">
 					<LoadingIndicator />
 				</div>