feat: svelte query client (#683)Co-authored-by: Sergiy Petrunin <spetrunin@users.noreply.github.com> Co-authored-by: Eelco Wiersma <contact@pagebakers.nl> Co-authored-by: Pagebakers <eelco@appulse.nl>

packages/svelte-query/.npmignore

@@ -0,0 +1,6 @@
+node_modules
+src
+tsconfig.json
+.gitignore
+.npmrc
+dist/tsconfig.tsbuildinfo

packages/svelte-query/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

packages/svelte-query/README.md

@@ -0,0 +1,111 @@
+# WunderGraph Svelte Query Integration
+
+![wunderctl](https://img.shields.io/npm/v/@wundergraph/svelte-query.svg)
+
+This package provides a type-safe integration of [@tanstack/svelte-query](https://tanstack.com/query/latest/docs/svelte/overview) with WunderGraph.
+Svelte Query is a data fetching library for Svelte apps. With simple utilities, you can significantly simplify the data fetching logic in your project. And it also covered in all aspects of speed, correctness, and stability to help you build better experiences.
+
+> **Warning**: Only works with WunderGraph.
+
+## Getting Started
+
+```shell
+npm install @wundergraph/svelte-query @tanstack/svelte-query
+```
+
+Before you can use the utilities, you need to modify your code generation to include the base typescript client.
+
+```typescript
+// wundergraph.config.ts
+configureWunderGraphApplication({
+  // ... omitted for brevity
+  codeGenerators: [
+    {
+      templates: [templates.typescript.client],
+      // the location where you want to generate the client
+      path: '../src/components/generated',
+    },
+  ],
+});
+```
+
+Second, run `wunderctl generate` to generate the code.
+
+Now you can use the utility functions.
+
+```ts
+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);
+```
+
+Now, in your svelte layout setup Svelte Query Provider such that it is always wrapping above the rest of the app.
+
+```svelte
+<script>
+	import Header from './Header.svelte';
+	import { browser } from '$app/environment'
+	import './styles.css';
+	import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query'
+
+	const queryClient = new QueryClient({
+		defaultOptions: {
+			queries: {
+				enabled: browser,
+			},
+		},
+	})
+</script>
+
+<div class="app">
+  <QueryClientProvider client={queryClient}>
+    <slot />
+  </QueryClientProvider>
+</div>
+```
+
+Now you can use svelte-query to call your wundergraph operations!
+
+```svelte
+<script lang="ts">
+	import { createQuery } from '../lib/wundergraph';
+
+	const query = createQuery({
+		operationName: "Starwars",
+	})
+</script>
+
+<div class="counter">
+	<h1>Simple Query</h1>
+	<div>
+		{#if $query.isLoading}
+			Loading...
+		{/if}
+		{#if $query.error}
+			An error has occurred:
+			{$query.error.message}
+		{/if}
+		{#if $query.isSuccess}
+      <div>
+        <pre>{JSON.stringify($query.data.starwars_allPeople)}</pre>
+      </div>
+    {/if}
+	</div>
+</div>
+```
+
+## Options
+
+You can use all available options from [Svelte Query](https://tanstack.com/query/latest/docs/svelte/overview) with the generated functions.
+Due to the fact that we use the operationName + variables as **key**, you can't use the `key` option as usual.
+In order to use conditional-fetching you can use the `enabled` option.
+
+## Global Configuration
+
+You can configure the utilities globally by using the Svelte Query's [QueryClient](https://tanstack.com/query/v4/docs/react/reference/QueryClient) config.

packages/svelte-query/jest-setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

packages/svelte-query/jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+	testEnvironment: 'jsdom',
+	testRegex: '/tests/.*\\.test\\.ts?$',
+	setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
+	transform: {
+		'^.+\\.(t|j)sx?$': '@swc/jest',
+		'^.+\\.svelte$': 'svelte-jester',
+	},
+	transformIgnorePatterns: [
+		'<rootDir>/node_modules/.pnpm/@tanstack+svelte-query@4.24.9_svelte@3.55.1/node_modules/@tanstack/svelte-query/',
+	],
+	moduleFileExtensions: ['js', 'ts', 'svelte'],
+	coveragePathIgnorePatterns: ['/node_modules/', '/dist/'],
+	coverageReporters: ['text', 'html'],
+	reporters: ['default', 'github-actions'],
+};

packages/svelte-query/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@wundergraph/svelte-query",
+  "version": "0.0.1",
+  "license": "Apache-2.0",
+  "description": "WunderGraph Svelte Query Integration",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "svelte-package",
+    "test": "jest && tsd"
+  },
+  "tsd": {
+    "directory": "tests"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wundergraph/wundergraph.git"
+  },
+  "peerDependencies": {
+    "@tanstack/svelte-query": "^4.24.6",
+    "@wundergraph/sdk": ">=0.110.0",
+    "svelte": "^3.54.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.0.2",
+    "@swc/core": "^1.3.14",
+    "@swc/jest": "^0.2.23",
+    "@tanstack/svelte-query": "^4.24.6",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/svelte": "^3.2.2",
+    "@types/jest": "^28.1.1",
+    "@types/node-fetch": "2.6.2",
+    "@wundergraph/sdk": "workspace:*",
+    "jest": "^29.0.3",
+    "jest-environment-jsdom": "^29.3.0",
+    "nock": "^13.2.9",
+    "node-fetch": "2.6.7",
+    "svelte": "^3.54.0",
+    "svelte-jester": "^2.3.2",
+    "tsd": "^0.24.1",
+    "typescript": "^4.8.2"
+  },
+  "homepage": "https://wundergraph.com",
+  "author": {
+    "name": "WunderGraph Maintainers",
+    "email": "info@wundergraph.com"
+  },
+  "keywords": [
+    "svelte-query",
+    "wundergraph",
+    "svelte"
+  ]
+}