Fetch data when query params change?

[tar-aldev]

I am struggling with fetching the data when query params change. There may be a lot of different search params in the url, so useQueryState was not an option.
I tried useQueryStates as well as

React.useEffect(
  () => subscribeToQueryUpdates(({ searchParams }) => {},
  []
)

The structure I have is:

const ServerComponent = ({searchParams}) => {
  const initialData = await fetchInitialData({searchParams});

  return <ItemsList initialData={initialData} />
}


// ItemsList
'use client'
export const ItemsList = ({ initialData }) => {
  const prevSearchParamsRef = useRef(searchParams);
  const [items, setItems] = useState(initialData);

  const [searchParams] = useQueryStates({
    ...
  });

  useEffect(() => {
    const fetch = async (searchParams) => {
      try {
        const { data } = await apiService().get('/items', searchParams);

       setItems(data);
      } catch (error) {}
    };

    if (!isEqual(prevSearchParamsRef.current, searchParams)) {
      prevSearchParamsRef.current = searchParams;
      fetch({ ...searchParams, page: 0 });
    }
  }, [searchParams]);
}

As soon as I do setItems I see weird behaviour:

1. url is updated (we have a filters pane and selecting a filter updates url with the help of useQueryState
2. request is made with correct query params
3. url is reset i.e. if initial page url is /items then I add a filter so it becomes /items?filter=someValue, after request and set state it becomes /items again.
4. another request is made (because url was reset for some reason)

I double checked and there is no logic which would do that.
I also tried to fetch data in

React.useEffect(
  () => subscribeToQueryUpdates(({ searchParams }) => {},
  []
)

But that caused an infinite loop...

Am I doing something wrong or is it not possible to it at all?

[tar-aldev]

Sorry for the noise - looks like there is some additional logic in the code which causes this issue.

[franky47]

I wouldn't recommend depending on subscribeToQueryUpdates, it's marked as deprecated and will be removed in v2 which will be released early February.

url is reset

What version of Next.js and nuqs are you using ? Please refer to the compatibility table, there have been known cases where nuqs' shallow updates would be reset by the Next.js router.

One last tip: you can await the setState to know when the URL is up to date, and trigger your client-side fetch there, if it makes sense. The awaited result is a URLSearchParams object of the location.search that was applied.

[tar-aldev]

"next": "13.5.6",
"nuqs": "^1.15.3",

I wouldn't recommend depending on subscribeToQueryUpdates, it's marked as deprecated and will be removed in v2 which will be released early February.

Yes, I saw that, but we are currently at next 13 and can't upgrade right now.

One last tip: you can await the setState to know when the URL is up to date, and trigger your client-side fetch there, if it makes sense. The awaited result is a URLSearchParams object of the location.search that was applied.

Unfortunately that won't work for us, because url update happens in a completely different component in another part of components tree. There is like a sidebar with filters, which updates the url and then main content which needs to track those changes and refetch data.

I am not 100% sure yet, but it looks like the problem was also related to usage of next.js actions for data fetching. After I moved it to be a plain client side data fetching it seems to work fine. I guess I'll stick to this approach for now.

const [searchParams] = useQueryStates({
    queryKey1: ...,
    queryKey2, ...
  });

useEffect(() => {
    if (!isEqual(searchParamsRef.current, searchParams)) {
      searchParamsRef.current = searchParams;
      fetchItems(searchParams)
    }
  }, [searchParams]);

Not sure if useQueryStates was initially designed for this, but it seems to do what's needed 🙈