DEV Community

Stefan  ๐Ÿš€
Stefan ๐Ÿš€

Posted on • Originally published at wundergraph.com

Introducing the new Svelte Query client

Svelte FTW

We're thrilled to announce the official launch of our Svelte Query Client with Tanstack Svelte Query support for the Svelte ecosystem! ๐Ÿš€๐ŸŽ‰

This new client is built on top of TanStack Svelte Query, 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 or join the conversation on Discord!

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:

npm install @wundergraph/svelte-query @tanstack/svelte-query
Enter fullscreen mode Exit fullscreen mode

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.

// wundergraph.config.ts
configureWunderGraphApplication({
  // ... omitted for brevity
  codeGenerators: [
    {
      templates: [templates.typescript.client],
      // the location where you want to generate the client
      path: '../src/generated',
    },
  ],
})
Enter fullscreen mode Exit fullscreen mode

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:

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)
Enter fullscreen mode Exit fullscreen mode

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

<script>
    import Header from './Header.svelte';
    import { browser } from '$app/environment'
    import './styles.css';
    import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query'

    const queryClient = new QueryClient({
        defaultOptions: {
            queries: {
                enabled: browser,
            },
        },
    })
</script>

<div class="app">
  <QueryClientProvider client={queryClient}>
    <slot />
  </QueryClientProvider>
</div>
Enter fullscreen mode Exit fullscreen mode

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

<script lang="ts">
    import { createQuery } from '../lib/wundergraph';

    const query = createQuery({
        operationName: "Starwars",
    })
</script>

<div class="counter">
    <h1>Simple Query</h1>
    <div>
        {#if $query.isLoading}
            Loading...
        {/if}
        {#if $query.error}
            An error has occurred:
            {$query.error.message}
        {/if}
        {#if $query.isSuccess}
      <div>
        <pre>{JSON.stringify($query.data.starwars_allPeople)}</pre>
      </div>
    {/if}
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

createQuery

createQuery({
  operationName: 'Weather',
  input: { forCity: city },
})
Enter fullscreen mode Exit fullscreen mode

createQuery (Live query)

createQuery({
  operationName: 'Weather',
  input: { forCity: city },
  liveQuery: true,
})
Enter fullscreen mode Exit fullscreen mode

createSubscription

createSubscription({
  operationName: 'Weather',
  input: {
    forCity: 'Berlin',
  },
})
Enter fullscreen mode Exit fullscreen mode

createMutation

const mutation = createMutation({
  operationName: 'SetName',
})

$mutation.mutate({ name: 'WunderGraph' })

await $mutation.mutateAsync({ name: 'WunderGraph' })
Enter fullscreen mode Exit fullscreen mode

createFileUpload

const fileUploader = createFileUpload()

$fileUploader.upload({
  provider: 'minio',
  files: new FileList(),
})

await $fileUploader.upload({
  provider: 'minio',
  files: new FileList(),
})

$fileUploader.fileKeys // files that have been uploaded
Enter fullscreen mode Exit fullscreen mode

getAuth

const auth = getAuth()

$auth.login('github')

$auth.logout({ logoutOpenidConnectProvider: true })
Enter fullscreen mode Exit fullscreen mode

getUser

const userQuery = getUser()
Enter fullscreen mode Exit fullscreen mode

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.

const queryClient = useQueryClient()

const mutation = createMutation({
  operationName: 'SetName',
  onSuccess() {
    queryClient.invalidateQueries(queryKey({ operationName: 'Profile' }))
  },
})

$mutation.mutate({ name: 'WunderGraph' })
Enter fullscreen mode Exit fullscreen mode

SSR

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

export const load: PageLoad = async ({ parent }) => {
  const { queryClient } = await parent()

  await prefetchQuery(
    {
      operationName: 'Dragons',
    },
    queryClient
  )
}
Enter fullscreen mode Exit fullscreen mode

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

Options

You can use all available options from Svelte Query 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 config.

Resources

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.

Top comments (0)