Combine list fetch and individual fetch for getting names from IDs

[david-crespo]

We have a number of places where we list resource A that points a resource B by ID, but we would obviously prefer to show the names of B:

• Instance attached to a disk
• VPC for network interface
• Silo linked to IP pool
• Disk source of snapshot

In those cases, we fetch the names one by one asynchronously, after the table has loaded. Example *FromId cell component:

console/app/pages/project/disks/DisksPage.tsx

Lines 43 to 59 in cfda163

	function InstanceNameFromId({ value: instanceId }: { value: string | null }) {
	const { project } = useProjectSelector()
	const { data: instance } = useApiQuery(
	'instanceView',
	{ path: { instance: instanceId! } },
	{ enabled: !!instanceId }
	)
	if (!instanceId) return null
	if (!instance) return <SkeletonCell />
	return (
	<LinkCell to={pb.instancePage({ project, instance: instance.name })}>
	{instance.name}
	</LinkCell>
	)
	}

This is not bad — our page size is 25, so in the worst case of a full page with 25 unique IDs, we're making 25 little requests in parallel, and most are below the fold. However! Inspired by @charliepark's work on #1871, we realized we could fetch the list of that thing (in the loader, in parallel!) and use it for the names, making only one call instead of 25. We could use a decent-sized limit (500?) to make it likely we're getting all of that thing, and then we can still fall back to fetching individually if the ID for resource B is not found in the list.

[david-crespo]

I just thought of a really sneaky way to do this: fetch the list in the loader, but then loop through and use setQueryData to pretend we fetched all the items individually by ID. That way, the components that fetch each thing by ID to get the name will automatically use the cached value if it's there and fall back to fetching if it's not. We shouldn't have to change existing *NameFromId components at all.