> ## Content Index
> Fetch the complete content index at: https://reactpractice.dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# How to pass query params to a GET request with fetch
- URL: https://reactpractice.dev/articles/how-to-pass-query-params-to-a-get-request-with-fetch/
- Published: 2025-02-12T13:53:26.000Z
- Updated: 2026-06-01T01:58:02.000Z
- Author: Corina Udrescu
- Tags: Articles, #corina-2, #Import 2026-06-09 12:07

Doing a GET request with `fetch` is easy:

```
const data = await fetch(`https://pokeapi.co/api/v2/pokemon`)
                .then(reponse => response.json());

```

But what if you need to pass query string params? E.g. `https://pokeapi.co/api/v2/pokemon?limit=100000&offset=0`.   
How would you write this if you wanted to pass dynamic values for the limit or offset?

You can use the [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL%5FAPI?ref=reactpractice.dev) and [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams?ref=reactpractice.dev) browser APIs:

```
const url = new URL('https://pokeapi.co/api/v2/pokemon');
const params = { limit: "100000", offset: "0" }
url.search = new URLSearchParams(params).toString();

const data = await fetch(url).then(reponse => response.json());

```

And that's it!

### Looking for a shorter version?

You can just concatenate the `params` and `toString` will be called for you behind the scenes:

```
const params = new URLSearchParams({ limit: "100000", offset: "0" });
fetch(`https://pokeapi.co/api/v2/pokemon?${params}`);

```

### Wondering why you can't just concatenate the params?

What is wrong with just concatenating the limit and offset using template strings?

```
const limit = "100", offset = 10;
fetch(`https://pokeapi.co/api/v2/pokemon?limit=${limit}&offset=${offset}`);

```

This *works* in this case, but you're not encoding the values, so you might run into unexepected behaviour if the user inputs special characters. For example, the `#` is considered a special characters that marks the end of the query string. If your user "hacks" the query params and passes "100#" as the limit value, your offset will be ignored!

![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/2025/03/without-encoding.png)

*If you want to try this out for yourself, go to* [*https://pokeapi.co/*](https://pokeapi.co/?ref=reactpractice.dev) *and try out the requests in the Chrome DevTools Console.*

To fix this, you need to encode the query parameters before passing them - which you can do with the [encodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global%5FObjects/encodeURIComponent?ref=reactpractice.dev) function:

![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/2025/03/with-encoding.png)

As you can see, manually encoding every query parameter is quite tedious, which is why [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams?ref=reactpractice.dev) API is a nicer solution!