REST Queries for localised fields (NextJS staticPaths & staticProps)

[fredrikgunnarsson]

tldr:

REST Queries such as ?where[slug][equals]=home works for the defaultLocale, but not for other locales. Resulting in issues when using getStaticProps(context) => {context.params.slug} to fetch data from payload REST API.

Description:

I'm trying to make dynamic localised slugs work for a static web with Payload and Next.js

For example
https://mysite/en/home <-- english version
https://mysite/sv/hem <-- swedish version

Since I want localised dynamic slugs, I'm using [slug].js with getStaticPaths in Next.js that returns the following:

paths: [
  { params: { slug: 'home' }, locale: 'en' },
  { params: { slug: 'hem' }, locale: 'sv' },
]

In Payload I got this field

{
  name: "slug",
  type: "text",
  localized: true,
}

The Payload REST Queries only works for the defaultLocale

http://localhost:3001/api/pages?where[slug][equals]=home <-- works
http://localhost:3001/api/pages?where[slug][equals]=hem <-- doesn't work

This gives me no possibility to get the data I need in Next.js since getStaticProps(context) {context.params.slug} in [slug].js gives me the local slug, for example hem (from the example above, which doesn't work in Payload REST Queries). I can't find a good workaround either.

I hope I have explained this well enough.
Thanks in advance! 🙏

[fredrikgunnarsson]

I believe I have solved it myself. See below.
Was pretty sure I double checked this like 10 times before submitting this, guess not 😩

http://localhost:3001/api/pages?where[slug][equals]=home <-- works
http://localhost:3001/api/pages?where[slug][equals]=hem <-- doesn't work
http://localhost:3001/api/pages?where[slug][equals]=hem&locale=sv <-- works

[DanRibbens]

Ah, it happens @fredrikgunnarsson. I'm glad you got it sorted out!

We should add your solution to the docs, expanding one of these sections:
https://payloadcms.com/docs/queries/overview#rest-queries
https://payloadcms.com/docs/configuration/localization#retrieving-localized-docs

You had to intuitively piece both pieces together.

Any thoughts?

[fredrikgunnarsson]

Agree, I think the example in https://payloadcms.com/docs/queries/overview#rest-queries would benefit from also including locale to make it clearer.

-- https://localhost:3000/api/posts?where[color][equals]=mint
++ https://localhost:3000/api/posts?where[color][equals]=mint&locale=en

Documentation in https://payloadcms.com/docs/configuration/localization#retrieving-localized-docs is fine I think.