Initial Wundergraph Setup

.gitignore

@@ -0,0 +1,14 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+.vercel
+.output
+vite.config.js.timestamp-*
+
+# WunderGraph generated files
+**/.wundergraph/generated

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.wundergraph/operations/Continents.graphql

@@ -0,0 +1,6 @@
+query Continents {
+	countries_continents {
+		name
+		code
+	}
+}

.wundergraph/operations/Countries.graphql

@@ -0,0 +1,7 @@
+query Countries($filter: countries_CountryFilterInput) {
+	countries_countries(filter: $filter) {
+		code
+		name
+		capital
+	}
+}

.wundergraph/operations/Dragons.graphql

@@ -0,0 +1,6 @@
+query Dragons {
+	spacex_dragons {
+		name
+		active
+	}
+}

.wundergraph/operations/Projects.graphql

@@ -0,0 +1,6 @@
+query Projects {
+  directus_projects {
+    id
+    text
+  }
+}

.wundergraph/operations/Todos.graphql

@@ -0,0 +1,6 @@
+query Projects {
+  directus_todos {
+    id
+    task
+  }
+}

.wundergraph/schemas/fetch-schemas.js

@@ -0,0 +1,30 @@
+import axios from 'axios';
+import fs from 'fs';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+export async function fetchSchemas() {
+
+  // Define the Directus server URL and credentials
+  const serverUrl = 'https://directus.andert.me';
+  const credentials = {
+    email: process.env.EMAIL,
+    password: process.env.DIRECTUS_PW
+  };
+
+  // Login to the Directus server and get the access token
+  const { data: { data: { token } } } = await axios.post(`${serverUrl}/auth/login`, credentials);
+
+  // Fetch the GraphQL SDL schema
+  const { data: schema } = await axios.get(`${serverUrl}/server/specs/graphql`, {
+    headers: {
+      'Authorization': `Bearer ${process.env.DIRECTUS_API}`
+    }
+  });
+
+  // Save the schema to a file
+  fs.writeFileSync('./.wundergraph/schemas/directus.graphql', schema);
+}
+
+fetchSchemas().catch(console.error);

.wundergraph/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "commonjs",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  }
+}

.wundergraph/wundergraph.config.ts

@@ -0,0 +1,55 @@
+import { configureWunderGraphApplication, cors, EnvironmentVariable, introspect, templates } from '@wundergraph/sdk';
+import server from './wundergraph.server';
+import operations from './wundergraph.operations';
+import fs from 'fs';
+import path from 'path';
+
+const directusSchema = fs.readFileSync(path.join(path.resolve(), './schemas/directus.graphql'), 'utf8');
+
+const countries = introspect.graphql({
+	apiNamespace: 'countries',
+	url: 'https://countries.trevorblades.com/',
+});
+
+const spaceX = introspect.graphql({
+	apiNamespace: 'spacex',
+	url: 'https://spacex-api.fly.dev/graphql/',
+});
+
+const directus = introspect.graphql({
+	apiNamespace: 'directus',
+	loadSchemaFromString: directusSchema,
+	url: 'https://directus.andert.me/graphql',
+	headers: (builder) => builder.addStaticHeader('Authorization', 'Bearer Bv5RknRvv5AZouxcYdBJgVOe3ZC493Y3')
+});
+
+// configureWunderGraph emits the configuration
+configureWunderGraphApplication({
+	apis: [countries, spaceX, directus],
+	server,
+	operations,
+	generate: {
+		codeGenerators: [
+			{
+				templates: [
+					// use all the typescript react templates to generate a client
+					...templates.typescript.all,
+				],
+				path: '../src/lib/.wundergraph/generated',
+			},
+		],
+	},
+	cors: {
+		...cors.allowAll,
+		allowedOrigins:
+			process.env.NODE_ENV === 'production'
+				? [
+					// change this before deploying to production to the actual domain where you're deploying your app
+					'http://localhost:3000',
+				]
+				: ['http://localhost:3000', new EnvironmentVariable('WG_ALLOWED_ORIGIN')],
+	},
+	security: {
+		enableGraphQLEndpoint: process.env.NODE_ENV !== 'production' || process.env.GITPOD_WORKSPACE_ID !== undefined,
+	},
+});

.wundergraph/wundergraph.operations.ts

@@ -0,0 +1,32 @@
+import { configureWunderGraphOperations } from '@wundergraph/sdk';
+import type { OperationsConfiguration } from '../src/lib/.wundergraph/generated/wundergraph.operations';
+
+export default configureWunderGraphOperations<OperationsConfiguration>({
+	operations: {
+		defaultConfig: {
+			authentication: {
+				required: false,
+			},
+		},
+		queries: (config) => ({
+			...config,
+			caching: {
+				enable: false,
+				staleWhileRevalidate: 60,
+				maxAge: 60,
+				public: true,
+			},
+			liveQuery: {
+				enable: true,
+				pollingIntervalSeconds: 1,
+			},
+		}),
+		mutations: (config) => ({
+			...config,
+		}),
+		subscriptions: (config) => ({
+			...config,
+		}),
+		custom: {},
+	},
+});

.wundergraph/wundergraph.server.ts

@@ -0,0 +1,11 @@
+import { GraphQLObjectType, GraphQLSchema, GraphQLString } from 'graphql';
+import { configureWunderGraphServer } from '@wundergraph/sdk/server';
+import type { HooksConfig } from '../src/lib/.wundergraph/generated/wundergraph.hooks';
+import type { InternalClient } from '../src/lib/.wundergraph/generated/wundergraph.internal.client';
+
+export default configureWunderGraphServer(() => ({
+	hooks: {
+		queries: {},
+		mutations: {},
+	},
+}));

README.md

@@ -0,0 +1,98 @@
+# create-svelte
+
+Everything you need to build a Svelte project with WunderGraph + SvelteQuery + SSR, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# 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:
+
+```bash
+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:
+
+```bash
+npm run build
+```
+
+## Using Wundergraph
+
+### SSR
+
+```ts
+// 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 };
+```
+
+```ts
+// 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
+
+```svelte
+<!-- 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](https://kit.svelte.dev/docs/adapters) for your target environment.
+
+[![Deploy to WunderGraph](https://wundergraph.com/button)](https://cloud.wundergraph.com/new/clone?templateName=sveltekit)

package.json

@@ -0,0 +1,43 @@
+{
+  "name": "wundergraph-sveltekit",
+  "version": "0.0.1",
+  "scripts": {
+    "start": "npm run dev",
+    "dev": "concurrently \"npm run wundergraph\" \"npm run dev:vite\" \"npm run browser\"",
+    "dev:vite": "vite --port 3000",
+    "build": "npm run build:wundergraph && vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "wundergraph": "wunderctl up",
+    "browser": "wait-on \"http-get://localhost:3000\" && wait-on \"http-get://localhost:9991\" && open-cli http://localhost:5173",
+    "build:wundergraph": "wunderctl generate"
+  },
+  "devDependencies": {
+    "@fontsource/fira-mono": "^4.5.10",
+    "@neoconfetti/svelte": "^1.0.0",
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/kit": "^1.5.0",
+    "@types/cookie": "^0.5.1",
+    "concurrently": "^7.6.0",
+    "svelte": "^3.54.0",
+    "svelte-check": "^3.0.1",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^4.2.0",
+    "wait-on": "^7.0.1"
+  },
+  "dependencies": {
+    "@graphql-tools/graphql-file-loader": "^8.0.0",
+    "@graphql-tools/load": "^8.0.0",
+    "@tanstack/svelte-query": "^4.29.1",
+    "@wundergraph/sdk": "^0.174.5",
+    "@wundergraph/svelte-query": "^0.3.10",
+    "axios": "^1.4.0",
+    "dotenv": "^16.3.1",
+    "graphql": "^16.8.0",
+    "path": "^0.12.7",
+    "url": "^0.11.1"
+  },
+  "type": "module"
+}

src/app.d.ts

@@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export {};

src/app.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

src/lib/images/github.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 30 30">
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5229 6.47715 22 12 22C17.5229 22 22 17.5229 22 12C22 6.47715 17.5229 2 12 2ZM0 12C0 5.3726 5.3726 0 12 0C18.6274 0 24 5.3726 24 12C24 18.6274 18.6274 24 12 24C5.3726 24 0 18.6274 0 12Z"
+		fill="rgba(0,0,0,0.7)"
+		stroke="none"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M9.59162 22.7357C9.49492 22.6109 9.49492 21.4986 9.59162 19.399C8.55572 19.4347 7.90122 19.3628 7.62812 19.1833C7.21852 18.9139 6.80842 18.0833 6.44457 17.4979C6.08072 16.9125 5.27312 16.8199 4.94702 16.6891C4.62091 16.5582 4.53905 16.0247 5.84562 16.4282C7.15222 16.8316 7.21592 17.9303 7.62812 18.1872C8.04032 18.4441 9.02572 18.3317 9.47242 18.1259C9.91907 17.9201 9.88622 17.1538 9.96587 16.8503C10.0666 16.5669 9.71162 16.5041 9.70382 16.5018C9.26777 16.5018 6.97697 16.0036 6.34772 13.7852C5.71852 11.5669 6.52907 10.117 6.96147 9.49369C7.24972 9.07814 7.22422 8.19254 6.88497 6.83679C8.11677 6.67939 9.06732 7.06709 9.73672 7.99999C9.73737 8.00534 10.6143 7.47854 12.0001 7.47854C13.386 7.47854 13.8777 7.90764 14.2571 7.99999C14.6365 8.09234 14.94 6.36699 17.2834 6.83679C16.7942 7.79839 16.3844 8.99999 16.6972 9.49369C17.0099 9.98739 18.2372 11.5573 17.4833 13.7852C16.9807 15.2706 15.9927 16.1761 14.5192 16.5018C14.3502 16.5557 14.2658 16.6427 14.2658 16.7627C14.2658 16.9427 14.4942 16.9624 14.8233 17.8058C15.0426 18.368 15.0585 19.9739 14.8708 22.6234C14.3953 22.7445 14.0254 22.8257 13.7611 22.8673C13.2924 22.9409 12.7835 22.9822 12.2834 22.9982C11.7834 23.0141 11.6098 23.0123 10.9185 22.948C10.4577 22.9051 10.0154 22.8343 9.59162 22.7357Z"
+		fill="rgba(0,0,0,0.7)"
+		stroke="none"
+	/>
+</svg>

src/lib/images/svelte-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157" style="fill:#ff3e00"/><path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287" style="fill:#fff"/></svg>

src/lib/wundergraph/index.ts

@@ -0,0 +1,10 @@
+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, prefetchQuery } =
+	createSvelteClient<Operations>(client);
+
+export { createFileUpload, createMutation, createQuery, createSubscription, getAuth, getUser, queryKey, prefetchQuery };

src/routes/+layout.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { QueryClientProvider } from "@tanstack/svelte-query";
+  import type { LayoutData } from "./$types";
+
+  export let data: LayoutData;
+</script>
+
+<QueryClientProvider client={data.queryClient}>
+  <slot />
+</QueryClientProvider>

src/routes/+layout.ts

@@ -0,0 +1,15 @@
+import { browser } from '$app/environment';
+import { QueryClient } from '@tanstack/svelte-query';
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = async () => {
+	const queryClient = new QueryClient({
+		defaultOptions: {
+			queries: {
+				enabled: browser,
+			},
+		},
+	});
+
+	return { queryClient };
+};

src/routes/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+  import GraphQL from "./GraphQL.svelte";
+</script>
+
+<GraphQL />

src/routes/+page.ts

@@ -0,0 +1,13 @@
+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
+	);
+};

src/routes/GraphQL.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { createQuery } from "../lib/wundergraph";
+
+  const dragonsQuery = createQuery({
+    operationName: "Dragons",
+  });
+  const projectsQuery = createQuery({
+    operationName: "Projects",
+  });
+  const todosQuery = createQuery({
+    operationName: "Todos",
+  });
+</script>
+
+Dragons
+<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>
+
+Projects
+<div class="results">
+  {#if $projectsQuery.isLoading}
+    <p>Loading...</p>
+  {:else if $projectsQuery.error}
+    <pre>Error: {JSON.stringify($projectsQuery.error, null, 2)}</pre>
+  {:else}
+    <pre>{JSON.stringify($projectsQuery.data, null, 2)}</pre>
+  {/if}
+</div>
+
+Tasks
+<div class="results">
+  {#if $todosQuery.isLoading}
+    <p>Loading...</p>
+  {:else if $todosQuery.error}
+    <pre>Error: {JSON.stringify($todosQuery.error, null, 2)}</pre>
+  {:else}
+    <pre>{JSON.stringify($todosQuery.data, null, 2)}</pre>
+  {/if}
+</div>

static/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

svelte.config.js

@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/kit/vite';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter(),
+	},
+};
+
+export default config;

tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true
+  },
+  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+  //
+  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+  // from the referenced tsconfig.json - TypeScript does not merge them in
+  "exclude": [
+    // default exclude options provided by sveltekit
+    "../node_modules/**",
+    "./[!ambient.d.ts]**",
+    "../src/service-worker.js",
+    "../src/service-worker.ts",
+    "../src/service-worker.d.ts",
+
+    // temporarily exclude wundergraph generated files - due to an issue with references in wundergraph.factory.ts file
+    "./.wundergraph/**"
+  ]
+}

vite.config.ts

@@ -0,0 +1,18 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+import { fetchSchema } from './.wundergraph/schemas/fetch-schemas';
+
+export default defineConfig({
+	plugins: [
+		sveltekit(),
+		{
+			name: 'fetch-schema',
+			apply: 'build',
+			configResolved(config) {
+				if (config.command === 'build' || config.command === 'serve') {
+					fetchSchemas().catch(console.error);
+				}
+			},
+		},
+	],
+});