SvelteKit + Svelte Query Example

// 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',
      },
    ],
  },
});

# .wundergraph/operations/Dragons.graphql
query Dragons {
  spacex_dragons {
    name
    active
  }
}

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);

<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>

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

  await prefetchQuery(
    {
      operationName: 'Dragons',
    },
    queryClient
  );
};