My sapper app revolves around a table ponent. This table ponent has state (offset, limit, sort, filters, etc) that I would like to represent in the query string of the URL.

The table works fine currently by directly updating its state:

<button on:click="{() => offset += limit}" disabled="{offset + rows.length >= count}">»</button>

I see that there is the page read-only store which can give me access to the current value of the query string. I imagine I can use something like URLSearchParams to generate links with the relevant value updated.

Is there a better way of handling this (some way of directly binding variables to the query string)? If not, what would be the best way to generate the links with the updated query strings?

EDIT:

My current solution is the following function:

const getLink = queryStringDiff =>  {
  const query = $page.query;
  const path = $page.path;
  const str = Object.entries({...query, ...queryStringDiff}).reduce(
    (acc, cur) => `${acc}&${cur[0]}=${cur[1]}`, ''
  ).replace('&', '?');
  return `${path}${str}`;
}

Which I reference in an a tag replacing the above button with:

href="{getLink({'offset': (offset - limit)})}"

It works, but I feel like there should be a better way

My sapper app revolves around a table ponent. This table ponent has state (offset, limit, sort, filters, etc) that I would like to represent in the query string of the URL.

The table works fine currently by directly updating its state:

<button on:click="{() => offset += limit}" disabled="{offset + rows.length >= count}">»</button>

I see that there is the page read-only store which can give me access to the current value of the query string. I imagine I can use something like URLSearchParams to generate links with the relevant value updated.

Is there a better way of handling this (some way of directly binding variables to the query string)? If not, what would be the best way to generate the links with the updated query strings?

EDIT:

My current solution is the following function:

const getLink = queryStringDiff =>  {
  const query = $page.query;
  const path = $page.path;
  const str = Object.entries({...query, ...queryStringDiff}).reduce(
    (acc, cur) => `${acc}&${cur[0]}=${cur[1]}`, ''
  ).replace('&', '?');
  return `${path}${str}`;
}

Which I reference in an a tag replacing the above button with:

href="{getLink({'offset': (offset - limit)})}"

It works, but I feel like there should be a better way

• javascript
• svelte
• sapper
• svelte-store

1 Answer 1

You can access query string state from the page store:

<script>
  import { stores } from '@sapper/app';
  const { page } = stores();

  $: start = $page.query.p * $page.query.itemsPerPage;
  $: end = start + $page.query.itemsPerPage;

  $: slice = myData.slice(start, end); // plus filtering, sorting etc
</script>

<table>
  <thead>...</thead>
  <tbody>
    {#each slice as row}
      <tr>...</tr>
    {/each}
  </tbody>
</table>

<a href="my-table?p={$page.query.p + 1}">next</a>

If you need to navigate programmatically, you can use goto:

<script>
  import { stores, goto } from '@sapper/app';

  // ...

  const next = () => {
    goto(`my-table?p=${$page.query.p + 1}`);
  };
</script>