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

21 messages · Page 1 of 1 (latest)

leaden adder
#

I am using the started template generously provided by @torpid mica 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:

  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?

GitHub
GitHub - Lambdo-Labs/payloadcms-astro-template: Payload CMS and Ast...

Payload CMS and Astro template. Contribute to Lambdo-Labs/payloadcms-astro-template development by creating an account on GitHub.

leaden adder
#

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

wild cairn
#

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

#

Here is an example of a global in your config:

globals: [
    {
      slug: 'my-global',
      fields: [
        {
          name: 'my-field',
          type: 'text',
        },
      ],
    },
  ],
leaden adder
# wild cairn Once you have it defined, you'll access it through http://localhost:3000/api/glo...

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:

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

wild cairn
#

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.

leaden adder
#

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

looking forward for this!

wild cairn
#

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

#

did you see that?

leaden adder
wild cairn
#

Ah, I see

leaden adder
#

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

wild cairn
#

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

leaden adder
#

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!

gray cloud
#

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

leaden adder
#

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.

hasty moth