title: '@urql/svelte' order: 3#

Svelte API#

Note: These API docs are deprecated as we now keep TSDocs in all published packages. You can view TSDocs while using these packages in your editor, as long as it supports the TypeScript Language Server. We're planning to replace these API docs with a separate web app soon.

queryStore#

The queryStore factory accepts properties as inputs and returns a Svelte pausable, readable store of results, with type OperationResultStore & Pausable.

Argument	Type	Description
`client`	`Client`	The `Client` to use for the operation.
`query`	`string \| DocumentNode \`	The query to be executed. Accepts as a plain string query or GraphQL DocumentNode.
`variables`	`?object`	The variables to be used with the GraphQL request.
`requestPolicy`	`?RequestPolicy`	An optional request policy that should be used specifying the cache strategy.
`pause`	`?boolean`	A boolean flag instructing execution to be paused.
`context`	`?object`	Holds the contextual information for the query.

This store is pausable, which means that the result has methods on it to pause() or resume() the subscription of the operation.

mutationStore#

The mutationStore factory accepts properties as inputs and returns a Svelte readable store of a result.

Argument	Type	Description
`client`	`Client`	The `Client` to use for the operation.
`query`	`string \| DocumentNode \`	The query to be executed. Accepts as a plain string query or GraphQL DocumentNode.
`variables`	`?object`	The variables to be used with the GraphQL request.
`context`	`?object`	Holds the contextual information for the query.

subscriptionStore#

The subscriptionStore utility function accepts the same inputs as queryStore does as its first argument, see above.

The function also optionally accepts a second argument, a handler function. This function has the following type signature:

type SubscriptionHandler<T, R> = (previousData: R | undefined, data: T) => R;

This function will be called with the previous data (or undefined) and the new data that's incoming from a subscription event, and may be used to "reduce" the data over time, altering the value of result.data.

OperationResultStore#

A Svelte Readble store of an OperationResult. This store will be updated as the incoming data changes.

Prop	Type	Description
`data`	`?any`	Data returned by the specified query
`error`	`?CombinedError`	A `CombinedError` instances that wraps network or `GraphQLError`s (if any)
`extensions`	`?Record<string, any>`	Extensions that the GraphQL server may have returned.
`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.
`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.

Pausable#

The queryStore and subscriptionStore's stores are pausable. This means they inherit the following properties from the Pausable store.

Prop	Type	Description
`isPaused$`	`Readable<boolean>`	A Svelte readable store indicating whether the operation is currently paused. Essentially, this is equivalent to `!fetching`
`pause()`	`pause(): void`	This method pauses the ongoing operation.
`resume()`	`resume(): void`	This method resumes the previously paused operation.

Context API#

In urql's Svelte bindings, the Client is passed into the factories for stores above manually. This is to cater to greater flexibility. However, for convenience's sake, instead of keeping a Client singleton, we may also use Svelte's Context API.

@urql/svelte provides wrapper functions around Svelte's setContext and getContext functions:

setContextClient
getContextClient
initContextClient (a shortcut for createClient + setContextClient)