Dani Akash

April 18, 2023·3min read

Archive Notice

This article is archived and no longer maintained. It describes an earlier version of WunderGraph, including experimental features that are no longer part of the current product. The concepts and examples may not work as described. For current documentation and guidance, see https://wundergraph.com/cosmo

We're thrilled to announce the official launch of our **Svelte Query Client** with Tanstack Svelte Query support for the Svelte ecosystem! 🚀🎉

State of GraphQL Federation 2026

How are teams governing schema changes, handling production traffic, and measuring Federation success? Share your experience and get early access to the full report. For every valid survey completed, we'll donate $30 to [UNICEF](https://www.unicef.org/).

[Take the Survey](https://8bxwlo3ot55.typeform.com/to/zIJKRQUe)

This new client is built on top of [TanStack Svelte Query](https://tanstack.com/query/v4/docs/svelte/overview), and seamlessly integrates the power of WunderGraph into the Svelte ecosystem. Enjoy fully typesafe querying, mutating, and subscribing to your WunderGraph API in Svelte!

🔥 _Remember, this release is still in beta!_ 🔥 Your feedback is invaluable to us! If you have any suggestions or issues, please don't hesitate to [open an issue on Github](https://github.com/wundergraph/wundergraph/issues/new/choose) or [join the conversation on Discord](/content/discord/index.html)!

Let's build amazing things together with Svelte and WunderGraph! 🌟

Let's go through quickly how to set it up and how it works.

## Installation

Install the Svelte Query client:

1

## Configuration

Svelte Query client provide a set of utilities to connect your APIs with svelte. Before we can use these functions, you need to modify your code generation to include the base typescript client.

1

2

3

4

5

6

7

8

9

10

11

Run `wunderctl generate` to generate the code.

> In SvelteKit, you'll have to keep the generated files under the `src/` directory

Now you can configure the svelte query functions. Create a new file, for example `src/lib/wundergraph.ts` and add the following code:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

Now, in your svelte layout setup Svelte Query Provider such that it is always wrapping above the rest of the app.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

Now you can use svelte-query to call your wundergraph operations!

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

### createQuery

1

2

3

4

### createQuery (Live query)

1

2

3

4

5
### createSubscription

1

2

3

4

5

6
### createMutation

1

2

3

4

5

6

7
### createFileUpload

1

2

3

4

5

6

7

8

9

10

11

12

13
### getAuth

1

2

3

4

5
### getUser

1
### queryKey

You can use the `queryKey` helper function to create a unique key for the query in a typesafe way. This is useful if you want to invalidate the query after mutating.

1

2

3

4

5

6

7

8

9

10

## SSR

If you are working with SvelteKit, this package provides `prefetchQuery` utility to help with SSR

1

2

3

4

5

6

7

8

9

10

This implementation is based on TanStack Svelte Query's [prefetchQuery](https://tanstack.com/query/v4/docs/svelte/ssr#using-prefetchquery) approach

## Options

You can use all available options from [Svelte Query](https://tanstack.com/query/latest/docs/svelte/overview) with the generated functions. Due to the fact that we use the operationName + variables as **key**, you can't use the `key` option as usual. In order to use conditional-fetching you can use the `enabled` option.

You can configure the utilities globally by using the Svelte Query's [QueryClient](https://tanstack.com/query/v4/docs/react/reference/QueryClient) config.

## Resources

- [TanStack Svelte Query](https://tanstack.com/query/v4/docs/svelte/overview)

## Summary

Svelte Query is now officially supported by WunderGraph.

We would love to know more about your experience with Svelte. Do you use Vite, or SvelteKit? How often does your projects require SSR? What do you like about it?

Share it in the comments below or come join us on our [Discord server](/content/discord/index.html).