A developer implements server-side logic to fetch product data from a database and render it in a Next.js application. The process includes creating API routes, defining TypeScript interfaces, using Material UI for a responsive grid layout, and organizing components within the project structure.
Length 13:54
Captions English (Generated), Spanish (Auto-translated), French (Auto-translated), Korean (Auto-translated), Portuguese (Auto-translated), Vietnamese (Auto-translated) #next.js #web development #api integration #server actions #material ui #typescript #prisma #backend development #frontend #programming
0:00 So in this lecture, we want to start implementing the ability 0:03 to actually 0:04 fetch products from our server and render them within our 0:07 application here so that we can actually see the products 0:10 that we've created. 0:11 To do this, we'll simply go back to our products 0:14 controller in our 0:15 backend and expose a new get route to retrieve 0:19 products. So let's create a new get route 0:23 called 0:24 async getProducts. 0:28 And just like any other route in our system, we'll protect this with our 0:31 JWT authentication using the JWT Auth guard. 0:36 Then we'll simply return from this 0:38 productService.getProducts. So let's 0:42 go ahead and implement this function in the product service now. 0:47 So in the product service, we'll simply just have to create this 0:51 async getProducts function 0:53 that will return 0:55 this.prismaService.product.findMany 1:01 to go ahead and fetch all of the products in our database with no filter 1:05 applied. Later on, we will actually implement 1:08 pagination to be able to fetch only a subset of the products in our 1:12 database. For now, let's just retrieve everything in this one 1:16 request 1:17 by using findMany. 1:19 All right, so back in Postman now, I'm gonna launch a request to 1:23 log in to our application. So send an auth login 1:27 request with valid credentials to make sure we have our JWT 1:30 Auth cookie set in Postman. Now, if we send a request 1:34 off to our server to actually fetch products and our 1:38 new products route, we can see we get back 1:42 a payload here with all of the products in our database just as 1:46 expected. So this is great. We're now able to retrieve products from 1:50 the 1:50 database correctly. So now that we can actually access our 1:54 API to retrieve all of our products, let's go ahead and 1:58 call this on our UI to retrieve these products and display them to our
The rest of the transcript is for members.
Sign in 