Taking advantage of query parameters in SvelteKit

Justin Ahinon
Last updated on
Table of Contents
SvelteKit version: 1.0.0
If you’ve been in the web development industry for a while, you’ve probably heard of query parameters, and you’ve probably happened to use them. Most of the time in JavaScript projects with routing included, query parameters can be a bit of a pain to work with.
With SvelteKit, there a few utilities (mostly from native web APIs/functions) that are provided out of the box, and that allow dealing easily with query parameters on the client and on the server.
In this article, we will go through a few examples of how to use query parameters in SvelteKit.
What are query parameters?
Query parameters are a part of a URL that comes after a question mark
?
and are separated by an ampersand
&
. They can be used both for storing data and performing actions on the client, but also for passing data to the server.
For example, in the URL
https://example.com/?name=John&age=30
, the query parameters are
name
and
age
, and their values are
John
and
30
respectively.
Client-side query parameters with SvelteKit
In SvelteKit, on the client, most of the properties related to the current page and the URLs are available in the
$page
store from the
$app/stores
module.
This will output the following:
You will notice the
searchParams
property, which is just the native URL.searchParams property. This property can help retrieve the query parameters that are present in the current URL.
For instance, when I visit the following URL:
http://localhost:5173/query-params?name=John&age=30
, I can access the query parameters with the following code:
Now you can use the parameters and perform any actions you want on the client.
One example of something I’ve done lately was on EasyRegex. When someone generates a Regex, there’s a button that take them to the validation page with the generated Regex already in the input. Validations URLs look like this:
https://www.easyregex.com/validate?regex=%5Ehttps%3F%3A%2F%2F%28www.%29%3Fyoutube%5C.com%2F%28watch%5C%3F%29%3F%28%5B%5E%2F%5D*%29%28%3F%3Cid%3E%5B%5E%3F%5D*%29%3F%24&test=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DwKs1C9TEess
https://www.easyregex.com/validate?regex=%5Ehttps%3F%3A%2F%2F%28www.%29%3Fyoutube%5C.com%2F%28watch%5C%3F%29%3F%28%5B%5E%2F%5D*%29%28%3F%3Cid%3E%5B%5E%3F%5D*%29%3F%24&test=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DwKs1C9TEess
.
Using query parameters on the server
SvelteKit can be considered as a full-stack web framework. Because of that, every page that is rendered has a corresponding request, that has the same
url
property as the one we saw earlier. This means that we can access the query parameters on the server as well in load functions and form actions.
Here is an example of how to access query parameters in a load function:
The
url
property can be directly destructured from the load function parameters. It is also available on the
event
parameter of the
load
function. So, we could also write the following:
Having access to the query parameters on the server load function is very useful. For example, you can use them to fetch data from an API and return it to the client in case the URL contains a necessary parameter.
For example:
If you are using SvelteKit day-to-day, it is useful to know that the framework takes a lot of advantage of a lot of native browser APIs. This is the case of the URL interface, but also to a lot of other APIs.
Read the official SvelteKit documentation about web standards.