SvelteKit Quickstart

This quickstart guide will show you how to use WunderGraph with SvelteKit and goes into a couple of details like server side rendering and TypeScript operations.

We'll use the SvelteKit example to get started. This example is a basic SvelteKit application that uses WunderGraph to fetch data from the SpaceX GraphQL API .

# Init a new project
npx create-wundergraph-app my-project --example sveltekit

# Move to the project directory
cd my-project

# Install dependencies
npm i

npm start

WunderGraph will now do some code generation and start the WunderNode and the SvelteKit dev server. A new browser window will open at http://localhost:3000 . You should see the WunderGraph & SvelteKit example homepage with the JSON result of the Dragons operation.

{
  "data": {
    "spacex_dragons": [
      { "name": "Dragon 1", "active": true },
      { "name": "Dragon 2", "active": true }
    ]
  }
}

WunderGraph lives in the .wundergraph directory by default. This is where you can configure your WunderGraph application and write your operations.

Let's take a look at the default configuration open .wundergraph/wundergraph.config.ts.

You can see that we have a single API configured, which is the SpaceX GraphQL API .

// the name of this const will be supplied to the apis property in the configuration
const spaceX = introspect.graphql({
  apiNamespace: 'spacex',
  url: 'https://spacex-api.fly.dev/graphql/',
});

The API is introspected and added to the WunderGraph virtual graph, as you can see here:

configureWunderGraphApplication({
  // the const defined above is provided in the array of apis here
  apis: [spaceX],
  // ...
  generate: {
    codeGenerators: [
      {
        templates: [...templates.typescript.all],
        path: '../src/lib/.wundergraph/generated',
      },
    ],
  },
  // ...
});

Operations are written in the .wundergraph/operations directory. They can be written in Graphql or TypeScript. Let's check out the Dragons operation, open .wundergraph/operations/Dragons.graphql.

query Dragons {
  spacex_dragons {
    name
    active
  }
}

This simply fetches the name and active status of all the SpaceX dragons.

Open src/routes/Dragons.svelte, there you will find the following code:

import { createQuery } from '../lib/wundergraph/wundergraph';

const dragonsQuery = createQuery({
  operationName: 'Dragons',
});

The operation name is the name of the file in the operations directory, without the extension. The createQuery function will return the result of the operation.

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

Let's modify the Dragons operation and add a limit parameter and return extra fields. Open .wundergraph/operations/Dragons.graphql and change it to:

query Dragons($limit: Int!) {
  spacex_dragons(limit: $limit) {
    id
    name
    active
  }
}

The WunderGraph server will automatically pick up on the changes and re-generate the types. Go back to src/routes/Dragons.svelte and you will see that the Dragons operation now has a required limit input parameter.

const dragons = createQuery({
  operationName: 'Dragons',
  input: {
    limit: 1,
  },
});

Refresh the page in your browser, the result will look like this:

{
  "data": { "spacex_dragons": [{ "id": "dragon1", "name": "Dragon 1", "active": true }] },
  "isValidating": false,
  "isLoading": false
}

• Guides
• Svelte Query client documentation
• SvelteKit