In this blog post, we will explore how to create API routes for a full stack application. API routes are essential for connecting the frontend components to the backend database and fetching data. We will specifically focus on creating the API routes and endpoints for making API calls and retrieving data.
Setting up the Database
Before we dive into creating the API routes, we need to set up the database. In this example, we will be using a local PostgreSQL database. To connect to the database, we have a schema file that defines a table called “todos” with four fields: id, name, username, and created_at.
Currently, we have two records in the todos table. The next step is to write the API routes to connect to the database and fetch the data.
Using Prisma for API Routing
To create the API routes, we will be using the Prisma library, specifically the Prisma client. The Prisma client allows us to connect to the database and execute queries.
To start with the API routing, we need to create a folder called “API” under the “pages” directory. Any file we create within this folder will be considered an API route by Next.js.
For our example, since we have a todos table, we will create a file named “todos.ts” within the API folder. This file will handle the API requests related to the todos table.
Setting up the API Route
Within the “todos.ts” file, we start by importing the necessary dependencies: the Next.js request and response modules, and the Prisma client. The request module allows us to access the request parameters, while the response module enables us to send responses back to the client.
Next, we define the main function, which is an asynchronous function named “handler”. This function takes in the request and response objects as parameters.
Handling the GET Request
In our API route, we will focus on the GET request for now. Within the “handler” function, we check if the request method is “GET”. If it is, we execute the code inside the if statement.
To handle any potential exceptions, we wrap the code in a try-catch block. If an exception occurs, we respond with a status code of 500 (server error) and return the exception as a JSON response.
Next, we use the Prisma client to connect to the database and fetch all the records from the todos table. We use the “findMany” method of the Prisma client to retrieve all the records.
Once we have the records, we respond to the client with a status code of 200 (success) and send the todos as a JSON response.
Testing the API Route
To test the API route, we can use a tool like Thunder Client. We send a GET request to “localhost:3000/api/todos” to retrieve all the todos. If everything is set up correctly, we should see the todos as a response.
Retrieving a Single Record
In addition to retrieving all the records, we may also need to fetch a single record from the todos table. To do this, we need to pass the id of the record as a parameter.
To handle this scenario, we create a new file within the API folder named “[id].ts”. This file will handle requests for retrieving a specific todo record based on its id.
Similar to the previous API route, we import the necessary dependencies and define the “handler” function. However, this time we also extract the id from the request query.
Within the Prisma client query, instead of using “findMany”, we use “findUnique” and pass the id as a parameter. This will fetch the specific record matching the id.
Testing this API route is similar to the previous one. We can send a GET request to “localhost:3000/api/todos/[id]” and replace [id] with the actual id of the record we want to retrieve.
If the id exists in the todos table, we should see the corresponding record as a response. Otherwise, the response will be empty.
Conclusion
In this blog post, we learned how to create API routes for a full stack application using Next.js and Prisma. We explored retrieving all the records from a table and fetching a single record based on its id.
By creating API routes, we can connect the frontend components of our application to the backend database and seamlessly retrieve and display data. This is a crucial step in building a complete full stack application.
Thank you for reading! We hope you found this blog post helpful in understanding how to create API routes for a full stack application.
Made with VideoToBlog
