Skip to content

Commit b324a9b

Browse files
lachlancollinslachlancollins
authored
feat(svelte-query): Svelte Query Adapter for TanStack Query (#4768)
* feat: svelte-query adapter * add examples * add @testing-library/svelte and svelte-jester * add transform for testing svelte components * re-export @tanstack/core core * add a few initial test * delete tests in examples * use ^ in dependencies * delete and gitignore .vscode * rename basic-typescript to basic * add basic example to ci.json * remove transform from global preset * update version * don't gitignore lib directory in svelte examples * fix build files location in package.json * chore: prettier formatting * add missing state * chore: fix eslint errors * add context * unsubscribe * add missing export * use svelte context * update version * update examples to use context * release: v4.14.5 * remove onMount * add onMount to setQueryClient * remove unneeded exports * Add basic svelte docs overview * Add SvelteKit 1.0 example Uses the data from the simple example * Edit nodeResolve settings * More rollup and babel tweaks Seems to be working * Try svelte plugin options * Separate out svelte config * Switch to svelte-package * Reset rollup config * Output to ./build * Use vitest in svelte-query * Fix test imports * Avoid transpiling TS during typecheck * Fix vitest command * More vitest migration work * Minor fixes to tests * Rename file to types.d.ts * Replace setQueryContext with QueryClientProvider * Replace tabs with spaces for repo consistency * Update examples to sveltekit 1.0 * Implement Hydrate component * Add playground example Rewrite of the react example * Start adding star-wars example * Add films and film pages * Finish star-wars example * Rename store functions with create prefix * Add correct favicons * Reorder some files in svelte-query * Undo rollup.config.ts changes * Add new createQuery and createMutation tests * More descriptive test name * Misc fixes from feedback - Max TS 4.7.4 - Move root package.json dependencies - Use object syntax - Use test:jest script (for now) - Remove sveltekit autogenerated files * Fix pnpm-lock * Specify svelte-package source, update TS to 4.7.4 * Remove unnecessary packages in examples * Sync pnpm-lock * Reset pnpm-lock to upstream * Run pnpm install * Remove svelte-query from root tsconfg Needs to be run from its own svelte-check package... sorry * Run prettier, remove unused import * Run prettier on svelte files Requires prettier-plugin-svelte to run * Prettier for changed files * Fix cipublish from svelte-query * rimraf to remove build/lib/package.json * Run svelte-kit sync before vitest * Add files field to package.json * Add types field to package.json * Bump svelte-query version to 4.20.0 In case this fixes the CI issue * Add path alias to vitest * Update vitest to 0.26 Changes module resolution? * More CI improvements * Remove --parallel from pnpm scripts * Remove unused dependency * Add eslint settings Thanks @rivo420 * Add coverage report Co-authored-by: DeAndre Johnson <[email protected]> Co-authored-by: Dominik Dorfmeister <[email protected]> RELEASE_ALL
1 parent 85ce6db commit b324a9b

File tree

169 files changed

+6295
-107
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

169 files changed

+6295
-107
lines changed

‎.codesandbox/ci.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"installCommand": "install:csb",
3-
"sandboxes": ["/examples/react/basic-typescript", "/examples/solid/basic-typescript", "/examples/vue/basic"],
3+
"sandboxes": ["/examples/react/basic-typescript", "/examples/solid/basic-typescript", "/examples/svelte/basic", "/examples/vue/basic"],
44
"packages": ["packages/**"],
55
"node": "16"
66
}

‎.prettierignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/packages/svelte-query/.svelte-kit

‎babel.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ module.exports = {
3333
].filter(Boolean),
3434
overrides: [
3535
{
36-
exclude: ['./packages/solid-query/**', './packages/vue-query/**'],
36+
exclude: ['./packages/solid-query/**', './packages/svelte-query/**', './packages/vue-query/**'],
3737
presets: ['@babel/react'],
3838
},
3939
{

‎docs/config.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -688,7 +688,7 @@
688688
"label": "Getting Started",
689689
"children": [
690690
{
691-
"label": "Coming Soon",
691+
"label": "Overview",
692692
"to": "svelte/overview"
693693
}
694694
]

‎docs/svelte/overview.md‎

Lines changed: 64 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,69 @@
11
---
22
id: overview
3-
title: Svelte Query (Coming Soon)
3+
title: Svelte Query
44
---
55

6-
> ⚠️ This module has not yet been developed. It requires an adapter similar to `react-query` to work. We estimate the amount of code to do this is low-to-moderate, but does require familiarity with the Svelte framework. If you would like to contribute this adapter, please open a PR!
6+
The `@tanstack/svelte-query` package offers a 1st-class API for using TanStack Query via Svelte.
77

8-
The `@tanstack/svelte-query` package offers a 1st-class API for using TanStack Query via Svelte. However, all of the primitives you receive from this API are core APIs that are shared across all of the TanStack Adapters including the Query Client, query results, query subscriptions, etc.
8+
## Example
9+
10+
Include the QueryClientProvider near the root of your project:
11+
12+
```svelte
13+
<script lang="ts">
14+
import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
15+
import Simple from './lib/Example.svelte'
16+
17+
const queryClient = new QueryClient()
18+
</script>
19+
20+
<QueryClientProvider client={queryClient}>
21+
<Simple />
22+
</QueryClientProvider>
23+
```
24+
25+
Then call any function (e.g. createQuery) from any component:
26+
27+
```svelte
28+
<script lang="ts">
29+
import { createQuery } from '@tanstack/svelte-query'
30+
31+
const query = createQuery({
32+
queryKey: ['todos'],
33+
queryFn: () => fetchTodos(),
34+
})
35+
</script>
36+
37+
<div>
38+
{#if $query.isLoading}
39+
<p>Loading...</p>
40+
{:else if $query.isError}
41+
<p>Error: {$query.error.message}</p>
42+
{:else if $query.isSuccess}
43+
{#each $query.data as todo}
44+
<p>{todo.title}</p>
45+
{/each}
46+
{/if}
47+
</div>
48+
```
49+
50+
## Available Functions
51+
52+
Svelte Query offers useful functions and components that will make managing server state in Svelte apps easier.
53+
54+
- `createQuery`
55+
- `createQueries`
56+
- `createInfiniteQuery`
57+
- `createMutation`
58+
- `useQueryClient`
59+
- `useIsFetching`
60+
- `useIsMutating`
61+
- `useHydrate`
62+
- `<QueryClientProvider>`
63+
- `<Hydrate>`
64+
65+
## Important Differences between Svelte Query & React Query
66+
67+
Svelte Query offers an API similar to React Query, but there are some key differences to be mindful of.
68+
69+
- Many of the functions in Svelte Query return a Svelte store. To access values on these stores reactively, you need to prefix the store with a `$`. You can learn more about Svelte stores [here](https://svelte.dev/tutorial/writable-stores).

‎examples/svelte/auto-refetching/.gitignore‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.DS_Store
2+
node_modules
3+
/build
4+
/.svelte-kit
5+
/package
6+
.env
7+
.env.*
8+
!.env.example
9+
!lib/

‎examples/svelte/auto-refetching/README.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# create-svelte
2+
3+
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
4+
5+
## Creating a project
6+
7+
If you're seeing this, you've probably already done this step. Congrats!
8+
9+
```bash
10+
# create a new project in the current directory
11+
npm create svelte@latest
12+
13+
# create a new project in my-app
14+
npm create svelte@latest my-app
15+
```
16+
17+
## Developing
18+
19+
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
20+
21+
```bash
22+
npm run dev
23+
24+
# or start the server and open the app in a new browser tab
25+
npm run dev -- --open
26+
```
27+
28+
## Building
29+
30+
To create a production version of your app:
31+
32+
```bash
33+
npm run build
34+
```
35+
36+
You can preview the production build with `npm run preview`.
37+
38+
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

‎examples/svelte/auto-refetching/package.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "@tanstack/query-example-svelte-auto-refetching",
3+
"version": "0.0.1",
4+
"private": true,
5+
"scripts": {
6+
"dev": "vite dev",
7+
"build": "vite build",
8+
"preview": "vite preview",
9+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
10+
},
11+
"dependencies": {
12+
"@tanstack/svelte-query": "^4.12.0"
13+
},
14+
"devDependencies": {
15+
"@sveltejs/adapter-auto": "^1.0.0",
16+
"@sveltejs/kit": "^1.0.0",
17+
"svelte": "^3.54.0",
18+
"svelte-check": "^2.9.2",
19+
"svelte-preprocess": "^4.10.7",
20+
"tslib": "^2.4.1",
21+
"typescript": "^4.7.4",
22+
"vite": "^4.0.0"
23+
},
24+
"type": "module"
25+
}

‎examples/svelte/auto-refetching/src/app.css‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
:root {
2+
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
3+
font-size: 16px;
4+
line-height: 24px;
5+
font-weight: 400;
6+
7+
color-scheme: light dark;
8+
color: rgba(255, 255, 255, 0.87);
9+
background-color: #242424;
10+
11+
font-synthesis: none;
12+
text-rendering: optimizeLegibility;
13+
-webkit-font-smoothing: antialiased;
14+
-moz-osx-font-smoothing: grayscale;
15+
-webkit-text-size-adjust: 100%;
16+
}
17+
18+
a {
19+
font-weight: 500;
20+
color: #646cff;
21+
text-decoration: inherit;
22+
}
23+
a:hover {
24+
color: #535bf2;
25+
}
26+
27+
body {
28+
margin: 0;
29+
display: flex;
30+
place-items: center;
31+
min-width: 320px;
32+
min-height: 100vh;
33+
}
34+
35+
h1 {
36+
font-size: 3.2em;
37+
line-height: 1.1;
38+
}
39+
40+
.card {
41+
padding: 2em;
42+
}
43+
44+
main {
45+
max-width: 1280px;
46+
margin: 0 auto;
47+
padding: 2rem;
48+
text-align: center;
49+
}
50+
51+
button {
52+
border-radius: 8px;
53+
border: 1px solid transparent;
54+
padding: 0.6em 1.2em;
55+
font-size: 1em;
56+
font-weight: 500;
57+
font-family: inherit;
58+
background-color: #1a1a1a;
59+
cursor: pointer;
60+
transition: border-color 0.25s;
61+
}
62+
button:hover {
63+
border-color: #646cff;
64+
}
65+
button:focus,
66+
button:focus-visible {
67+
outline: 4px auto -webkit-focus-ring-color;
68+
}
69+
70+
@media (prefers-color-scheme: light) {
71+
:root {
72+
color: #213547;
73+
background-color: #ffffff;
74+
}
75+
a:hover {
76+
color: #747bff;
77+
}
78+
button {
79+
background-color: #f9f9f9;
80+
}
81+
}

‎examples/svelte/auto-refetching/src/app.d.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// See https://kit.svelte.dev/docs/types#app
2+
// for information about these interfaces
3+
// and what to do when importing types
4+
declare namespace App {
5+
// interface Locals {}
6+
// interface PageData {}
7+
// interface Error {}
8+
// interface Platform {}
9+
}

0 commit comments

Comments
 (0)