SvelteKit & WunderGraph demo

This is a simple app (no authentication, single route) which allows visitors to read and write Posts from a database. It is a tech demo to showcase SvelteKit working with WunderGraph, no bells and whistles!

The web app (SvelteKit) fetches from an API (WunderGraph), which stores data in a database.

The data schema is very simple - just Users and Posts.

Quickstart

This is a pnpm monorepo, you should install pnpm first (npm install -g pnpm).

1. pnpm install - installs dependencies for all workspaces in the repo
2. pnpm db prisma migrate dev - seeds a local sqlite database with the correct schema and sample data.
3. pnpm dev - run's the dev script in wundergraph and sveltekit repos

Once the devserver is running you can access it at http://localhost:3000.

Database

To keep the demo lean WunderGraph uses a sqlite database, but it is easy to change the db provider via the Prisma config (database/schema.prisma) to postgresql, mysql, sqlserver, mongodb, or cockroachdb. Be sure to also update wundergraph/wundergraph.config.ts to use the appropriate introspect function.

SvelteKit Store

Reactivity within SvelteKit is handled via writable 'stores', which notify components whenever the store value changes (which usually triggers the component to re-render).

This demo contains a custom WunderGraph store (wundergraph.store.ts) which simplifies use of the WunderGraph SDK within your Svelte components. It provides the following hooks:

• useQuery
• useSubscription
• useMutation

Example usage:

// will fetch results once
const { status, refetch, result } = useQuery("ReadPosts");

// svelte reactive declaration
$: posts = result.data.db_findManyPost;

// refetching results
const buttonClickHandler = () => refetch();

// will open a connection to wundergraph and continuosly receive results every 1 second
useSubscription("ReadPosts", (result) => {
	if (result.data) {
		posts = result.data.db_findManyPost;
	}
});

const { mutate } = useMutation("CreatePost");

const submitHandler = () => mutate({ input: newPost });

Todo

• Implement Optimistic UI updates when mutating Posts (don't wait for the next liveQuery to update store, requires use of a global cache-key and cache invalidation)
• Implement UpdatePost (edit a Post), handling scenario where it has been deleted on server while editing
• Add simple Service Worker to demo working offline

Attribution

This work was heavily inspired by koleok's realtime-chat repo.