8

I'm using quite a new technology called Astro (https://astro.build/) to build a completely static, server side rendered page, shipping zero JS.

I have a page with a form that is a simple text input, when the user fills this in and clicks the submit button, it sends a GET request to an astro page. The url will look something like this ....

/?search=1234

What I want to be able to do is get access to that querystring parameter in order to redirect my user to another static page /1234.

I am trying to access the quesrystring parameter with Astro.request, but the object, including the parameters attribute is completely empty.

Is there anyway to access the querystring parameters from a .astro page/file?

Mathieu Dhondt
  • 8,405
  • 5
  • 37
  • 58
DrLazer
  • 2,805
  • 3
  • 41
  • 52

4 Answers4

11

you can use Astro.url (available since v1.0.0-rc).

e.g.

---
const search = Astro.url.searchParams.get('search')! || '';
---

{search ? <p>you searched for: {search}</p>}

<!-- rest of your template markup -->
widyakumara
  • 1,065
  • 1
  • 9
  • 14
  • 1
    This does not work, at least for SSG Astro; confusingly, Astro returns a URL object, but the searchParams are always empty, even if there really is a query parameter in the current window URL. – Nate Glenn Nov 11 '22 at 12:49
  • @NateGlenn This works when you put Astro into SSR mode. https://docs.astro.build/en/guides/server-side-rendering/ – Chris76786777 Dec 02 '22 at 22:39
  • This doesn't work unless its SSR – sayandcode Jan 02 '23 at 08:10
  • If using SSG, you can hydrate the component and use a ` – seancdavis May 05 '23 at 10:16
6

I reached out to the developers of Astro and eventually had an email back. This functionality is not possible with Astro, it is not a bug, rather a misunderstanding from me about how Astro works. The pages in Astro are rendered up-front and are entirely static.

DrLazer
  • 2,805
  • 3
  • 41
  • 52
  • 1
    It _is_ possible, either using vanilla JavaScript in a static page as already stated in @Someone's answer or on the server when using Astro's API routes. – thewildandy Sep 24 '22 at 11:30
4

I wanted to do the same thing, but this seems to be a bug in Astro that doesn't provide queryString parameters, but here is a way to implement it with just Vanilla javascript, but note that this can be only done client side as it is just javascript...

For the queryString:

localhost:3000/test?search=123

To get the parameters:

const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());

This approach can be seen in: this question as well

Someone
  • 350
  • 3
  • 13
  • 1
    This approach works well for static pages (it's not a bug, just a consequence of the fact that astro is a static site generator). You can use a similar approach server-side if using Astro's API routes. – thewildandy Sep 24 '22 at 11:32
3

This is possible with Astro and can be done using <script></script> tags in a .astro component.

Here's an example.astro file:

---
<!-- imports go in here -->
---
<script>
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
console.log('params', params);
</script>

<!-- rest of your template markup -->

Documentation of using <script></script> tags in this way with Astro can be found here: https://docs.astro.build/en/core-concepts/component-hydration/

(Scroll down to 'Can I Hydrate Astro Components?').

This feature is specifically there for simple DOM interactivity or cases where you need access to the JavaScript window or document.

joshuaiz
  • 415
  • 4
  • 13
  • There is no section labelled 'Can I Hydrate Astro Components?' on the page you provided a link for. You may be referring to deprecated docs. – Marc Bosse Dec 06 '22 at 15:21