New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(svelte-query): Svelte Query Adapter for TanStack Query #4768
Merged
Merged
Changes from all commits
Commits
Show all changes
91 commits
Select commit
Hold shift + click to select a range
7d08921
feat: svelte-query adapter
drejohnson 232b8ac
add examples
drejohnson d0d8099
add @testing-library/svelte and svelte-jester
drejohnson 59ac487
add transform for testing svelte components
drejohnson 5f8c91d
re-export @tanstack/core core
drejohnson 1c50f02
add a few initial test
drejohnson d352e80
delete tests in examples
drejohnson f6d4f8d
use ^ in dependencies
drejohnson 3f19c34
delete and gitignore .vscode
drejohnson 99140b9
rename basic-typescript to basic
drejohnson 7454eff
add basic example to ci.json
drejohnson 3950310
remove transform from global preset
drejohnson e0717f5
Merge branch 'main' into svelte-adapter
drejohnson f86449e
update version
drejohnson b8a2e39
don't gitignore lib directory in svelte examples
drejohnson 2678b32
fix build files location in package.json
drejohnson e79c71f
Merge branch 'main' into svelte-adapter
TkDodo 7a2d72f
chore: prettier formatting
drejohnson 3955939
add missing state
drejohnson bdfeac4
chore: fix eslint errors
drejohnson 86903d9
add context
drejohnson 90bd962
unsubscribe
drejohnson bf46205
Merge branch 'main' into svelte-adapter
drejohnson 49c96a3
add missing export
drejohnson 9a03449
use svelte context
drejohnson 3b3aeed
update version
drejohnson 75cada4
update examples to use context
drejohnson 026c912
Merge branch 'main' into svelte-adapter
drejohnson 5910980
release: v4.14.5
drejohnson d1b85ea
remove onMount
drejohnson 296f377
add onMount to setQueryClient
drejohnson 976306e
remove unneeded exports
drejohnson 2c79007
Merge branch 'main' into svelte-adapter
TkDodo 6782e8f
Add basic svelte docs overview
lachlancollins d6fc0ca
Add SvelteKit 1.0 example
lachlancollins 720a360
Merge pull request #1 from lachlancollins/svelte-adapter
lachlancollins 77a8bed
Edit nodeResolve settings
lachlancollins 5888103
More rollup and babel tweaks
lachlancollins 946456b
Try svelte plugin options
lachlancollins 62fb343
Separate out svelte config
lachlancollins bffaf80
Merge branch 'main' into main
lachlancollins 1da3204
Switch to svelte-package
lachlancollins e36f405
Reset rollup config
lachlancollins 4414db2
Output to ./build
lachlancollins d6a18b0
Merge branch 'rollup-fixes'
lachlancollins 098a01a
Use vitest in svelte-query
lachlancollins 3aa7023
Fix test imports
lachlancollins 30cf564
Avoid transpiling TS during typecheck
lachlancollins 59ff286
Fix vitest command
lachlancollins 60b3741
More vitest migration work
lachlancollins 53857d7
Minor fixes to tests
lachlancollins 4867ede
Rename file to types.d.ts
lachlancollins a6796bc
Replace setQueryContext with QueryClientProvider
lachlancollins 5e66984
Replace tabs with spaces for repo consistency
lachlancollins 3795933
Update examples to sveltekit 1.0
lachlancollins 97e79fa
Implement Hydrate component
lachlancollins 09b50be
Add playground example
lachlancollins fb1af52
Start adding star-wars example
lachlancollins d68b131
Add films and film pages
lachlancollins 2422aa2
Finish star-wars example
lachlancollins 24ea771
Rename store functions with create prefix
lachlancollins ad076b9
Add correct favicons
lachlancollins 53b8aa8
Reorder some files in svelte-query
lachlancollins 47e358b
Undo rollup.config.ts changes
lachlancollins 15b278c
Add new createQuery and createMutation tests
lachlancollins 3600ee9
More descriptive test name
lachlancollins ab3e11b
Misc fixes from feedback
lachlancollins d3f6d10
Fix pnpm-lock
lachlancollins 819ef56
Specify svelte-package source, update TS to 4.7.4
lachlancollins 59649fb
Remove unnecessary packages in examples
lachlancollins 089ccb2
Sync pnpm-lock
lachlancollins 64c7dc9
Reset pnpm-lock to upstream
lachlancollins 583c2e3
Run pnpm install
lachlancollins 49144c4
Remove svelte-query from root tsconfg
lachlancollins db11e0a
Merge branch 'main' into main
TkDodo 094df8d
Run prettier, remove unused import
lachlancollins a1aa970
Run prettier on svelte files
lachlancollins bcc96ff
Prettier for changed files
lachlancollins 6aa0d97
Fix cipublish from svelte-query
lachlancollins 731725d
rimraf to remove build/lib/package.json
lachlancollins 1bc23a8
Run svelte-kit sync before vitest
lachlancollins 488eff1
Add files field to package.json
lachlancollins 35e1a68
Add types field to package.json
lachlancollins 015943e
Bump svelte-query version to 4.20.0
lachlancollins e34e1d1
Add path alias to vitest
lachlancollins 6bae962
Update vitest to 0.26
lachlancollins 06b2de3
More CI improvements
lachlancollins cf14766
Remove --parallel from pnpm scripts
lachlancollins 6651d34
Remove unused dependency
lachlancollins 875a462
Add eslint settings
lachlancollins ef81d26
Add coverage report
lachlancollins File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,6 @@ | ||
{ | ||
"installCommand": "install:csb", | ||
"sandboxes": ["/examples/react/basic-typescript", "/examples/solid/basic-typescript", "/examples/vue/basic"], | ||
"sandboxes": ["/examples/react/basic-typescript", "/examples/solid/basic-typescript", "/examples/svelte/basic", "/examples/vue/basic"], | ||
"packages": ["packages/**"], | ||
"node": "16" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
/packages/svelte-query/.svelte-kit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,69 @@ | ||
--- | ||
id: overview | ||
title: Svelte Query (Coming Soon) | ||
title: Svelte Query | ||
--- | ||
|
||
> ⚠️ 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! | ||
The `@tanstack/svelte-query` package offers a 1st-class API for using TanStack Query via Svelte. | ||
|
||
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. | ||
## Example | ||
|
||
Include the QueryClientProvider near the root of your project: | ||
|
||
```svelte | ||
<script lang="ts"> | ||
import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query' | ||
import Simple from './lib/Example.svelte' | ||
|
||
const queryClient = new QueryClient() | ||
</script> | ||
|
||
<QueryClientProvider client={queryClient}> | ||
<Simple /> | ||
</QueryClientProvider> | ||
``` | ||
|
||
Then call any function (e.g. createQuery) from any component: | ||
|
||
```svelte | ||
<script lang="ts"> | ||
import { createQuery } from '@tanstack/svelte-query' | ||
|
||
const query = createQuery({ | ||
queryKey: ['todos'], | ||
queryFn: () => fetchTodos(), | ||
}) | ||
</script> | ||
|
||
<div> | ||
{#if $query.isLoading} | ||
<p>Loading...</p> | ||
{:else if $query.isError} | ||
<p>Error: {$query.error.message}</p> | ||
{:else if $query.isSuccess} | ||
{#each $query.data as todo} | ||
<p>{todo.title}</p> | ||
{/each} | ||
{/if} | ||
</div> | ||
``` | ||
|
||
## Available Functions | ||
|
||
Svelte Query offers useful functions and components that will make managing server state in Svelte apps easier. | ||
|
||
- `createQuery` | ||
- `createQueries` | ||
- `createInfiniteQuery` | ||
- `createMutation` | ||
- `useQueryClient` | ||
- `useIsFetching` | ||
- `useIsMutating` | ||
- `useHydrate` | ||
- `<QueryClientProvider>` | ||
- `<Hydrate>` | ||
|
||
## Important Differences between Svelte Query & React Query | ||
|
||
Svelte Query offers an API similar to React Query, but there are some key differences to be mindful of. | ||
|
||
- 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). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
.DS_Store | ||
node_modules | ||
/build | ||
/.svelte-kit | ||
/package | ||
.env | ||
.env.* | ||
!.env.example | ||
!lib/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
# create-svelte | ||
|
||
Everything you need to build a Svelte project, 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 | ||
``` | ||
|
||
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
{ | ||
"name": "@tanstack/query-example-svelte-auto-refetching", | ||
"version": "0.0.1", | ||
"private": true, | ||
"scripts": { | ||
"dev": "vite dev", | ||
"build": "vite build", | ||
"preview": "vite preview", | ||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json" | ||
}, | ||
"dependencies": { | ||
"@tanstack/svelte-query": "^4.12.0" | ||
}, | ||
"devDependencies": { | ||
"@sveltejs/adapter-auto": "^1.0.0", | ||
"@sveltejs/kit": "^1.0.0", | ||
"svelte": "^3.54.0", | ||
"svelte-check": "^2.9.2", | ||
"svelte-preprocess": "^4.10.7", | ||
"tslib": "^2.4.1", | ||
"typescript": "^4.7.4", | ||
"vite": "^4.0.0" | ||
}, | ||
"type": "module" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,81 @@ | ||
:root { | ||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif; | ||
font-size: 16px; | ||
line-height: 24px; | ||
font-weight: 400; | ||
|
||
color-scheme: light dark; | ||
color: rgba(255, 255, 255, 0.87); | ||
background-color: #242424; | ||
|
||
font-synthesis: none; | ||
text-rendering: optimizeLegibility; | ||
-webkit-font-smoothing: antialiased; | ||
-moz-osx-font-smoothing: grayscale; | ||
-webkit-text-size-adjust: 100%; | ||
} | ||
|
||
a { | ||
font-weight: 500; | ||
color: #646cff; | ||
text-decoration: inherit; | ||
} | ||
a:hover { | ||
color: #535bf2; | ||
} | ||
|
||
body { | ||
margin: 0; | ||
display: flex; | ||
place-items: center; | ||
min-width: 320px; | ||
min-height: 100vh; | ||
} | ||
|
||
h1 { | ||
font-size: 3.2em; | ||
line-height: 1.1; | ||
} | ||
|
||
.card { | ||
padding: 2em; | ||
} | ||
|
||
main { | ||
max-width: 1280px; | ||
margin: 0 auto; | ||
padding: 2rem; | ||
text-align: center; | ||
} | ||
|
||
button { | ||
border-radius: 8px; | ||
border: 1px solid transparent; | ||
padding: 0.6em 1.2em; | ||
font-size: 1em; | ||
font-weight: 500; | ||
font-family: inherit; | ||
background-color: #1a1a1a; | ||
cursor: pointer; | ||
transition: border-color 0.25s; | ||
} | ||
button:hover { | ||
border-color: #646cff; | ||
} | ||
button:focus, | ||
button:focus-visible { | ||
outline: 4px auto -webkit-focus-ring-color; | ||
} | ||
|
||
@media (prefers-color-scheme: light) { | ||
:root { | ||
color: #213547; | ||
background-color: #ffffff; | ||
} | ||
a:hover { | ||
color: #747bff; | ||
} | ||
button { | ||
background-color: #f9f9f9; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
// See https://kit.svelte.dev/docs/types#app | ||
// for information about these interfaces | ||
// and what to do when importing types | ||
declare namespace App { | ||
// interface Locals {} | ||
// interface PageData {} | ||
// interface Error {} | ||
// interface Platform {} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<link rel="shortcut icon" type="image/svg+xml" href="%sveltekit.assets%/emblem-light.svg" /> | ||
<meta name="viewport" content="width=device-width" /> | ||
%sveltekit.head% | ||
</head> | ||
<body> | ||
<div>%sveltekit.body%</div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
<script lang="ts"> | ||
import '../app.css' | ||
import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query' | ||
|
||
const queryClient = new QueryClient() | ||
</script> | ||
|
||
<QueryClientProvider client={queryClient}> | ||
<main> | ||
<slot /> | ||
</main> | ||
</QueryClientProvider> |
101 changes: 101 additions & 0 deletions
101
examples/svelte/auto-refetching/src/routes/+page.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
<script lang="ts"> | ||
import { | ||
useQueryClient, | ||
createQuery, | ||
createMutation, | ||
} from '@tanstack/svelte-query' | ||
|
||
let intervalMs = 1000 | ||
let value: string | ||
|
||
const client = useQueryClient() | ||
|
||
const endpoint = 'http://localhost:5173/api/data' | ||
|
||
const todos = createQuery<{ items: string[] }, Error>({ | ||
queryKey: ['refetch'], | ||
queryFn: async () => await fetch(endpoint).then((r) => r.json()), | ||
// Refetch the data every second | ||
refetchInterval: intervalMs, | ||
}) | ||
|
||
const addMutation = createMutation( | ||
(value: string) => fetch(`${endpoint}?add=${value}`).then((r) => r.json()), | ||
{ onSuccess: () => client.invalidateQueries(['refetch']) }, | ||
) | ||
const clearMutation = createMutation( | ||
() => fetch(`${endpoint}?clear=1`).then((r) => r.json()), | ||
{ | ||
onSuccess: () => client.invalidateQueries(['refetch']), | ||
}, | ||
) | ||
</script> | ||
|
||
<h1>Auto Refetch with stale-time set to 1s</h1> | ||
|
||
<p> | ||
This example is best experienced on your own machine, where you can open | ||
multiple tabs to the same localhost server and see your changes propagate | ||
between the two. | ||
</p> | ||
|
||
<label> | ||
Query Interval speed (ms):{' '} | ||
<div class="flex"> | ||
<input bind:value={intervalMs} type="number" step="100" />{' '} | ||
|
||
<span | ||
style="display:inline-block; | ||
margin-left:.5rem; | ||
width:.75rem; | ||
height:.75rem; | ||
background: {$todos.isFetching ? 'green' : 'transparent'}; | ||
transition:: {!$todos.isFetching ? 'all .3s ease' : 'none'}; | ||
border-radius: 100%; | ||
transform: 'scale(2)" | ||
/> | ||
</div> | ||
</label> | ||
<h2>Todo List</h2> | ||
<form | ||
on:submit={(e) => { | ||
e.preventDefault() | ||
e.stopPropagation() | ||
$addMutation.mutate(value, { | ||
onSuccess: () => (value = ''), | ||
}) | ||
}} | ||
> | ||
<input placeholder="enter something" bind:value /> | ||
</form> | ||
|
||
{#if $todos.isLoading} | ||
Loading... | ||
{/if} | ||
{#if $todos.error} | ||
An error has occurred: | ||
{$todos.error.message} | ||
{/if} | ||
{#if $todos.isSuccess} | ||
<ul> | ||
{#each $todos.data.items as item} | ||
<li>{item}</li> | ||
{/each} | ||
</ul> | ||
<div> | ||
<button on:click={() => $clearMutation.mutate(undefined)}> | ||
Clear All | ||
</button> | ||
</div> | ||
{/if} | ||
{#if $todos.isFetching} | ||
<div style="color:darkgreen; font-weight:700"> | ||
'Background Updating...' : ' ' | ||
</div> | ||
{/if} | ||
|
||
<style> | ||
li { | ||
text-align: left; | ||
} | ||
</style> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@DamianOsipiuk should this
ref
the react docs and replace some parts like the vue docs do?query/docs/vue/overview.md
Lines 1 to 6 in fa04a1d
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ideally it should if content is appropriate.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we do this in a follow up @lachlancollins ?