Iam trying to pass down data from a parent astro component to a child. The child however is rendered using a <slot /> so i can build nested layouts. Is this doable as of right now?
#SSR, Slots and pass down data
jaunty gulch
Id like to have specific stuff fetched in a parent component and want to reuse it in a child component or well slotted component.
jaunty sparrow
Using a nanostore or other form of state management is probably what you want
jaunty gulch
Its all ssr
I would need to link a store to a session id of my user
Another idea is to grab the data in my middleware. Get a project when the projectId param is populated then just put it into locals
jaunty sparrow
I think then a middleware and storing data in context.locals would be most appropriate
Ah you just said that
jaunty gulch
Now i just need to find a way to correctly type it
Using astro:db
without just putting a flat interface in the env.d.ts
jaunty sparrow
Adding types in env.d.ts is the recommended way of doing this https://docs.astro.build/en/guides/middleware/#middleware-types It's also likely the only way
jaunty gulch
yea i just have isues extracting the type from astro:db
jaunty sparrow
What issues are you having, maybe I can help
jaunty gulch
So this is the schema definition for Project
const Project = defineTable({
columns: {
id: column.text({
primaryKey: true
}),
name: column.text(),
}
})
i get a record via db.select()....
That record i want to store in Astro.locals.project
but i need to extend this in env.d.ts
/// <reference path="../.astro/types.d.ts" />
interface Project {
id: string
name: string
}
declare namespace App {
interface Locals {
session: import("lucia").Session | null;
user: import("lucia").User | null;
project: Project | undefined;
projectPermissions: Array<string> | undefined
}
}
Right now i cust manualy clone the Project
but id rather derive it from db somehow
jaunty sparrow
Have you tried using typeof?
jaunty sparrow
I mean something like typeof db.select().from(Project)
jaunty gulch
It wont even let me import anything db related to the env.d.ts
jaunty sparrow
yeah because it's just for declarations
jaunty gulch
Yes i know, thats the tricky part 😄
jaunty sparrow
You should be able to use drizzles type helpers on the schemas https://orm.drizzle.team/docs/goodies#type-api
InferSelectModel is probably what you want
jaunty gulch
not as long as i cannot properly grab the type
jaunty sparrow
You can't import from 'astro:db' in the env file I'm pretty sure
jaunty gulch
The typereference headline has the declarations
jaunty sparrow
you probably have to import from .astro
jaunty gulch
but they wont show
jaunty sparrow
yes
but this is a virtual env module
sorry
vite module
so typescript alone has noe idea what to do with it
In your .astro file there should be a types.d.ts file
that's what points to the type declarations for vite virtual modules
you should probably import from there
jaunty gulch
if i have to define that over and over, ia can also just use any and roll with that
or unknown
jaunty sparrow
yeah the folder
or directory
what I'm wondering though. You've got to define Project somewhere. Can't you export the type from there?
jaunty gulch
its defined in the db.ts
via defineSchema then you import it from astro:db
or defineTable
jaunty sparrow
well it's still a regular typescript file
jaunty gulch
which generates this stuff under the hood
jaunty sparrow
just export the type with infer from there and import in the env.d.ts
jaunty gulch
Man that env.d.ts is so fragile
So i have this now
which yields the correct type
So in the env.d.ts i do this
Now the locals stuff does not work properly
jaunty sparrow
restart vscode
jaunty gulch
If you slightly mistype in the env.d.ts the locals part breaks
he does not like the import statement
jaunty gulch
Ah yeah thats working now
Typescript.... Dont worry it wont make js anymore confusing....
thanks mate
jaunty sparrow
all good