create-payload-app@beta website template footer links issue

[jbryandev]

Describe the Bug

The beta website template currently does not show internal page nav items even if those are added in the footer collection. It only shows custom URL nav items. In my debugging I could not find any obvious reasons as to why only custom links are shown in the footer. The header code works just fine and seems to be pretty much identical to the footer, so it is not immediately clear as to why the footer is having trouble.

Link to the code that reproduces this issue

https://github.com/jbryandev/payload-cms-footer-bug

Reproduction Steps

1. Create new payload beta app using website template
2. Select SQLite database
3. Run pnpm dev
4. Visit admin panel and create new user
5. Edit footer global in admin panel and add nav item for Contact page

Which area(s) are affected? (Select all that apply)

area: templates

Environment Info

Binaries:
  Node: 23.1.0
  npm: 10.9.0
  Yarn: N/A
  pnpm: 9.12.3
Relevant Packages:
  payload: 3.0.0-beta.134
  next: 15.0.0
  @payloadcms/email-nodemailer: 3.0.0-beta.134
  @payloadcms/graphql: 3.0.0-beta.134
  @payloadcms/live-preview: 3.0.0-beta.134
  @payloadcms/live-preview-react: 3.0.0-beta.134
  @payloadcms/next/utilities: 3.0.0-beta.134
  @payloadcms/payload-cloud: 3.0.0-beta.134
  @payloadcms/plugin-form-builder: 3.0.0-beta.134
  @payloadcms/plugin-nested-docs: 3.0.0-beta.134
  @payloadcms/plugin-redirects: 3.0.0-beta.134
  @payloadcms/plugin-search: 3.0.0-beta.134
  @payloadcms/plugin-seo: 3.0.0-beta.134
  @payloadcms/richtext-lexical: 3.0.0-beta.134
  @payloadcms/translations: 3.0.0-beta.134
  @payloadcms/ui/shared: 3.0.0-beta.134
  react: 19.0.0-rc-65a56d0e-20241020
  react-dom: 19.0.0-rc-65a56d0e-20241020
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.1.0: Thu Oct 10 21:05:14 PDT 2024; root:xnu-11215.41.3~2/RELEASE_ARM64_T8103
  Available memory (MB): 8192
  Available CPU cores: 8

[AWagnr]

@jbryandev Had the same issue and found a solution. There is a helper which fetches the footer items, but the depth is not sufficient. The code is in getGlobal.ts. If you change it from

export const getCachedGlobal = (slug: Global, depth = 0) =>
  unstable_cache(async () => getGlobal(slug, depth), [slug], {
    tags: [`global_${slug}`],
  })

to

export const getCachedGlobal = (slug: Global, depth = 1) =>
  unstable_cache(async () => getGlobal(slug, depth), [slug], {
    tags: [`global_${slug}`],
  })

(notice the default depth parameter), it works as expected

[jbryandev]

Thank you @AWagnr. I forgot to put in my OP that I had caught that as well. However, in my case, that didn't initially fix the problem. I did eventually get it working, and I think it was a caching thing because I didn't change anything else but it started working after I cleared my browser cache.

[denolfe]

Hey @paulpopus , can you take a look at the depth mentioned above for the template?

[paulpopus]

Pushed a fix for this in the template. It will now fetch the footer with depth 1

[github-actions[bot]]

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.