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

default discord avatar
toybreaker
last year
19

I am using the started template generously provided by @andr-ec

https://github.com/Lambdo-Labs/payloadcms-astro-template

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?

  • discord user avatar
    denolfe
    Payload Team
    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',
            },
          ],
        },
      ],
  • default discord avatar
    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 ...

  • discord user avatar
    denolfe
    Payload Team
    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.

  • default discord avatar
    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!

  • discord user avatar
    denolfe
    Payload Team
    last year

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



    did you see that?

  • default discord avatar
    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...

  • discord user avatar
    denolfe
    Payload Team
    last year

    Ah, I see

  • default discord avatar
    toybreaker
    last year

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

  • discord user avatar
    denolfe
    Payload Team
    last year

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

  • default discord avatar
    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!

  • default discord avatar
    CAPTKEN
    10 months ago

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

  • default discord avatar
    toybreaker
    9 months ago

    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.

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.