Create SolidStart API Routes to Expose Public Endpoints to Your Users

Daniel Afonso
InstructorDaniel Afonso
Share this video with your friends

Social Share Links

Send Tweet
Published 2 months ago
Updated a month ago

API routes are an excellent way to turn some server-side code into public endpoints.

In this lesson, we will learn how to leverage SolidStart to create API routes to expose some internal functions to our users.

[00:00] In this lesson, we did some changes to our project and added the lib folder. This folder has 2 files. Let's start by reviewing the DB one. Here we are importing create storage from 1 storage so that we can have a local key value storage. We set up some types for our user. We initiate our storage [00:20] and seed it with some initial data. In the users file, we have the functions responsible for interacting with the storage. Our get users function is responsible for getting a list of all the users. The get user function receives an ID and returns that specific user. Finally, the add user function [00:40] is responsible for receiving user data and adding it to the storage. One way to expose these functions as APIs is by creating API routes. And so at start, to create an API route, all we need to do is create a folder named API inside the routes folder and the file for each API route we want to create. [01:00] Now, we need to add a function to handle the HTTP methods we want to support. Let's start with the get request. All you have to do is export a function named get. And now every time a get request happens to the API slash users route, this function will be hit. Now the purpose of this [01:20] get is to get the users list. So let's import the get users function and return its output. And with this, we have our first API route. Let's check it working. In our app, let's now access the API slash users route. And as you can see, it returns the users list. The next step is posting [01:40] data. So let's create a function to handle a post request. In order to add data, we are going to need to extract it from an event. So let's receive an event as a parameter and type it. Now let's add our user and to do so, we are going to need the add user function. So let's import it. Then let's [02:00] pass it the JSON data we received in our request. And with this, our users should be created successfully. Now let's give feedback to the function that called this post and to let it know that it was successful. To do so, let's return a response with the user data and the 2 zero one created status code. Let's make sure this works [02:19] by going into our console and sending a curl post request. As you can see, the request runs and returns the data. But let's now ensure that the users list was updated by running our get request by accessing the API slash users route. As you can see, the new entry was added. So far, we can search for [02:39] all the users, but we are missing the feature for getting a single user. To do so, let's create a folder called users and inside the file that with the dynamic route called ID. In here, we want to receive a get request with a specific ID to fetch that user. So let's start by creating our get function and call our get user function. As [02:59] this is a dynamic route, every time the route API slash users slash ID is hit, that ID will be injected into these route parameters. To access that ID, we will need to access this route event and then access its parameters to finally have our ID. Now if we check our route and for instance, we want to get the information [03:19] of the user with this ID, let's just access the API slash users slash 1, and we should get only that user information.