chore(templates): add type detection on getGlobal utility (#11617)

### What?

Added proper type detection to the global data fetching utilities in the
form builder example. Enhanced the getGlobal and getCachedGlobal
functions to leverage TypeScript generics for improved type safety.

#### Why?

This change improves developer experience by providing proper TypeScript
type inference when working with global data. With these changes:
The returned data from getGlobal is now properly typed as
DataFromGlobalSlug<T> based on the slug parameter
TypeScript can now correctly infer the return type of getCachedGlobal
based on the global slug
This prevents type errors and provides better IDE
autocomplete/IntelliSense when accessing properties on retrieved global
data

### How?

Added import for the DataFromGlobalSlug type from Payload
Made getGlobal a generic function that accepts a type parameter T
extends Global
Added proper return type annotation (Promise<DataFromGlobalSlug<T>>) to
the getGlobal function
Updated getCachedGlobal to use the same generic typing pattern
These changes maintain the same runtime behavior while enhancing type
safety

Author: pierrecabriere

examples/form-builder/src/components/Header/index.tsx

@@ -2,8 +2,6 @@ import { ModalToggler } from '@faceless-ui/modal'
 import Link from 'next/link'
 import React from 'react'
 
-import type { MainMenu } from '../../payload-types'
-
 import { getCachedGlobal } from '../../utilities/getGlobals'
 import { Gutter } from '../Gutter'
 import { MenuIcon } from '../icons/Menu'
@@ -35,7 +33,7 @@ export const HeaderBar: React.FC<HeaderBarProps> = ({ children }) => {
 }
 
 export async function Header() {
-  const header: MainMenu = await getCachedGlobal('main-menu', 1)()
+  const header = await getCachedGlobal('main-menu', 1)()
 
   const navItems = header?.navItems || []
 

examples/form-builder/src/utilities/getGlobals.ts

@@ -1,13 +1,13 @@
 import type { Config } from 'src/payload-types'
 
 import { unstable_cache } from 'next/cache'
-import { getPayload } from 'payload'
+import { type DataFromGlobalSlug, getPayload } from 'payload'
 
 import configPromise from '../payload.config'
 
 type Global = keyof Config['globals']
 
-async function getGlobal(slug: Global, depth = 0) {
+async function getGlobal<T extends Global>(slug: T, depth = 0): Promise<DataFromGlobalSlug<T>> {
   const payload = await getPayload({ config: configPromise })
 
   const global = await payload.findGlobal({
@@ -21,7 +21,7 @@ async function getGlobal(slug: Global, depth = 0) {
 /**
  * Returns a unstable_cache function mapped with the cache tag for the slug
  */
-export const getCachedGlobal = (slug: Global, depth = 0) =>
-  unstable_cache(async () => getGlobal(slug, depth), [slug], {
+export const getCachedGlobal = <T extends Global>(slug: T, depth = 0) =>
+  unstable_cache(async () => getGlobal<T>(slug, depth), [slug], {
     tags: [`global_${slug}`],
   })

examples/localization/src/globals/Footer/Component.tsx

@@ -2,14 +2,12 @@ import { getCachedGlobal } from '@/utilities/getGlobals'
 import Link from 'next/link'
 import React from 'react'
 
-import type { Footer } from '@/payload-types'
-
 import { ThemeSelector } from '@/providers/Theme/ThemeSelector'
 import { CMSLink } from '@/components/Link'
 import { TypedLocale } from 'payload'
 
 export async function Footer({ locale }: { locale: TypedLocale }) {
-  const footer: Footer = await getCachedGlobal('footer', 1, locale)()
+  const footer = await getCachedGlobal('footer', 1, locale)()
 
   const navItems = footer?.navItems || []
 

examples/localization/src/globals/Header/Component.tsx

@@ -2,11 +2,10 @@ import { HeaderClient } from './Component.client'
 import { getCachedGlobal } from '@/utilities/getGlobals'
 import React from 'react'
 
-import type { Header } from '@/payload-types'
 import { TypedLocale } from 'payload'
 
 export async function Header({ locale }: { locale: TypedLocale }) {
-  const header: Header = await getCachedGlobal('header', 1, locale)()
+  const header = await getCachedGlobal('header', 1, locale)()
 
   return <HeaderClient header={header} />
 }

examples/localization/src/utilities/getGlobals.ts

@@ -1,13 +1,13 @@
 import type { Config } from 'src/payload-types'
 
 import configPromise from '@payload-config'
-import { getPayload } from 'payload'
+import { type DataFromGlobalSlug, getPayload } from 'payload'
 import { unstable_cache } from 'next/cache'
 import { TypedLocale } from 'payload'
 
 type Global = keyof Config['globals']
 
-async function getGlobal(slug: Global, depth = 0, locale: TypedLocale) {
+async function getGlobal<T extends Global>(slug: T, depth = 0, locale: TypedLocale): Promise<DataFromGlobalSlug<T>> {
   const payload = await getPayload({ config: configPromise })
 
   const global = await payload.findGlobal({
@@ -22,7 +22,7 @@ async function getGlobal(slug: Global, depth = 0, locale: TypedLocale) {
 /**
  * Returns a unstable_cache function mapped with the cache tag for the slug and locale
  */
-export const getCachedGlobal = (slug: Global, depth = 0, locale: TypedLocale) =>
-  unstable_cache(async () => getGlobal(slug, depth, locale), [slug, locale], {
+export const getCachedGlobal = <T extends Global>(slug: T, depth = 0, locale: TypedLocale) =>
+  unstable_cache(async () => getGlobal<T>(slug, depth, locale), [slug, locale], {
     tags: [`global_${slug}`],
   })

templates/website/src/Footer/Component.tsx

@@ -2,14 +2,12 @@ import { getCachedGlobal } from '@/utilities/getGlobals'
 import Link from 'next/link'
 import React from 'react'
 
-import type { Footer } from '@/payload-types'
-
 import { ThemeSelector } from '@/providers/Theme/ThemeSelector'
 import { CMSLink } from '@/components/Link'
 import { Logo } from '@/components/Logo/Logo'
 
 export async function Footer() {
-  const footerData: Footer = await getCachedGlobal('footer', 1)()
+  const footerData = await getCachedGlobal('footer', 1)()
 
   const navItems = footerData?.navItems || []
 

templates/website/src/Header/Component.tsx

@@ -2,10 +2,8 @@ import { HeaderClient } from './Component.client'
 import { getCachedGlobal } from '@/utilities/getGlobals'
 import React from 'react'
 
-import type { Header } from '@/payload-types'
-
 export async function Header() {
-  const headerData: Header = await getCachedGlobal('header', 1)()
+  const headerData = await getCachedGlobal('header', 1)()
 
   return <HeaderClient data={headerData} />
 }

templates/website/src/utilities/getGlobals.ts

@@ -1,12 +1,12 @@
 import type { Config } from 'src/payload-types'
 
 import configPromise from '@payload-config'
-import { getPayload } from 'payload'
+import { type DataFromGlobalSlug, getPayload } from 'payload'
 import { unstable_cache } from 'next/cache'
 
 type Global = keyof Config['globals']
 
-async function getGlobal(slug: Global, depth = 0) {
+async function getGlobal<T extends Global>(slug: T, depth = 0): Promise<DataFromGlobalSlug<T>> {
   const payload = await getPayload({ config: configPromise })
 
   const global = await payload.findGlobal({
@@ -20,7 +20,7 @@ async function getGlobal(slug: Global, depth = 0) {
 /**
  * Returns a unstable_cache function mapped with the cache tag for the slug
  */
-export const getCachedGlobal = (slug: Global, depth = 0) =>
-  unstable_cache(async () => getGlobal(slug, depth), [slug], {
+export const getCachedGlobal = <T extends Global>(slug: T, depth = 0) =>
+  unstable_cache(async () => getGlobal<T>(slug, depth), [slug], {
     tags: [`global_${slug}`],
   })

templates/with-vercel-website/src/Footer/Component.tsx

@@ -2,14 +2,12 @@ import { getCachedGlobal } from '@/utilities/getGlobals'
 import Link from 'next/link'
 import React from 'react'
 
-import type { Footer } from '@/payload-types'
-
 import { ThemeSelector } from '@/providers/Theme/ThemeSelector'
 import { CMSLink } from '@/components/Link'
 import { Logo } from '@/components/Logo/Logo'
 
 export async function Footer() {
-  const footerData: Footer = await getCachedGlobal('footer', 1)()
+  const footerData = await getCachedGlobal('footer', 1)()
 
   const navItems = footerData?.navItems || []
 

templates/with-vercel-website/src/Header/Component.tsx

@@ -2,10 +2,8 @@ import { HeaderClient } from './Component.client'
 import { getCachedGlobal } from '@/utilities/getGlobals'
 import React from 'react'
 
-import type { Header } from '@/payload-types'
-
 export async function Header() {
-  const headerData: Header = await getCachedGlobal('header', 1)()
+  const headerData = await getCachedGlobal('header', 1)()
 
   return <HeaderClient data={headerData} />
 }