S
SolidJS•2w ago
anthy

Initial search params

Is there a way to set initial search parameters for a route? I'm building an application where users are able to save their table sorting/filters into local storage and the next time they visit the page, those are automatically populated to the search params. 
function Route() {
  const defaultParams = getDefaultParamsFromStorage();
  // ???
  const [searchParams] = useSearchParams();
  const data = createAsync(() => getData(searchParams));

  return <div>{data()}</div>
}
function Route() {
  const defaultParams = getDefaultParamsFromStorage();
  // ???
  const [searchParams] = useSearchParams();
  const data = createAsync(() => getData(searchParams));

  return <div>{data()}</div>
}
I have tried some approaches all of them are either flawed or don't work. 
function Route() {
  const defaultParams = getDefaultParamsFromStorage();
  window.location.replaceState(null, "", "?" + params)
  const [searchParams] = useSearchParams();
  const data = createAsync(() => getData(searchParams));

  return <div>{data()}</div>
}
function Route() {
  const defaultParams = getDefaultParamsFromStorage();
  window.location.replaceState(null, "", "?" + params)
  const [searchParams] = useSearchParams();
  const data = createAsync(() => getData(searchParams));

  return <div>{data()}</div>
}
Doesn't seem to work (which as a side note seems odd to me that useSearchParams doesn't get the initial state from the URL?) 
function Route() {
  const defaultParams = getDefaultParamsFromStorage();
  const [searchParams, setSearchParams] = useSearchParams();
  setSearchParams(defaultParams);
  const data = createAsync(() => getData(searchParams));

  return <div>{data()}</div>
}
function Route() {
  const defaultParams = getDefaultParamsFromStorage();
  const [searchParams, setSearchParams] = useSearchParams();
  setSearchParams(defaultParams);
  const data = createAsync(() => getData(searchParams));

  return <div>{data()}</div>
}
This one does work but causes data to be fetched twice. Is that even possible or does anyone have any suggestions how to work around it? Router 0.15.3 Solid 1.9.4
4 Replies
Alex Lohr
Alex Lohr•2w ago
Why would this initial search params need to be visible?
anthy
anthyOP•2w ago
Its gives feedback to the user that their default params were applied
Alex Lohr
Alex Lohr•2w ago
You could guard createAsync against fetching without searchParams: 
function SearchPage() {
  const [searchParam, setSearchParam] = useSearchParams();
  const defaultParams = getDefaultParamsFromStorage();
  if (!isValidSearch(searchParam)) setSearchParam(defaultParams);
  const data = createAsync(() => isValidSearch(searchParam) && getData(searchParams));
  return <div>{data()}</div>
}
function SearchPage() {
  const [searchParam, setSearchParam] = useSearchParams();
  const defaultParams = getDefaultParamsFromStorage();
  if (!isValidSearch(searchParam)) setSearchParam(defaultParams);
  const data = createAsync(() => isValidSearch(searchParam) && getData(searchParams));
  return <div>{data()}</div>
}
anthy
anthyOP•2w ago
It's not really what my problem is though, the empty params will be correct too. What I want is if there are default ones present I want them to be loaded into the router before the createAsync runs In the worst case scenario I could modify your suggestion to do what I want now that I think about it. I could probably create a separate signal something like areParamsReady and guard against that. Doesn't seem like the cleanest solution in the world tho heh

Did you find this page helpful?