PayloadCMS and Astro, how to get PayloadCMS Globals in Astro?

I am using the started template generously provided by

but cant figure out the code i need to write to get Paylod globals come up in Astro...

i tried to add this into the Astro api.ts:

export async function getGlobals(query: any = null): Promise<PayloadGlobal<BrandDetail>> {
  const stringifiedQuery = qs.stringify(
    query,
    { addQueryPrefix: true }
  );

  const brandingData = await apiFetch(
    ${import.meta.env.PAYLOAD_URL}/api/globals/brand-details${stringifiedQuery}
  )
  return brandingData
}

i also added this to types.ts:

//globals
export interface PayloadGlobal<GlobalType> {
  totalDocs: number
  docs: GlobalType[]
  limit: number
}

is this the right way?

PayloadCMS and Astro, how to get PayloadCMS Globals in Astro?

thanks Elliot,

i need to make clear that started with Lambdo's template and already built on top of that, so now i do have them defined in

:

import { GlobalConfig } from 'payload/types';

const BrandDetails: GlobalConfig = {
  slug: 'brand-details',
  access: {
    read: () => true,
  },
  fields: [
    {
      name: 'brandName',
      label: 'Brand Name',
      type: 'text',
    },
    {
      name: 'brandMission',
      label: 'Brand Mission',
      type: 'text',
    },
  ],
};

export default BrandDetails;

and also in payload.config.ts:

 globals: [
    BrandDetails,
  ],

and also they come up in payload-types.ts:

export interface BrandDetail {
  id: string;
  brandName?: string;
  brandMission?: string;
}

and they do show in the api at:

http://localhost:4000/api/globals/brand-details

brandName    "Branded one"
brandMission    "CHARMING"
globalType    "brand-details"
createdAt    "2022-12-13T08:55:23.191Z"
updatedAt    "2022-12-13T08:55:23.191Z"
id    "63983dfb8bc556444453f24c"

what i having trouble with,

is what code i need in Astro to bring them up in the webpage?

since they have a different structure compared to collections,

i haven't figured out the code to query the backend to make globals available in the front end...

pardon my ignorance,

i have not much experience with this tech,

i did look into the docs,

found no code example for it...

It could be good for you experts and developer

to know where entry level beginners get stuck,

so you can smooth out the learning curve

and boost onboarding for newbies like me ...

"We're building out examples of multiple frontends integrating with Payload, so we may have an example eventually."

looking forward for this!

yes, i did, i build a 99% complete website with it already, but used only collections, with i got it sussed ... my only trouble is with globals...

its a commercial job, un-launched so i cannot actually share neither the code nor any screenshot yet...

i will keep on banging my head on it till i get it Elliot, or maybe just wait for some Astro code examples or tuts from Payload crew to appear!

Yes i did! 🙏

Astro is great, feels powerful the more i learn how to use it, especially their new experimental Assets management and the new built in Image features.