Go to file
2023-10-17 09:42:20 +02:00
.wundergraph cleanup 2023-10-17 09:42:20 +02:00
src cleanup 2023-10-17 09:42:20 +02:00
src-tauri added Tauri native desktop app support 2023-09-02 11:31:05 +02:00
static updated UI of login flow 2023-08-31 12:54:49 +02:00
.gitignore Initial Wundergraph Setup 2023-08-25 09:45:46 +02:00
.npmrc Initial Wundergraph Setup 2023-08-25 09:45:46 +02:00
package.json Added Email, Contacts and ChatGPT 2023-09-21 20:45:49 +02:00
postcss.config.js Added basic Tailwind styling and fixed a active session bug 2023-08-31 11:13:53 +02:00
README.md Initial Wundergraph Setup 2023-08-25 09:45:46 +02:00
svelte.config.js added Tauri native desktop app support 2023-09-02 11:31:05 +02:00
tailwind.config.ts Major UI upgrade 2023-09-06 15:08:55 +02:00
tsconfig.json Initial Wundergraph Setup 2023-08-25 09:45:46 +02:00
vite.config.ts Fixing a Paperless bug 2023-10-17 09:42:09 +02:00
yarn.lock Fixing a Paperless bug 2023-10-17 09:42:09 +02:00

create-svelte

Everything you need to build a Svelte project with WunderGraph + SvelteQuery + SSR, powered by create-svelte.

Creating a project

If you're seeing this, you've probably already done this step. Congrats!

# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

Using Wundergraph

SSR

// In lib/wundergraph
import { createSvelteClient } from '@wundergraph/svelte-query';
import { createClient } from '../../.wundergraph/generated/client';
import type { Operations } from '../../.wundergraph/generated/client';

const client = createClient();

const { createFileUpload, createMutation, createQuery, createSubscription, getAuth, getUser, queryKey } =
  createSvelteClient<Operations>(client);

export { createFileUpload, createMutation, createQuery, createSubscription, getAuth, getUser, queryKey };
// In +page.ts file
import { prefetchQuery } from '$lib/wundergraph';
import type { PageLoad } from './$types';

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

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

Client side

<!-- In +page.svelte -->
<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>

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

Deploy to WunderGraph