Skip to Content

WunderGraph with Svelte

Published: 2022-05-24

WunderGraph integrates out of the box with Svelte. You can use the generated TypeScript client to handle authentication and data fetching.

Find below a code snipped from our example application using svelte and WunderGraph. The full code is available on GitHub. You can clone the repository and follow the instructions in the README.md file to get started.

The example repository was created by one of our community members, Kyle Chamberlain. Thank you for your contribution, Kyle!

If you have questions or comments, you can meet Kyle on our Discord using this handle: "koleok#7997"

Please scroll down to Configuration to see how to configure code-generation for Svelte.

<script context="module" lang="ts">
import { fade } from 'svelte/transition'
import { Client } from '../../.wundergraph/generated/client'
import type { Load } from '@sveltejs/kit'
export const load: Load = async () => {
const client = new Client()
const user = await client.fetchUser()
const messageQuery = await client.query.Messages({})
const messages =
messageQuery.status === 'ok'
? messageQuery.body.data?.findManymessages.reverse()
: []
return {
props: {
serverSideUser: user || null,
serverSideMessages: messages,
},
}
}
</script>
<script lang="ts">
import { createWundergraphStore } from '$lib/wundergraph.store'
import type { User } from '../../.wundergraph/generated/client'
import type { Message } from '../lib/types'
export let serverSideUser: User
export let serverSideMessages: Message[]
const { client, user: clientSideUser, initialized } = createWundergraphStore()
let message = ''
let messages = serverSideMessages
client.liveQuery.Messages({ refetchOnWindowFocus: true }, (res) => {
if (res.status === 'ok') {
messages = res.body.data?.findManymessages.reverse()
}
})
const addMessage = (message: string) =>
client.mutation.AddMessage({ input: { message } })
const logout = async () => {
await client.logout()
window.location.reload()
}
const userInfo = client.query.UserInfo({})
const user =
typeof window !== 'undefined' && $initialized
? $clientSideUser
: serverSideUser
</script>
<div class="container">
{#if messages?.length}
<h3>Messages</h3>
<fieldset>
<table>
<colgroup>
<col style="width: 15em" />
<col />
</colgroup>
<thead>
<tr>
<th>from</th>
<th>message</th>
</tr>
</thead>
<tbody>
{#each messages as message}
<tr transition:fade>
<td>{message.users.name}</td>
<td>{message.message}</td>
</tr>
{/each}
</tbody>
</table>
</fieldset>
{/if}
{#if user}
<h3>Add Message</h3>
<fieldset>
<input
placeholder="message"
value={message}
on:change={(e) => (message = e.target['value'])}
/>
<button on:click={() => addMessage(message)}> submit </button>
</fieldset>
<h3>User</h3>
<fieldset>
<table>
<tbody>
<tr>
<td>Name</td>
<td>{user.name}</td>
</tr>
<tr>
<td>Email</td>
<td>{user.email}</td>
</tr>
<tr>
<td>Roles</td>
<td>{user.roles}</td>
</tr>
<tr>
<td>Last Login</td>
{#await userInfo}
<td>loading...</td>
{:then info}
{#if info.status === 'ok' && info.body.data?.findFirstusers?.lastlogin}
<td>{info.body.data.findFirstusers.lastlogin}</td>
{/if}
{/await}
</tr>
</tbody>
</table>
<button on:click={logout}> Logout </button>
</fieldset>
{:else}
<div>
<p>Please Login to be able to use the chat!</p>
<button on:click={() => client.login.github()}>Login GitHub</button>
</div>
{/if}
</div>
<style>
table {
column-width: 100px;
}
</style>

Configuration#

In order to generate the correct client, you should use the following configuration in your wundergraph.config.ts file:

// wundergraph.config.ts
configureWunderGraphApplication({
...
codeGenerators: [
{
templates: [
templates.typescript.client,
templates.typescript.inputModels,
templates.typescript.jsonSchema,
templates.typescript.linkBuilder,
templates.typescript.operations,
templates.typescript.responseModels,
],
},
],
...
})

This configuration will ensure that only those templates are generated that are needed.


Product

Comparisons

Subscribe to our newsletter!

Stay informed when great things happen! Get the latest news about APIs, GraphQL and more straight into your mailbox.

© 2022 WunderGraph