is nuqs compatible with Astro?

[ardzero]

if so, any docs/guides for how to set it up?

[franky47]

In a single island, the React SPA adapter should work fine, the issue we had was to synchronise multiple islands, as there isn't a way to share a common <NuqsAdapter> context provider across all islands (each island would have to have its own adapter, which isn't great).

[Lenghak]

Hope fully we can find a solution for this! Another approach is to write a new adapter that use nanostores under the hood (really lightweight btw). I really have no idea if this is going to be a good approach.

[franky47]

Yeah everyone I talked to seemed to point to those nanostores thing.

I'm not familiar with Astro, but if someone wants to give it a shot, feel free to open a PR!

Relevant PR: #771

[Lenghak]

I see! As I read through the comment and his experience with the workaround, I think there is something that we can do by using one provider in the root layout. Let me try something our first and I will open a PR if it works.

[Lenghak]

PR Created! #997

[rimzzlabs]

What if I combine Nuqs with nanostores?
I imagined it should work by utilizing side effect, no?

[Lenghak]

Yes! That's somewhat we are trying to accomplish right now. Checkout #997 for more details.

[rimzzlabs]

Sorry, not to be the guy, but I just wanna share my own implementation to retrieve and mutate query params on React components with Astro

import { F, pipe, S } from "@mobily/ts-belt";
import { useCallback, useEffect, useState } from "react";
import type { z } from "zod";

function onPushState(params: URLSearchParams) {
	let pathname = window.location.pathname;
	let queryParams = params.toString();
	let url = pipe(pathname, (pathname) => {
		return pipe(
			pathname,
			F.ifElse((n) => !!n, S.append(`?${queryParams}`), F.identity),
		);
	});

	window.history.replaceState({}, "", url);
}

export function useQueryParams<
	S extends z.ZodSchema,
	T = undefined | z.infer<S>,
>(key: string, schema: S, defaultValue?: T) {
	let [params, setLocalParams] = useState<z.infer<S> | null>(
		defaultValue ?? null,
	);

	let onChangeParams = useCallback(
		(newValue: string | null) => {
			let newParams = new URLSearchParams(window.location.search);

			if (!newValue) {
				newParams.delete(key);
				setLocalParams(defaultValue ?? null);

				onPushState(newParams);
				return;
			}

			let parsedValue = schema.safeParse(String(newValue));
			if (parsedValue.error) {
				if (import.meta.env.DEV) {
					console.info("Skipped invalid value", newValue);
				}
				return;
			}
			setLocalParams(parsedValue.data);
			newParams.set(key, newValue);
			onPushState(newParams);
		},
		[key, schema, defaultValue],
	);

	useEffect(() => {
		let updateParams = () => {
			let params = new URLSearchParams(window.location.search);
			let value = params.get(key);

			if (!value) {
				if (defaultValue) return setLocalParams(defaultValue);
				return setLocalParams(null);
			}

			let parsedValue = schema.safeParse(value);
			if (parsedValue.error) {
				if (import.meta.env.DEV) console.info("Skipped invalid value", value);
				return;
			}

			setLocalParams(parsedValue.data);
		};

		updateParams();

		let onPopState = () => updateParams();

		window.addEventListener("popstate", onPopState);

		return () => window.removeEventListener("popstate", onPopState);
	}, [defaultValue, key, schema]);

	return [params, onChangeParams] as T extends undefined
		? [null | z.infer<S>, typeof onChangeParams]
		: [z.infer<S>, typeof onChangeParams];
}

[Lenghak]

Looks promising. 👍 You can come and help us if you want. We do need some help, actually.