"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."
Get the resources you need to start building today
Microsoft chose Payload to tell the world about AI.
Populate Internal Link with page object? (NON LEXICAL)
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).
@654031862146007055
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
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)
This is expected behavior here
in the hero, i pull
linksfrom the props, but at that point, its already removed the entire object and replaced with a number
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
typeofcheck
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,
},
},
})
const isUnpopulated = typeof doc === 'number'ill check the type of the fetched home page
From that fetch, the type is object. Not Page, peculiarly?
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
Ah, I thought it would set the type. Okay. Im migrating from our old CMS, where can I find access?
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?
Yep
Nice, so your actual access functions are here:
https://github.com/payloadcms/payload/tree/main/templates/website/src/accessAs for how they are applied to what, you would need to look into your collections, they will be placed under the
accessproperty in the config there
How deeply nested are your links?
Try upping your depth on that request also
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?
I'm not sure I follow, can you provide more info?
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!
Awesome!
Thanks a ton!
That looks great
My absolute pleasure!
Feel free to let me know if you encounter any more blockers
Star
Discord
online
Get dedicated engineering support directly from the Payload team.