Client-Side API Endpoints

We've so far learned to interact with APIs and how to build APIs. Here, we briefly look into how SvelteKit can be used to build APIs.

Before going to building APIs, consider the creation of pages in SvelteKit. When creating a page, we create a +page.svelte file, and place it to the src/routes folder or to it's subfolders. If the file is in the src/routes folder, it will be available at the root of the website. If the file is in a subfolder, it will be available at the corresponding path. For example, if we have a src/routes/about/+page.svelte file, the page will be available at https://example.com/about.

First API endpoint

There is a parallel component +server.js in SvelteKit that behaves in a similar way, but it is used to create API endpoints. To demonstrate this, create a folder src/routes/api and create a file +server.js to the folder with the following content.

import { json } from '@sveltejs/kit';

export const GET = async () => {
  return json({ hello: "world", random: Math.random() });
}

Now, when you make a request to the path /api, you receive a JSON-formatted response. As an example, the responses could contain the following. The last query attempts to do a POST request, which is not allowed by the API.

curl localhost:5173/api
{"hello":"world","random":0.7031205534018559}
curl localhost:5173/api
{"hello":"world","random":0.9679861960875553}
curl -X POST localhost:5173/api
POST method not allowed

HTTP methods

The +server.js file can contain multiple functions, one for each HTTP method. For example, the following file contains two functions, one for GET and one for POST.

import { json } from '@sveltejs/kit';

export const GET = async () => {
  return json({ hello: "world", random: Math.random() });
}

export const POST = async () => {
  return json({ hello: "world", random: Math.random() });
}

Now, the API endpoint can be used with both GET and POST methods.

curl -X POST localhost:5173/api
{"hello":"world","random":0.028395684186014014}
curl localhost:5173/api
{"hello":"world","random":0.6480622689379136}

Paths

The paths are defined by the folder names. For example, if we have a file src/routes/api/users/+server.js, the API endpoint is available at /api/users, and if we have a file src/routes/api/books/+server.js, the API endpoint is available at /api/books. The path is available as a parameter in the API endpoint.

SvelteKit also has the concept of "slug", which is used to create define path variables. In SvelteKit, the syntax is [variableName] -- As an example, if we have a file src/routes/api/users/[id]/+server.js, the API endpoint is available at /api/users/123, /api/users/234, and so on.

The parameters are available as a parameter in the API endpoint. For example, if we have a file src/routes/api/users/[id]/+server.js, the API endpoint is available at /api/users/123, /api/users/234, and so on. The id parameter is available as a parameter in the API endpoint.

import { json } from '@sveltejs/kit';

export const GET = async ({ params }) => {
  return json({ hello: "world", random: Math.random(), id: params.id });
}

Now, querying the server, we get the following responses.

curl localhost:5173/api/users/1
{"hello":"world","random":0.7556146848005452,"id":"1"}
curl localhost:5173/api/users/42
http://localhost:5173/api/users/42

Event data

Each function in the +server.js takes a RequestEvent as a parameter. The RequestEvent is an object that contains the following properties.

• request: The actual request object.
• params: The path parameters.
• cookies: Access to getting and setting cookies for the current request.
• fetch: An enhanced fetch function that contains the cookies and other information from the current original request used to load the page.

Of these, the enhanced fetch comes handy when working with server-side functionality. In particular, the fetch contains cookies and authentication information from the original request, which means that it could be used to make authenticated requests to server-side APIs with relative ease. This is not explored further, however.