Skip to content

Commit 4a66cda

Browse files
girishsontakkegirishsontakke
committed
Merge branch 'main' of github.com:TanStack/query into issue-4689
1 parent 7eb2223 commit 4a66cda

File tree

182 files changed

+6311
-123
lines changed

Some content is hidden

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

182 files changed

+6311
-123
lines changed

‎.codesandbox/ci.json

+1-1
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

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/packages/svelte-query/.svelte-kit

‎babel.config.js

+1-1
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

+1-1
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/react/guides/window-focus-refetching.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ id: window-focus-refetching
33
title: Window Focus Refetching
44
---
55

6-
If a user leaves your application and returns to stale data, **TanStack Query automatically requests fresh data for you in the background**. You can disable this globally or per-query using the `refetchOnWindowFocus` option:
6+
If a user leaves your application and returns and the query data is stale, **TanStack Query automatically requests fresh data for you in the background**. You can disable this globally or per-query using the `refetchOnWindowFocus` option:
77

88
#### Disabling Globally
99

@@ -14,7 +14,7 @@ If a user leaves your application and returns to stale data, **TanStack Query au
1414
const queryClient = new QueryClient({
1515
defaultOptions: {
1616
queries: {
17-
refetchOnWindowFocus: false,
17+
refetchOnWindowFocus: false, // default: true
1818
},
1919
},
2020
})

‎docs/svelte/overview.md

+64-3
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

+9
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

+38
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

+25
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

+81
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

+9
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+
}

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

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="shortcut icon" type="image/svg+xml" href="%sveltekit.assets%/emblem-light.svg" />
6+
<meta name="viewport" content="width=device-width" />
7+
%sveltekit.head%
8+
</head>
9+
<body>
10+
<div>%sveltekit.body%</div>
11+
</body>
12+
</html>

‎examples/svelte/auto-refetching/src/routes/+layout.svelte

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<script lang="ts">
2+
import '../app.css'
3+
import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
4+
5+
const queryClient = new QueryClient()
6+
</script>
7+
8+
<QueryClientProvider client={queryClient}>
9+
<main>
10+
<slot />
11+
</main>
12+
</QueryClientProvider>

0 commit comments

Comments
 (0)