notes.tsx. Colócalo aquí. Como digo, componente del servidor. Va a usar nuestro tipo de entorno. Como digo, está disponible en env.db. Vamos a preparar una declaración, que va a ser consultando nuestra
database. Esta es solo la API para D1. Si estás usando
Prisma o Drizzle, será diferente. Pero la idea es que estamos haciendo algunas primitivas muy del lado del servidor disponibles dentro de nuestra aplicación
React. Vamos a tomar estos
data, al igual que lo hemos hecho en una búsqueda, excepto que estamos interactuando con nuestra
database en su lugar. Conviértelo en algo de JSX para nosotros. Y luego solo necesitamos asegurarnos de que hemos conectado nuestro entorno todo el camino hasta abajo al componente del servidor que lo necesita. Así que, otra opción aquí sería usar ya sea un contexto de
React. Podrías decir en la parte superior de tu componente del servidor, la carcasa de tu aplicación, en app.tsx, puedes crear un contexto de
React y decir, hey, este es mi contexto de plataforma. Tiene todas mis cosas de plataforma en él, y luego cualquier hijo de nuestra aplicación podría simplemente usar ese contexto cuando quiera. O podrías usar algo un poco más de plataforma, que es el almacenamiento local asíncrono. Como empecé un poco de un read me sobre esto aquí en este archivo. Así que, siéntete libre de echar un vistazo, pero no lo terminé del todo. Si quieres más información sobre esto, hay mejores notas de las personas reales de la especificación en la parte inferior de este read me en el repositorio principal. Esto es básicamente solo un contexto de
React. Es una forma de pasar objetos a los manejadores de ejecución infantil. Así que, puedes simplemente, establecer esto justo en la parte superior de tu manejador, y luego acceder a él en los hijos. Estamos yendo por la solución simple en este momento. Así que, solo vamos a conectarlo todo el camino a través. Así que, vamos a aceptar en nuestro parámetro env aquí para toda la aplicación, y luego lo vamos a pasar a las notas de abajo. Así que, vamos a tomar todo esto. Y luego solo necesitamos hacerlo en un lugar más, que es nuestro trabajador regional. Y el trabajador regional es la cosa que recuerdas que tenemos nuestro Wrangler regional. Esto está diciendo, hey,
Cloudflare, por favor vincula mi trabajador a esta
database. Es el trabajador el que lo recibe. Y entra justo después de la solicitud. Así que, esto, como dije, era como algo de la plataforma. Así que, estamos diciendo exportar, por defecto, fetch. Queremos manejar las solicitudes HTTP. Aquí está la solicitud que recibes, y aquí está el entorno que has configurado para este trabajador. Así que, tiene la
database en él, y simplemente se lo damos a nuestra función de renderizado. Así que, decimos, hey, cuando renderices la aplicación, dale env. Y creo que eso es todo. Sí, eso es todo. Así que, ahora si hacemos
npm run dev, esto debería iniciar una versión local de mi
database, y debería, debería funcionar de forma remota también cuando lleguemos allí. Pero sí, seguro, aquí está toda mi aplicación. Podemos de hecho, debería haber empezado quizás con la versión más aburrida de RSC. Pero aquí está lo que el trabajador regional está devolviendo al trabajador
SSR. Así que, el trabajador
SSR no tiene conocimiento sobre la
database. Todo lo que ve es esto, hey, por favor renderízame como un H3 con esta información en él. Todo el manejo de la
database lo está haciendo el trabajador RSC. Y luego todo se junta cuando renderizas la aplicación del lado del servidor y luego la hidratas del lado del cliente. Así que, todavía puedes hacer clic en todos tus botones y puedes usar los
data del servidor que son muy fundamentalmente, como totalmente inalcanzables en el cliente. Así que, antes estábamos viendo, como, hey, el cliente todavía está haciendo solicitudes para hacer lo que sea, esto sería completamente imposible ahora porque no hay simplemente ninguna forma para que este cliente interactúe con esa
database. No está expuesta en Internet o algo así. Así que, esta es realmente la prueba más lejana, como,
data cargando. La otra cosa que puedes hacer, por supuesto, son las acciones del servidor. Y eso es lo que originalmente esta sección iba a ser. Lo siento si estabas esperando eso específicamente. Pero tuve que cortarlo en el interés del tiempo. Pero es realmente notablemente fácil, en realidad, conseguir que las acciones del servidor funcionen. Ya hemos sentado las bases para ello un poco en ¿dónde estaba? Trabajador global, creo. Sí. Así que, ya estamos buscando este encabezado que
React envía cuando envías una mutación. Y así, todo lo que necesitas hacer es básicamente solo conectar esto a través del trabajador regional. Te mostraré un ejemplo de dónde está esto si quieres llevar esto más allá y verlo todo el camino a través de ti mismo. Pero sí. Eso obviamente probaría el otro lado. Así que, tienes
data cargando con lo que tenemos ahora con esta
database y cosas así. Pero también podrías crear un formulario en tu aplicación, enviarlo, y luego
React puede manejarlo todo el camino hasta la actualización de la
database también. ¿Alguna pregunta sobre esta sección? Creo que... sí, lo único que tengo que decir realmente es si estás interesado en D1, esta es nuestra
database serverless. Hiciste la primera. Así que, felicidades. Pero es una base de datos SQLite bastante ligera. Muy divertido para jugar con ella.
Comments