SvelteKit + Svelte Query Example

The SvelteKit example demonstrates the power of code generation, when it comes to integrating WunderGraph with frontend frameworks like Svelte.

The SvelteKit example uses the WunderGraph Svelte Query package

Configuration

Let's start by configuring WunderGraph.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// wundergraph.config.ts
const spaceX = introspect.graphql({
apiNamespace: 'spacex',
url: 'https://spacex-api.fly.dev/graphql/',
});
configureWunderGraphApplication({
apis: [spaceX],
server,
operations,
generate: {
codeGenerators: [
{
templates: [...templates.typescript.all],
path: '../src/lib/.wundergraph/generated',
},
],
},
});

Define an Operation

1
2
3
4
5
6
7
# .wundergraph/operations/Dragons.graphql
query Dragons {
spacex_dragons {
name
active
}
}

Use from Svelte

Your operations will be compiled into RPC endpoints. The template will generate TypeScript client, using which we can create Svelte Query client utilities

1
2
3
4
5
6
7
8
9
import { createSvelteClient } from '@wundergraph/svelte-query';
import { createClient } from '../generated/client';
import type { Operations } from '../generated/client';
const client = createClient(); // Typesafe WunderGraph client
// These utility functions needs to be imported into your app
export const { createQuery, createFileUpload, createMutation, createSubscription, getAuth, getUser, queryKey } =
createSvelteClient<Operations>(client);

In Svelte component,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script lang="ts">
import { createQuery } from '$lib/wundergraph';
const dragonsQuery = createQuery({
operationName: 'Dragons',
});
</script>
<div class="results">
{#if $dragonsQuery.isLoading}
<p>Loading...</p>
{:else if $dragonsQuery.error}
<pre>Error: {JSON.stringify($dragonsQuery.error, null, 2)}</pre>
{:else}
<pre>{JSON.stringify($dragonsQuery.data, null, 2)}</pre>
{/if}
</div>

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
export const load: PageLoad = async ({ parent }) => {
const { queryClient } = await parent();
await prefetchQuery(
{
operationName: 'Dragons',
},
queryClient
);
};

This implementation is based on TanStack Svelte Query's prefetchQuery approach

Learn more

Deploy to WunderGraph Cloud

Deploy to WunderGraph

Previous
Remix

Was this article helpful to you?
Provide feedback

Edit this page