Interface - newbie question

[night estuary]

Can someone please explain me what is happening in this code...

I need to pass D1Database client (Drizzle ORM) to the Context of trpc-nuxt handler.

The docs here https://orm.drizzle.team/docs/installation-and-db-connection/sqlite/d1 says that this is the way... but what is happening here? Is the D1Database client passing as a type of the interface in env parameter?

My problem is that I cant add env: Env parameter to the context, because handler expects only 1 paramter and throws TS error. Is there another way to pass D1Database client to the context?

Demo project:
https://github.com/juretopolak/trpc-nuxt/blob/main/server/trpc/context.ts

[onyx lodge]

Hey @night estuary, could you share a screenshot of the error? I can't seem to recreate this issue locally in your project.

[night estuary]

Hey @onyx lodge ... the error is in server/api/trpc/[trpc].ts file...

[onyx lodge]

ah sorry was looking in the wrong place

[night estuary]

I'm newbie to TS, but looks like that createContext in the createNuxtApiHandler accepts only 1 argument.

And I have no idea how to pass the client other than with a second argument...

[onyx lodge]

hmm yeah you're right, the CreateContextFn type from trpc-nuxt only accepts a single argument

type CreateContextFn<TRouter extends AnyRouter> = (event: H3Event) => MaybePromise<inferRouterContext<TRouter>>;

do you have to pass env as a parameter here? perhaps there is another way to access this D1Database? sorry, not familiar with this library

[night estuary]

I was following their documentation, also using this library for the first time...
Only with CloudFlare D1 database is client passed like this.
And I don't even understand how.
Isn't interface used to declare the type?
How is in this example env.DB passed as an Interface?

[gritty iris]

what do you mean by "passed as an interface"?

pretty sure the env parameter comes from the Cloudflare Worker

since you can specify your env. variables yourself, Cloudflare doesn't provide a very detailed type for env, simply object

feel free to override that type with one of your own, once you are sure what variables will be present, in order to access them

you can easily see that in the example

name = "YOUR PROJECT NAME"
main = "src/index.ts"
compatibility_date = "2022-11-07"
node_compat = true
 
[[ d1_databases ]]
binding = "DB"
database_name = "YOUR DB NAME"
database_id = "YOUR DB ID"

here, the env variable for the binding in called DB

so an env variable of name DB will be present on the env object inside ofyour Worker

you don't need to pass that env parameter to any function

your createContext doesn't need it as parameter when it can access it from the Worker parameter directly

https://developers.cloudflare.com/workers/runtime-apis/fetch-event/#parameters

https://developers.cloudflare.com/workers/configuration/environment-variables/

[night estuary]

@gritty iris thanks for pointing me in the right direction... since I would like to use tRPC I guess I would also need this plugin https://github.com/toyamarinyon/cloudflare-pages-plugin-trpc on the top of trpc-nuxt plugin, right?
I'm not accessing worker directly as far as i know...

[gritty iris]

are you using Cloudflare Pages or Cloudflare Workers? @night estuary

[night estuary]

Cloudflare Pages.

[gritty iris]

https://developers.cloudflare.com/pages/framework-guides/deploy-a-nuxt-site/#use-bindings-in-your-nuxt-application

no clue what the plugin you link does, never used Cloudflare Pages nor tRpc before

but from Cloudlfare's example, you can easily access the bindings from the context

and access your D1 database