Skip to content
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.

Sign up for GitHub

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

docs(svelte-query): Add svelte-query-devtools to examples #5478

Merged
merged 3 commits into from
May 27, 2023
Merged

docs(svelte-query): Add svelte-query-devtools to examples #5478

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
86790d4
Add svelte-query-devtools to examples
lachlancollins May 27, 2023
0963bae
Merge branch 'alpha' into svelte-examples
lachlancollins May 27, 2023
79c122b
It's always prettier
lachlancollins May 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion examples/svelte/auto-refetching/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
},
"dependencies": {
"@tanstack/svelte-query": "^5.0.0-alpha.38"
"@tanstack/svelte-query": "^5.0.0-alpha.38",
"@tanstack/svelte-query-devtools": "workspace:5.0.0-alpha.39"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^2.1.0",
Expand Down
2 changes: 2 additions & 0 deletions examples/svelte/auto-refetching/src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import '../app.css'
import { browser } from '$app/environment'
import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'

const queryClient = new QueryClient({
defaultOptions: {
Expand All @@ -16,4 +17,5 @@
<main>
<slot />
</main>
<SvelteQueryDevtools />
</QueryClientProvider>
4 changes: 2 additions & 2 deletions examples/svelte/auto-refetching/src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,12 @@
const addMutation = createMutation({
mutationFn: (value: string) =>
fetch(`${endpoint}?add=${value}`).then((r) => r.json()),
onSuccess: () => client.invalidateQueries(['refetch']),
onSuccess: () => client.invalidateQueries({ queryKey: ['refetch'] }),
})

const clearMutation = createMutation({
mutationFn: () => fetch(`${endpoint}?clear=1`).then((r) => r.json()),
onSuccess: () => client.invalidateQueries(['refetch']),
onSuccess: () => client.invalidateQueries({ queryKey: ['refetch'] }),
})
</script>

Expand Down
2 changes: 1 addition & 1 deletion examples/svelte/auto-refetching/src/routes/api/data/+server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { json, type RequestHandler } from '@sveltejs/kit'

let list = { items: ['Item 1', 'Item 2', 'Item 3'] }
const list = { items: ['Item 1', 'Item 2', 'Item 3'] }

/** @type {import('./$types').RequestHandler} */
export const GET: RequestHandler = async ({ url }) => {
Expand Down
3 changes: 2 additions & 1 deletion examples/svelte/basic/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
},
"dependencies": {
"@tanstack/svelte-query": "^5.0.0-alpha.38"
"@tanstack/svelte-query": "^5.0.0-alpha.38",
"@tanstack/svelte-query-devtools": "workspace:5.0.0-alpha.39"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^2.1.0",
Expand Down
2 changes: 2 additions & 0 deletions examples/svelte/basic/src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import '../app.css'
import { browser } from '$app/environment'
import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'

const queryClient = new QueryClient({
defaultOptions: {
Expand All @@ -16,4 +17,5 @@
<main>
<slot />
</main>
<SvelteQueryDevtools />
</QueryClientProvider>
3 changes: 2 additions & 1 deletion examples/svelte/load-more-infinite-scroll/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
},
"dependencies": {
"@tanstack/svelte-query": "^5.0.0-alpha.38"
"@tanstack/svelte-query": "^5.0.0-alpha.38",
"@tanstack/svelte-query-devtools": "workspace:5.0.0-alpha.39"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^2.1.0",
Expand Down
4 changes: 2 additions & 2 deletions examples/svelte/load-more-infinite-scroll/src/lib/LoadMore.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@

const query = createInfiniteQuery({
queryKey: ['planets'],
queryFn: fetchPlanets,
//@ts-ignore
queryFn: ({ pageParam }) => fetchPlanets({ pageParam }),
defaultPageParam: 1,
getNextPageParam: (lastPage) => {
if (lastPage.next) {
const nextUrl = new URLSearchParams(new URL(lastPage.next).search)
Expand Down
2 changes: 2 additions & 0 deletions examples/svelte/load-more-infinite-scroll/src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import '../app.css'
import { browser } from '$app/environment'
import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'

const queryClient = new QueryClient({
defaultOptions: {
Expand All @@ -16,4 +17,5 @@
<main>
<slot />
</main>
<SvelteQueryDevtools />
</QueryClientProvider>
3 changes: 2 additions & 1 deletion examples/svelte/optimistic-updates-typescript/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
},
"dependencies": {
"@tanstack/svelte-query": "^5.0.0-alpha.38"
"@tanstack/svelte-query": "^5.0.0-alpha.38",
"@tanstack/svelte-query-devtools": "workspace:5.0.0-alpha.39"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^2.1.0",
Expand Down
2 changes: 2 additions & 0 deletions examples/svelte/optimistic-updates-typescript/src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import '../app.css'
import { browser } from '$app/environment'
import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'

const queryClient = new QueryClient({
defaultOptions: {
Expand All @@ -16,4 +17,5 @@
<main>
<slot />
</main>
<SvelteQueryDevtools />
</QueryClientProvider>
4 changes: 2 additions & 2 deletions examples/svelte/optimistic-updates-typescript/src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
onMutate: async (newTodo: string) => {
text = ''
// Cancel any outgoing refetches (so they don't overwrite our optimistic update)
await client.cancelQueries(['optimistic'])
await client.cancelQueries({ queryKey: ['optimistic'] })

// Snapshot the previous value
const previousTodos = client.getQueryData<Todos>(['optimistic'])
Expand All @@ -72,7 +72,7 @@
},
// Always refetch after error or success:
onSettled: () => {
client.invalidateQueries(['optimistic'])
client.invalidateQueries({ queryKey: ['optimistic'] })
},
})
</script>
Expand Down
3 changes: 2 additions & 1 deletion examples/svelte/playground/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
},
"dependencies": {
"@tanstack/svelte-query": "^5.0.0-alpha.38"
"@tanstack/svelte-query": "^5.0.0-alpha.38",
"@tanstack/svelte-query-devtools": "workspace:5.0.0-alpha.39"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^2.1.0",
Expand Down
2 changes: 2 additions & 0 deletions examples/svelte/playground/src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import '../app.css'
import { browser } from '$app/environment'
import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'

const queryClient = new QueryClient({
defaultOptions: {
Expand All @@ -20,4 +21,5 @@
<div id="app">
<slot />
</div>
<SvelteQueryDevtools />
</QueryClientProvider>
4 changes: 2 additions & 2 deletions examples/svelte/playground/src/routes/AddTodo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

let name = ''

const postTodo = async ({ name, notes }) => {
const postTodo = async ({ name, notes }: { name: string; notes: string }) => {
console.info('postTodo', { name, notes })
return new Promise((resolve, reject) => {
setTimeout(() => {
Expand Down Expand Up @@ -41,7 +41,7 @@
<input bind:value={name} disabled={$addMutation.status === 'pending'} />

<button
on:click={() => $addMutation.mutate({ name })}
on:click={() => $addMutation.mutate({ name, notes: name })}
disabled={$addMutation.status === 'pending' || !name}
>
Add Todo
Expand Down
19 changes: 15 additions & 4 deletions examples/svelte/playground/src/routes/EditTodo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,11 @@
editingIndex,
} from '../lib/stores'

type Todo = { id: number; name: string; notes: string }

const queryClient = useQueryClient()

const fetchTodoById = async ({ id }: { id: number }) => {
const fetchTodoById = async ({ id }: { id: number }): Promise<Todo> => {
console.info('fetchTodoById', { id })
return new Promise((resolve, reject) => {
setTimeout(() => {
Expand All @@ -23,18 +25,27 @@
new Error(JSON.stringify({ fetchTodoById: { id } }, null, 2)),
)
}
resolve($list.find((d) => d.id === id))
const todo = $list.find((d) => d.id === id)
if (!todo) {
return reject(
new Error(JSON.stringify({ fetchTodoById: { id } }, null, 2)),
)
}
resolve(todo)
}, $queryTimeMin + Math.random() * ($queryTimeMax - $queryTimeMin))
})
}

function patchTodo(todo) {
function patchTodo(todo?: Todo): Promise<Todo> {
console.info('patchTodo', todo)
return new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() < $errorRate) {
return reject(new Error(JSON.stringify({ patchTodo: todo }, null, 2)))
}
if (!todo) {
return reject(new Error(JSON.stringify({ patchTodo: todo }, null, 2)))
}
list.set(
$list.map((d) => {
if (d.id === todo.id) {
Expand Down Expand Up @@ -86,7 +97,7 @@
<span>
Error! <button on:click={() => $query.refetch()}>Retry</button>
</span>
{:else}
{:else if todo}
<label>
Name:{' '}
<input bind:value={todo.name} disabled={disableEditSave} />
Expand Down
3 changes: 2 additions & 1 deletion examples/svelte/simple/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
"check": "svelte-check --tsconfig ./tsconfig.json"
},
"dependencies": {
"@tanstack/svelte-query": "^5.0.0-alpha.38"
"@tanstack/svelte-query": "^5.0.0-alpha.38",
"@tanstack/svelte-query-devtools": "workspace:5.0.0-alpha.39"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^2.4.0",
Expand Down
2 changes: 2 additions & 0 deletions examples/svelte/simple/src/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script lang="ts">
import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
import Simple from './lib/Simple.svelte'

const queryClient = new QueryClient()
Expand All @@ -9,4 +10,5 @@
<main>
<Simple />
</main>
<SvelteQueryDevtools />
</QueryClientProvider>
3 changes: 2 additions & 1 deletion examples/svelte/ssr/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
},
"dependencies": {
"@tanstack/svelte-query": "^5.0.0-alpha.38"
"@tanstack/svelte-query": "^5.0.0-alpha.38",
"@tanstack/svelte-query-devtools": "workspace:5.0.0-alpha.39"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^2.1.0",
Expand Down
2 changes: 2 additions & 0 deletions examples/svelte/ssr/src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script lang="ts">
import '../app.css'
import { QueryClientProvider } from '@tanstack/svelte-query'
import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
import type { PageData } from './$types'

export let data: PageData
Expand All @@ -10,4 +11,5 @@
<main>
<slot />
</main>
<SvelteQueryDevtools />
</QueryClientProvider>
3 changes: 2 additions & 1 deletion examples/svelte/star-wars/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
},
"dependencies": {
"@tanstack/svelte-query": "^5.0.0-alpha.38"
"@tanstack/svelte-query": "^5.0.0-alpha.38",
"@tanstack/svelte-query-devtools": "workspace:5.0.0-alpha.39"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^2.1.0",
Expand Down
2 changes: 2 additions & 0 deletions examples/svelte/star-wars/src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import '../app.css'
import { browser } from '$app/environment'
import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'

const queryClient = new QueryClient({
defaultOptions: {
Expand All @@ -25,4 +26,5 @@
<a href="/characters">Characters</a>
</nav>
<slot />
<SvelteQueryDevtools />
</QueryClientProvider>
24 changes: 24 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.