A simple yet powerful, lightweight data query library for Svelte 5, providing full control with built-in functionalities. Built with TypeScript for easy usage and strong typing.
- TypeScript Support: Fully typed for better development experience.
- Query Management: Simple and flexible querying system.
- Data Management: Supports fetching, caching, and mutations.
- Dynamic Querying: Fetch dynamic endpoints effortlessly.
npm install svelte-simple-query<script lang="ts">
import { Query, useQuery } from 'svelte-simple-query';
Query.setup({
baseURI: 'https://jsonplaceholder.typicode.com'
});
interface UserSchema {
id: number;
name: string;
}
const users = useQuery<UserSchema[]>('/users');
users.fetch();
</script>
<div>
{#if users.isLoading}
Loading...
{:else if users.data}
{JSON.stringify(users.data)}
{:else if users.isError}
{users.isError}
{:else}
...
{/if}
</div>Query.setup(options) for the global configuration of queries.
-
baseURI(string) - Base API endpoint. -
baseInit(object) - Default request options. -
cacheTimeout(number) - Cache expiration time in milliseconds, default2000. -
onError(query, error)(function) - Callback for errors. -
onSuccess(query)(function) - Callback for successful requests. -
loadingSlowTimeout(number) - Timeout duration in milliseconds before triggering slow loading handler, default30000. -
onLoadingSlow(query)(function) - Callback triggered when a query is loading slower than expected. -
shouldRetryWhenError(boolean) - Whether to retry on failure, defaultfalse. -
retryCount(number) - Number of retries on failure, default5. -
retryDelay(number) - Delay between retries in milliseconds, default10000.
Query.clear(endpoint?: optional)
Clears cached query results and resets internal query states. Useful when logging out users, refreshing data, or preventing stale responses.
Parameters:
- endpoint (optional, string) - If provided, only clears the cache for the specified endpoint.
Usage
Query.clear(); // Clears all cached queries
Query.clear("/users"); // Clears cache only for the "/users" endpoint
Query.clearGroup(group: string)
Clears all cached queries associated with a specific group. This is useful for managing grouped queries, such as clearing related data when switching views or updating dependent resources.
Parameters:
- group (string) - The name of the query group to clear.
Usage
const usersPageA = useQuery("/users?page=a", { group: "user-data" });
const usersPageB = useQuery("/users?page=b", { group: "user-data" });
Query.clearGroup("user-data"); // Clears all queries tagged under "user-data"
Query.group(group: string)
Clears all cached queries associated with a specific group. This is useful for managing grouped queries, such as clearing related data when switching views or updating dependent resources.
Parameters:
- group (string) - The name of the query group to clear.
Usage
const usersPageA = useQuery("/users?page=a", { group: "user-data" });
const usersPageB = useQuery("/users?page=b", { group: "userQuery-data" });
const usersPageB = useQuery("/users", { groups: ["userQuery-data", "user-data"] });
Query.group("user-data"); // Return all queries tagged under "user-data"
Query.group("userQuery-data"); // Return all queries tagged under "userQuery-data"
-
useQuery(endpoint, options): Fetch data from the specified endpoint with optional settings. -
useSingleQuery(() => string, options): Fetch a dynamic single resource dynamically with optional settings. -
mutate(endpoint, options): Perform a mutation the given endpoint with optional settings.
query.{...} for managing data state and execution.
-
data: The response data from the query. -
isError: Boolean indicating if an error occurred. -
isLoading: Boolean indicating if the query is loading. -
fetch(): Initiates a data fetch request. -
refetch(options): Re-fetches the query data with optional configurations. -
mutate(options): Mutate existing query data dynamically. -
clear(): Clears the query cache, data, isError and isLoading. -
endpoint: The API endpoint associated with the query.
MIT