Theo's Typesafe Cult•3y ago

Need help to approach Layout issue

So i've got a Layout wrapper component for my (almost fully) static app - Problem is, this Layout requires certain Static Data, product categories.
The way I do it now is every page calls my

<Layout categories={categories}/>

<Layout categories={categories}/>

component with the categories props which are statically fetched on every page's getStaticProps - Is there a good way for me to be able to wrap this Layout component across all pages in _app while still having access to the

categories

categories

data?

Xaohs

X

XaohsOP•1/8/23, 6:52 PM

For context:
What I have now -

What I want

deforestor

D

deforestor•1/9/23, 12:33 AM

So, I'm not sure I understood it correctly, but that kinda reminds me of how I've implemented my MainLayout component and a custom title prop:

deforestor

D

deforestor•1/9/23, 12:36 AM

This way my pages all have access to this prop:

deforestor

D

deforestor•1/9/23, 12:36 AM

@ me if you think that's kind of what you need and I can elaborate on the implementation

deforestor

Ddeforestor So, I'm not sure I understood it correctly, but that kinda reminds me of how I'v...

Xaohs

X

XaohsOP•1/9/23, 11:01 AM

Hey yea that's what I need. Could you elaborate how to implement this?

deforestor

D

deforestor•1/9/23, 11:34 AM

Sure, I added the prop I wanted to the next.d.ts, to get the types right

deforestor

D

deforestor•1/9/23, 11:35 AM

And then I use getServerSideProps to add a translated title

deforestor

D

deforestor•1/9/23, 11:36 AM

And the wrapper is just like I showed before, just another component

deforestor

D

deforestor•1/9/23, 11:37 AM

Then I get the out of the props and wrap with the Layout

deforestor

Ddeforestor And then I use getServerSideProps to add a translated title

deforestor

D

deforestor•1/9/23, 11:38 AM

I don't think you'll need this, but I'm just showing just in case

deforestor

Ddeforestor I don't think you'll need this, but I'm just showing just in case

Xaohs

X

XaohsOP•1/9/23, 11:41 AM

Won't this force you to use serverSideProps in every page tho?

Xaohs

X

XaohsOP•1/9/23, 11:42 AM

Or can it be done with staticprops too

deforestor

D

deforestor•1/9/23, 11:42 AM

It doesn't because I can just have a default

deforestor

D

deforestor•1/9/23, 11:43 AM

But in my application, I kinda want the translation for every page anyways

deforestor

D

deforestor•1/9/23, 11:44 AM

so I'm obligated to use ssp either way

Xaohs

X

XaohsOP•1/9/23, 11:44 AM

Hm. My usecase really requires me to use staticProps for this

Xaohs

X

XaohsOP•1/9/23, 11:44 AM

As it's quite a lot of data that changes very infrequently

deforestor

D

deforestor•1/9/23, 11:47 AM

Hm.. yeah I don't really know how that would work for static prop, maybe it's still the same?

Xaohs

X

XaohsOP•1/9/23, 11:47 AM

I'll try it in a bit

deforestor

D

deforestor•1/9/23, 11:49 AM

the way I see it, your props are just another part of the pageProps, no?

Xaohs

XXaohs For context: What I have now - ```ts //index.tsx <Layout categories={categ...

deforestor

D

deforestor•1/9/23, 11:50 AM

So you could essentially just pass

categories

categories

down from App to your Wrapper, then access it from your component

deforestor

D

deforestor•1/9/23, 11:51 AM

And the whole thing I showed there is kinda useless for you

deforestor

Ddeforestor So you could essentially just pass `categories` down from App to your Wrapper, t...

Xaohs

X

XaohsOP•1/9/23, 11:53 AM

But I can't SSG the categories in App

Xaohs

X

XaohsOP•1/9/23, 11:53 AM

It's not just some JSON data, it requires me to query my database.

Xaohs

X

XaohsOP•1/9/23, 6:12 PM

@deforestor It works with SSG as well. Thank you!

Xaohs

X

XaohsOP•1/9/23, 6:12 PM

This solution works great

Xaohs

X

XaohsOP•1/9/23, 6:13 PM

A bit unsafe typesafety wise, as you can forget to pass those props through your page, but ye

Xaohs

XXaohs A bit unsafe typesafety wise, as you can forget to pass those props through your...

deforestor

D

deforestor•1/9/23, 6:36 PM

Yeah, I was trying to figure a better way to type it as well

deforestor

D

deforestor•1/9/23, 6:36 PM

I'm glad it worked!

Xaohs

X

XaohsOP•1/9/23, 6:36 PM

Ye thank you! Exactly what I was looking for