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

toybreaker.last year

13

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
}

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

• 

  denolfe

  last year

  Looking at your payload config, it doesn't look like you have any globals defined

  
  

  
  

  Once you have it defined, you'll access it through

  http://localhost:3000/api/globals/

  <global-slug>

  
  

  
  

  Here is an example of a global in your config:

  
  

  globals: [
      {
        slug: 'my-global',
        fields: [
          {
            name: 'my-field',
            type: 'text',
          },
        ],
      },
    ],

• 

  toybreaker.last year

  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

  src/globals

  :

  
  

  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 ...

• 

  denolfe

  last year

  It sounds like at this point you'd look at the Astro documentation to figure out how to fetch and render the data.

  
  

  
  

  I'm not familiar with Astro myself and usually only work with React

  
  

  
  

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

• 

  toybreaker.last year

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

  
  
  

  looking forward for this!

• 

  denolfe

  last year

  That template looks like it has an example of retrieving data in the frontend dir

  
  

  
  

  did you see that?

• 

  toybreaker.last year

  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...

• 

  denolfe

  last year

  Ah, I see

• 

  toybreaker.last year

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

• 

  denolfe

  last year

  All good. I think now that you know how globals are structured different from a collection, you could probably figure it out.

• 

  toybreaker.last year

  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!

• 

  captken.last year

  @toybreaker did you get this figured out? Astro looks good, how has been your experience with getting them to work?

• 

  toybreaker.last year

  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.

• 

  dankuta4 months ago

  Do you mind sharing how you got this to work eventually