Svelte client

The Svelte client in PTSQ serves as a lightweight wrapper around svelte-query (opens in a new tab), a powerful library for managing data fetching and state synchronization in Svelte applications.

By leveraging svelte-query under the hood, the Svelte client in PTSQ inherits a wide range of features and benefits, including:

1. Data Fetching: Utilizing svelte-query's stores and utilities, the Svelte client simplifies the process of fetching data from the server and managing the resulting data states within Svelte components.

2. Caching and Invalidation: svelte-query provides robust caching mechanisms that help optimize data fetching by storing and managing previously fetched data. Additionally, it supports data invalidation strategies to ensure that cached data remains up-to-date.

3. Pagination and Infinite Loading: The Svelte client facilitates pagination and infinite loading patterns with ease, thanks to svelte-query's built-in support for paginated data fetching and automatic triggering of additional data fetches as needed.

4. Mutation Handling: svelte-query simplifies the handling of mutations (e.g., updates, creations, deletions) by providing stores for performing mutations and automatically updating the local cache and UI in response to mutation results.

5. Error and Loading State Handling: With svelte-query, the Svelte client efficiently manages error and loading states, making it easy to display loading spinners, error messages, or retry options based on the current data fetching status.

Overall, by leveraging svelte-query, the Svelte client in PTSQ offers a robust and efficient solution for managing data fetching and state synchronization in Svelte applications, enabling developers to build responsive and dynamic user interfaces with minimal effort.

import { createSvelteClient } from '@ptsq/svelte-client';
import type { BaseRouter } from './server';
 
const client = createSvelteClient<BaseRouter>({
  url: 'http://localhost:4000/ptsq',
});

Query

<script lang="ts">
  const response = client.test.createQuery({
    name: /* string */ 'John',
  });
</script>
 
{#if $response.isFetching}
	<p>Loading...</p>
{:else if $reponse.data}
	<p>{$response.data /* string */}</p>
{:else}
	<p>{$response.error.message /* PtsqClientError */}</p>
{/if}

Mutation

<script lang="ts">
  const response = client.test.createMutation();
</script>
 
<button on:click={() =>
  $reponse.mutate({
    name: /* string */ 'John'
  })
}>
  Mutate
</button>
 
{#if $response.isPending}
	<p>Loading...</p>
{:else if $reponse.data}
	<p>{$response.data /* string */}</p>
{:else}
	<p>{$response.error.message /* PtsqClientError */}</p>
{/if}

Infinite query

the createInfiniteQuery is exposed only if your server accepts pageParam property with any type. That means the input has to extends { pageParam: any }.

resolver
  .args(
    Type.Object({
      pageParam: Type.Integer(),
    }),
  )
  .output(
    Type.Object({
      data: Type.Array(Type.String()),
      nextCursor: Type.Integer(),
    }),
  )
  .query(({ input }) => {
    return {
      data: data.slice(
        input.pageParam * pageSize,
        (input.pageParam + 1) * pageSize,
      ),
      nextCursor: input.pageParam + 1,
    };
  });

<script lang="ts">
  const response = client.test.createInfiniteQuery(
    {}, // pageParam is automatically passed by the infinite query, you should not have it in the input
    {
      initialPageParam: 0,
      getNextPageParam: (lastPage) => lastPage.nextCursor,
    }
  );
</script>
 
<div>
  <p>data: {JSON.stringify($response.data)}</p>
  <button onClick={() => $response.fetchNextPage()}>load next</button>
</div>