Type definitions for params and previewData

Developing with Prismic
1

I am coming back to this code I wrote and not happy with for obvious any reasons.

export async function getStaticProps({ params, previewData }: any) {
  const client = createClient({ previewData });

  const { uid, lang } = params;

  const page = await client.getByUID('components', uid, { lang });

  return {
    props: {
      page,
    },
  };
}

Where can I grab the Typescript definitions for params and previewData? Not finding this documentation or community members talking about it here.I could use Next.js's GetStaticProps but if I do that the destructuring line const { uid, lang } = params; has errors presumably because they are from Prismic not Next.js

2

I also am having a problem with the type definition for the previewData. Maybe someone has an answer for this. Thanks!

5

Hi @frank.stallone @devteam2

Thanks for reaching out.

I have reached out to the dev team regarding those TypeScript questions, and here is what we think about it.

  • Typing params:

We have a new “Next.js: TypeScript” guide that covers what you are asking.
Use TypeScript with Next.js - Documentation - Prismic the use of Next.js’s GetStaticPropsContext.

The second code block shows how to use GetStaticPropsContext with a typed params object.

  • Typing previewData

Preview data can be anything, depending on the visitor, so it may not be a good idea to type the data manually.

Instead, runtime validation should occur, where you check the object for the property you need before using it.

That being said, GetStaticPropsContext’s second type parameter allows someone to define previewData’s type.


type MyPreviewData = {
 // Your data here foo: "bar" 
} 
type PageParams = {
 uid: string
} 

export function getStaticProps({ params, previewData }: GetStaticPropsContext<PageParams, MyPreviewData>) { 
  // ... 
}

When using @prismicio/next and its enableAutoPreviews() function, you do not need to type previewData manually.

Our recommended setup uses enableAutoPreviews(): Set up Prismic with Next.js - Documentation - Prismic

Please let us know if need any further clarification,
Best

1 Like
6

Thank you for the response and it's great the docs have been updated!! Although GetStaticPropsContext works for the previewData, take a look at the following error I get for uid and lang...

CleanShot 2022-11-25 at 13.06.32@2x
CleanShot 2022-11-25 at 13.06.32@2x1746Ă—900 136 KB

Property 'uid' does not exist on type 'ParsedUrlQuery | undefined'.ts(2339)

I have not found a way around this. Please advise!

1 Like
7

I'm gathering some information and I will get back to you as soon as possible.

8

Hi @frank.stallone ,

ParsedUrlQuery should only appear if an explicit type parameter for params was not given (note the lack of <...> after GetStaticPropsContext:

export async function getStaticProps({ params }:GetStaticPropsContext) {
        **params**
        // ^ typed as ParsedUrlQuery
}

Here’s what it should look like in order to type params:

type PageParams = {
        uid: string
}

export async function getStaticProps({ params }:GetStaticPropsContext<PageParams>) {
        params
        // ^ typed as PageParams
}