kitten.sh
1---
2title: '@urql/svelte'
3order: 3
4---
5
6# Svelte API
7
8> **Note:** These API docs are deprecated as we now keep TSDocs in all published packages.
9> You can view TSDocs while using these packages in your editor, as long as it supports the
10> TypeScript Language Server.
11> We're planning to replace these API docs with a separate web app soon.
12
13## queryStore
14
15The `queryStore` factory accepts properties as inputs and returns a Svelte pausable, readable store
16of results, with type `OperationResultStore & Pausable`.
17
18| Argument | Type | Description |
19| --------------- | -------------------------- | -------------------------------------------------------------------------------------------------------- |
20| `client` | `Client` | The [`Client`](./core.md#Client) to use for the operation. |
21| `query` | `string \| DocumentNode \` | The query to be executed. Accepts as a plain string query or GraphQL DocumentNode. |
22| `variables` | `?object` | The variables to be used with the GraphQL request. |
23| `requestPolicy` | `?RequestPolicy` | An optional [request policy](./core.md#requestpolicy) that should be used specifying the cache strategy. |
24| `pause` | `?boolean` | A boolean flag instructing [execution to be paused](../basics/vue.md#pausing-usequery). |
25| `context` | `?object` | Holds the contextual information for the query. |
26
27This store is pausable, which means that the result has methods on it to `pause()` or `resume()`
28the subscription of the operation.
29
30[Read more about how to use the `queryStore` API on the "Queries" page.](../basics/svelte.md#queries)
31
32## mutationStore
33
34The `mutationStore` factory accepts properties as inputs and returns a Svelte readable store of a result.
35
36| Argument | Type | Description |
37| ----------- | -------------------------- | ---------------------------------------------------------------------------------- |
38| `client` | `Client` | The [`Client`](./core.md#Client) to use for the operation. |
39| `query` | `string \| DocumentNode \` | The query to be executed. Accepts as a plain string query or GraphQL DocumentNode. |
40| `variables` | `?object` | The variables to be used with the GraphQL request. |
41| `context` | `?object` | Holds the contextual information for the query. |
42
43[Read more about how to use the `mutation` API on the "Mutations"
44page.](../basics/svelte.md#mutations)
45
46## subscriptionStore
47
48The `subscriptionStore` utility function accepts the same inputs as `queryStore` does as its first
49argument, [see above](#querystore).
50
51The function also optionally accepts a second argument, a `handler` function. This function has the
52following type signature:
53
54```js
55type SubscriptionHandler<T, R> = (previousData: R | undefined, data: T) => R;
56```
57
58This function will be called with the previous data (or `undefined`) and the new data that's
59incoming from a subscription event, and may be used to "reduce" the data over time, altering the
60value of `result.data`.
61
62[Read more about how to use the `subscription` API on the "Subscriptions"
63page.](../advanced/subscriptions.md#svelte)
64
65## OperationResultStore
66
67A Svelte Readble store of an [`OperationResult`](./core.md#operationresult).
68This store will be updated as the incoming data changes.
69
70| Prop | Type | Description |
71| ------------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
72| `data` | `?any` | Data returned by the specified query |
73| `error` | `?CombinedError` | A [`CombinedError`](./core.md#combinederror) instances that wraps network or `GraphQLError`s (if any) |
74| `extensions` | `?Record<string, any>` | Extensions that the GraphQL server may have returned. |
75| `stale` | `boolean` | A flag that may be set to `true` by exchanges to indicate that the `data` is incomplete or out-of-date, and that the result will be updated soon. |
76| `fetching` | `boolean` | A flag that indicates whether the operation is currently in progress, which means that the `data` and `error` is out-of-date for the given inputs. |
77
78## Pausable
79
80The `queryStore` and `subscriptionStore`'s stores are pausable. This means they inherit the
81following properties from the `Pausable` store.
82
83| Prop | Type | Description |
84| ----------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
85| `isPaused$` | `Readable<boolean>` | A Svelte readable store indicating whether the operation is currently paused. Essentially, this is equivalent to `!fetching` |
86| `pause()` | `pause(): void` | This method pauses the ongoing operation. |
87| `resume()` | `resume(): void` | This method resumes the previously paused operation. |
88
89## Context API
90
91In `urql`'s Svelte bindings, the [`Client`](./core.md#client) is passed into the factories for
92stores above manually. This is to cater to greater flexibility. However, for convenience's sake,
93instead of keeping a `Client` singleton, we may also use [Svelte's Context
94API](https://svelte.dev/tutorial/context-api).
95
96`@urql/svelte` provides wrapper functions around Svelte's [`setContext`](https://svelte.dev/docs#run-time-svelte-setcontext) and
97[`getContext`](https://svelte.dev/docs#run-time-svelte-getcontext) functions:
98
99- `setContextClient`
100- `getContextClient`
101- `initContextClient` (a shortcut for `createClient` + `setContextClient`)