Looking to create navigation, that returns the object, or at least some paramteres, like the URL, for easy internal navigation. When I do this, it just returns the ID (ex. 11).
#Populate Internal Link with page object? (NON LEXICAL)
twin sandal
willow briarBOT
twin sandal
@open umbra
open umbra
Yeah, so getting an ID back is a symptom of either insufficient access, or the data you are trying to fetch has deeply nested structure and insufficient depth param
How are you fetching the doc
twin sandal
One sec, I can provide the types for eveything?
export interface Page {
id: number;
title: string;
hero: {
links?:
| {
link: {
type?: ('reference' | 'custom') | null;
newTab?: boolean | null;
reference?:
| ({
relationTo: 'pages';
value: number | Page;
} | null)
| ({
relationTo: 'posts';
value: number | Post;
} | null);
url?: string | null;
label: string;
/**
* Choose how the link should be rendered.
*/
appearance?: ('default' | 'outline') | null;
};
id?: string | null;
}[]
| null;
So this, for some reason, the type for the Page, alwayss appends a Number. (I know yorue not supposed to manually edit the types file, but even if i remove Number, it still appends it back)
open umbra
This is expected behavior here
twin sandal
in the hero, i pull links from the props, but at that point, its already removed the entire object and replaced with a number
open umbra
Types have no impact on actual data returned, it's just trying to help you by giving you type hints. The behavior is expected because Payload doesn't know in advance at what depth/access controls you are fetching with
To know if you have a "Post"/"Page" or a number, you can do a typeof check
twin sandal
Heres my fetch for the home page:
const result = await payload.find({
collection: 'pages',
draft,
limit: 1,
pagination: false,
overrideAccess: true, // Always override access for frontend queries
depth: 3, // Increase depth for nested relationships in blocks
where: {
slug: {
equals: slug,
},
},
})
open umbra
const isUnpopulated = typeof doc === 'number'
twin sandal
ill check the type of the fetched home page
From that fetch, the type is object. Not Page, peculiarly?
open umbra
I think you are confusing TS concepts with JS
Your populated Posts, Pages, other docs are all objects
If, let's say, you don't have sufficient access to read those docs, they will return as number | string instead
twin sandal
Ah, I thought it would set the type. Okay. Im migrating from our old CMS, where can I find access?
open umbra
As for your link, ensure your page/post is published and your access controls allow for them to be read
Are you using the website template?
twin sandal
Yep
open umbra
Nice, so your actual access functions are here: https://github.com/payloadcms/payload/tree/main/templates/website/src/access
As for how they are applied to what, you would need to look into your collections, they will be placed under the access property in the config there
How deeply nested are your links?
Try upping your depth on that request also
twin sandal
is it better practice in payload not to stuff the entire object as "value", but rather spread of the slug, title, etc into the same object?
open umbra
I'm not sure I follow, can you provide more info?
twin sandal
Wait! Just figured it out, your right, i was changing the wrong depth. I was changing that on the Hero compoentn, but not the fetched page:
{
"type": "reference",
"reference": {
"relationTo": "pages",
"value": {
"id": 11,
"title": "SERVICES",
"slug": "services"
}
},
"url": null,
}
thats what it looks like now!
open umbra
Awesome!
twin sandal
Thanks a ton!