How to query data for more than one custom type in [uid].js

Developing with Prismic
1

I'm developing a multilingual website using Next js and Prismic by following this article: Developer Documentation - Prismic.
the example project in the article is only having one custom type for subpages which is about page (except for homepage and menu).In my case, I have 3 different custom types.
In the [uid].js file in the example, the content is retrieved by UID. In my case, I am having more than one UID.(one for the editorial page, one for the download page, and one for the contact page).
I wonder how I can retrieve more than one custom type or UID in [uid].js.
and here is the snippet from the [uid].js from the example in the article, where it queries the api by UID : const doc =
(await client.getByUID(
'page',
params.uid,
ref ? { ref, lang: locale } : { lang: locale }
)) || {};

4

Hey @elar,

I think I need a little more information. Are your download and contact page singletons? If so, you can query them the same way you query the menu:

  const doc =
    (await client.getByUID(
      'page',
      params.uid,
      ref ? { ref, lang: locale } : { lang: locale }
    )) || {};
  const menu =
    (await client.getSingle('top_menu', ref ? { ref, lang: locale } : { lang: locale })) ||
    {};

Either way, you can add them as additional queries in the getStaticProps function.

Let me know if that makes sense, or if you have more questions.

Best,
Sam

5

Hi samlittlefair and thanks for the reply,
yes, they are both singletones and it seems I can query them like the menu. But what about their URLs. How can I resolve them? Because in "getStaticPath" function it queries only one type:
export async function getStaticPaths() {
const documents = await queryRepeatableDocuments(
(doc) => doc.type ==='page',
);

return {
paths: documents.map((doc) => {
return { params: { uid: doc.uid }, locale: doc.lang };
}),
fallback: false,
};
}

6

I would appreciate it if I can get help on this as this is something urgent for our web department.

7

Hi @elar ,

I don't completely understand your use case, here. We recommend that you use one repeatable type per page component.

If you need to generate paths for more than one Custom Type, you can update the filter function that you pass as an argument to queryRepeatableDocuments:

(doc) => doc.type ==='page'

That is filtering for all documents of type 'page'. If you wanted, for example, to query for all documents of type "page" or "post" you could edit the filter like this:

(doc) => (doc.type === 'page'  || doc.type === 'post')

I think that would work. Let me know if it doesn't.

However, as I said, I wouldn't recommend using a dynamic page component for multiple repeatable types. Instead, you could do something like this:

.
└── pages/
    ├── editorial/
    │   └── [uid].js
    ├── contact.js
    └── download.js

(I'm assuming that your "editorial" Custom Type is repeatable, and that your "contact" and "download" Custom Types are singletons.)

Let me know if that makes sense, or if you have more questions.

Best,
Sam

8

Hello Sam,
Thanks for the reply,
Yes, you are right. I need to change the structure of the files as you suggested in your email.
I'll get back to you if have further questions.

1 Like
9

@elar Awesome! I'm glad I could help :slight_smile:

10

This issue has been closed as it has been fixed, Flag if it is not the case for you to reopen.