useQueryState with SWR

[GVALFER]

Hey,

Really i love this hook, and I would like to use it with SWR, however swr resets the url after detecting changes.
any way to use it with swr? I want build a search filter using this hook.

thanks in advance

[franky47]

however swr resets the url after detecting changes

Not sure what you mean here, do you have an example showcasing this behaviour?

[GVALFER]

look at this example:

"use client";

import useSWR from "swr";
import { get } from "@/api";
import { useQueryState } from "next-usequerystate";

const fetcher = (url) => get(url).then((res) => res);

const Swr = ({ url, fetchRows, initialData, columns }) => {
    const [search, setSearch] = useQueryState("search");

    if (search) {
        url += `?search=${search}`;
    }

    const { data } = useSWR(url, fetcher, {
        fallbackData: initialData,
    });

    const newdata = data?.results?.data;

    const { rows } = fetchRows(newdata);

    return (
        <div className="ml-40">
            <input
                type="text"
                className="block rounded-md w-full py-2 pl-10 text-gray-900 border border-gray-300 focus:ring-indigo-600 sm:text-sm"
                value={search || ""}
                onChange={(e) => {
                    setSearch(e.target.value);
                }}
            />

            <table className={`min-w-full divide-y divide-gray-300`}>
                <thead>
                    <tr>
                        {columns.map((column) => (
                            <th key={column.key} className={`py-3.5 pl-4 pr-3 text-left text-sm text-gray-600 font-light sm:pl-3 cursor-pointer`}>
                                {column.name}
                            </th>
                        ))}
                    </tr>
                </thead>
                <tbody>
                    {rows.map((row, index) => (
                        <tr key={row.key} className={`cursor-pointer hover:bg-cyan-50`}>
                            {columns.map((column) => (
                                <td
                                    key={column.key}
                                    className={`whitespace-nowrap py-4 pl-4 pr-3 text-gray-900 sm:pl-3 last:rounded-r first:rounded-l`}
                                >
                                    {row[column.key]}
                                </td>
                            ))}
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
};

export default Swr;

Result: https://p202.p0.n0.cdn.getcloudapp.com/items/qGuYlvvw/76ef9c8b-420a-47e3-b298-5c9e8226f12e.gif

[franky47]

Could you try to add the following line to node_modules/next-usequerystate/dist/index.js:75 (and in node_modules/next-usequerystate/dist/index.cjs:82 just to be safe):

if (source === 'external') { console.trace(state, url); }

This will let you know where the URL is being reset from, and shed some light on what is going on.

[GVALFER]

Hi

Thanks for the answer.
Unfortunately that didn't help too much.
Anyway, i will continue use useState, sadly.