Tenemos una bandera completada que puede ser booleana. Eso va a ser esta casilla de verificación aquí. Y luego podemos simplemente añadir, podemos establecer nuestro creado en y actualizado en que básicamente obtenemos gratis de Prisma. No vamos a utilizar estos dos campos a lo largo de la masterclass, así que puedes sentirte libre de saltártelos, pero los voy a añadir aquí.
Ahora voy a detener mi servidor. Voy a ejecutar npm run DB push. Lo que esto va a hacer es compilar el archivo de esquema, hacer cambios en mi database, mi SQLite database, y luego también tener el cliente TypeScript generado. Así que voy a ejecutar eso npm run DB push. Y una vez que esto esté completo, puedo volver a npm run dev, y tengo mi servidor funcionando. Así que voy a cerrar el archivo de esquema aquí. Voy a refrescar esto, y todo debería seguir funcionando como se esperaba. Realmente no hemos hecho ningún cambio en la aplicación. Sólo hemos añadido un nuevo modelo a la database.
Pero ahora lo que podemos hacer, es en lugar de este array, esta página aquí es algo que se llama un componente de servidor. Si no has utilizado componentes de servidor en ningún momento, puedes pensar en ellos como un punto final de obtención en tu servidor, lo que significa que este componente realmente se ejecuta sólo en el servidor y no en el cliente. Esto no se ejecuta en el navegador, lo que significa que podemos acceder directamente a nuestra database aquí. Podemos decir await DB.todo.findmany, y podemos hacer esto una función asíncrona. Así que ahora esta función se parece menos a un componente React y se parece más a un manejador de solicitudes en un punto final de express o un punto final de API de algún tipo. Sí. Así que puedes pensar en esto como la función que se ejecuta sólo en el servidor, por lo que podemos simplemente async await nuestros data de nuestra database aquí, y podemos renderizarlos como JSX. Así que ahora si lo guardo aquí, lo que va a pasar es que deberías ver no todos encontrados, porque ahora estamos realmente obteniendo estos todos de la database, pero no hay nada allí todavía, así que vemos no todos encontrados. Y esta es sólo una idea muy básica de los componentes del servidor aquí. Vamos a profundizar un poco más en esto. Ahora realmente no tendré alcance o tiempo para explicar muchas cosas de los componentes del servidor a lo largo de esta masterclass, así que muchas veces, si tienes preguntas, de nuevo, siéntete libre de ponerlo en el chat, pero realmente te animaría a que te aguantes, y tal vez podamos charlar sobre ellos después de la masterclass, o puedes visitar la documentación de NextJS.
Pero ahora vamos a añadir algo de interactividad. Ahora mismo si vamos aquí, esto no funciona. Así que si hago clic en añadir, no hace realmente nada. Si hago clic en refrescar, no hay todo, porque no tenemos la lógica para añadir un todo en la database. Así que vamos a nuestro componente Añadir Todo y veamos qué está pasando. Así que esto es un formulario, como se esperaba. Tenemos un campo de entrada aquí para esta entrada, y luego obviamente tenemos el botón que podemos hacer clic, o simplemente podemos pulsar enter. Pero en el manejador de envío, no estamos haciendo realmente nada. Sacamos el valor de los data del formulario. Llamamos a esta función Añadir Todo, pero todo lo que está haciendo es registrarla en la consola. Así que si abro la consola aquí, vamos a moverla a la parte inferior, y puedo añadir esto todo. Si presiono enter, sólo se está registrando en la consola. No está pasando nada más.
Y este componente aquí, porque hemos marcado este archivo como use client, lo que básicamente significa es que estos componentes React son los componentes React que conocemos y amamos. Tenemos hooks aquí. Tenemos manejadores de eventos. Así que estos no son componentes de servidor, son simplemente componentes regulares de React. Pero este archivo de página, este es un componente de servidor, por lo que podemos acceder a la database dentro de él. Así que para ese error, Nelly, asegúrate de que el int, la i se supone que es mayúscula, no minúscula. Así que todos los tipos en un esquema Prisma comienzan con una letra mayúscula. Genial. Bueno, así que este es un componente regular de React. ¿Cómo hacemos que añada algo a una database, nuestro componente Añadir Todo? Así que primero asegurémonos de que este componente Añadir Todo viene como props. Así que definamos algunas props aquí. Y digamos que Añadir Todo, el tipo de la prop Añadir Todo es que toma un string y devuelve una promesa de void. Lo que significa que esta función Añadir Todo, en lugar de ser definida aquí, es ahora algo que estamos pasando a este componente Añadir Todo. Y podemos simplemente llamarlo aquí.
Bueno, así que ahora la función no necesita ser definida en un componente, ahora necesita ser pasada. ¿Cuál es el gran problema? Este componente cliente está siendo renderizado por un componente de servidor, lo que significa, de nuevo, ahora que estamos en la página, estamos en modo de servidor completo. Lo que significa que podemos darle esta función. La función Añadir Todo que acabamos de definir en el cliente, que este componente necesita esta entrada, necesita esta prop. Y podemos definirla en el lado del servidor para que actúe como otro punto final de la API. Así que aquí podemos decir, esperar db.todo.create con este título. Y necesitamos darle el valor por defecto completado de falso. Bueno, ¿qué está pasando aquí? Acabo de hablar de cómo los componentes de servidor pueden ser pensados como un punto final de obtención. Así que cuando haces una solicitud de obtención a un servidor, obtienes un montón de data, o obtienes una página HTML. De manera similar, un componente de servidor es lo que obtienes cuando haces una solicitud de obtención, obtienes alguna interfaz de usuario. Esta función aquí, que también se llama una acción, puedes pensar en ella como una solicitud de publicación al servidor. Ahora una cosa que necesitamos marcar aquí es, llámalo use server. Esta directiva aquí, similar a esta directiva use client, es obviamente para decirle al bundler que esta es una función especial que necesita ser tratada de manera especial. Pero también nos dice como desarrolladores que esta es una función que básicamente es un punto final de publicación en nuestro servidor. No tenemos que adjuntarlo explícitamente a una URL y añadir la solicitud de análisis y hacer todo el material de solicitud de respuesta. Pero ese es el modelo mental. Esta función aquí se va a llamar cuando alguien haga una solicitud de publicación a nuestro servidor. Y luego cuando esta función se pasa a nuestro componente React real, automáticamente va a ser cambiada a una función que hace el punto final de publicación en lugar de nosotros realmente enviando este código al cliente. De nuevo podemos entrar en muchos más detalles sobre esto, pero quiero mantener eso fuera del alcance de la masterclass.
Comments