Add a generic arg to useCollection to improve typing of results. (#10696)

Closes #5726

Author: samueljseay

assets/js/base/context/hooks/collections/use-collection.ts

@@ -49,10 +49,10 @@ export interface useCollectionOptions {
 	isEditor?: boolean;
 }
 
-export const useCollection = (
+export const useCollection = < T >(
 	options: useCollectionOptions
 ): {
-	results: unknown;
+	results: T[];
 	isLoading: boolean;
 } => {
 	const {
@@ -68,7 +68,7 @@ export const useCollection = (
 				'the resource properties.'
 		);
 	}
-	const currentResults = useRef< { results: unknown; isLoading: boolean } >( {
+	const currentResults = useRef< { results: T[]; isLoading: boolean } >( {
 		results: [],
 		isLoading: true,
 	} );
@@ -102,7 +102,7 @@ export const useCollection = (
 			}
 
 			return {
-				results: store.getCollection< T >( ...args ),
+				results: store.getCollection< T[] >( ...args ),
 				isLoading: ! store.hasFinishedResolution(
 					'getCollection',
 					args

assets/js/base/context/hooks/use-store-products.ts

@@ -35,16 +35,17 @@ export const useStoreProducts = (
 		namespace: '/wc/store/v1',
 		resourceName: 'products',
 	};
-	const { results: products, isLoading: productsLoading } = useCollection( {
-		...collectionOptions,
-		query,
-	} );
+	const { results: products, isLoading: productsLoading } =
+		useCollection< ProductResponseItem >( {
+			...collectionOptions,
+			query,
+		} );
 	const { value: totalProducts } = useCollectionHeader( 'x-wp-total', {
 		...collectionOptions,
 		query,
 	} );
 	return {
-		products: products as ProductResponseItem[], // TODO: Remove this once getCollection selector and resolver is converted to TS.
+		products,
 		totalProducts: parseInt( totalProducts as string, 10 ),
 		productsLoading,
 	};

assets/js/blocks/active-filters/active-attribute-filters.tsx

@@ -11,6 +11,7 @@ import { __ } from '@wordpress/i18n';
 import { getSettingWithCoercion } from '@woocommerce/settings';
 import {
 	AttributeObject,
+	AttributeTerm,
 	isAttributeQueryCollection,
 	isAttributeTermCollection,
 	isBoolean,
@@ -47,7 +48,7 @@ const ActiveAttributeFilters = ( {
 	displayStyle,
 	isLoadingCallback,
 }: ActiveAttributeFiltersProps ) => {
-	const { results, isLoading } = useCollection( {
+	const { results, isLoading } = useCollection< AttributeTerm >( {
 		namespace: '/wc/store/v1',
 		resourceName: 'products/attributes/terms',
 		resourceValues: [ attributeObject.id ],

assets/js/blocks/attribute-filter/block.tsx

@@ -19,6 +19,7 @@ import { getSettingWithCoercion } from '@woocommerce/settings';
 import { getQueryArgs, removeQueryArgs } from '@wordpress/url';
 import {
 	AttributeQuery,
+	AttributeTerm,
 	isAttributeQueryCollection,
 	isBoolean,
 	isString,
@@ -124,7 +125,7 @@ const AttributeFilterBlock = ( {
 		useQueryStateByKey( 'attributes', [] );
 
 	const { results: attributeTerms, isLoading: attributeTermsLoading } =
-		useCollection( {
+		useCollection< AttributeTerm >( {
 			namespace: '/wc/store/v1',
 			resourceName: 'products/attributes/terms',
 			resourceValues: [ attributeObject?.id || 0 ],