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

SolidJS•13mo ago•

5 replies

anthy

Initial 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

Initial search params

Similar Threads

Initial search params

Similar Threads

Similar Threads

Similar Threads