Skip to content

Commit 82c38a8

Browse files
brilloutbrillout
committed
Merge remote-tracking branch 'origin/main' into brillout/dev
2 parents c417d61 + a87df80 commit 82c38a8

File tree

4 files changed

+123
-84
lines changed

4 files changed

+123
-84
lines changed

‎examples/vue-pinia/pages/index/+Page.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import TodoList from './TodoList.vue'
2020
2121
const { increment } = useCounterStore()
2222
onServerPrefetch(() => {
23-
// Show that hydration works - the counter should start at 1
23+
// Let the counter start at 1 (and hydration still works)
2424
increment()
2525
})
2626
</script>

‎examples/vue-pinia/pages/index/+onData.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@ function onData(pageContext: PageContext & { data?: Data }) {
1111

1212
// Saving KBs: we don't need pageContext.data (we use the store instead)
1313
// - If we don't delete pageContext.data then Vike sends pageContext.data to the client-side
14-
// - This optimization only works if the page is SSR'd: if the page is pre-rendered then don't do this
14+
// - This optimization only works with SSR: if the page is pre-rendered then don't do this
1515
if (!pageContext.isPrerendering) delete pageContext.data
1616
}

‎packages/vike-vue-pinia/README.md‎

Lines changed: 48 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,19 @@
66

77
Integrates [Pinia](https://pinia.vuejs.org) into your [`vike-vue`](https://vike.dev/vike-vue) app.
88

9+
<br/>
10+
11+
**Table of Contents**
12+
913
[Installation](#installation)
14+
[Basic usage](#basic-usage)
1015
[Example](#example)
1116
[Populate store with `+data`](#populate-store-with-data)
1217
[Version history](#version-history)
1318
[See also](#see-also)
1419

1520
<br/>
1621

17-
## Example
18-
19-
See [examples/vue-pinia](https://github.com/vikejs/vike-vue/tree/main/examples/vue-pinia).
20-
21-
<br/>
22-
2322
## Installation
2423

2524
1. `npm install vike-vue-pinia pinia`
@@ -35,40 +34,58 @@ See [examples/vue-pinia](https://github.com/vikejs/vike-vue/tree/main/examples/v
3534
extends: [vikeVue, vikeVuePinia]
3635
}
3736
```
38-
3. You can now use Pinia in any of your components.
39-
```vue
40-
<template>
41-
<button type="button" @click="counterStore.increment">Counter {{ counterStore.count }}</button>
42-
</template>
43-
44-
<script setup>
45-
import { useCounterStore } from './useCounterStore'
46-
const counterStore = useCounterStore()
47-
</script>
48-
```
49-
```js
50-
import { defineStore } from 'pinia'
51-
import { ref } from 'vue'
52-
53-
export const useCounterStore = defineStore('counter', () => {
54-
const count = ref(0)
55-
const increment = () => count.value++
56-
return { count, increment }
57-
})
58-
```
5937

6038
> [!NOTE]
6139
> The `vike-vue-pinia` extension requires [`vike-vue`](https://vike.dev/vike-vue).
6240
6341
<br/>
6442

43+
# Basic usage
44+
45+
```js
46+
// stores/useCounterStore.ts
47+
48+
import { defineStore } from 'pinia'
49+
import { ref } from 'vue'
50+
51+
export const useCounterStore = defineStore('counter', () => {
52+
const count = ref(0)
53+
const increment = () => count.value++
54+
return { count, increment }
55+
})
56+
```
57+
58+
```vue
59+
<!-- components/Counter.vue -->
60+
61+
<template>
62+
<button type="button" @click="counterStore.increment">
63+
Counter {{ counterStore.count }}
64+
</button>
65+
</template>
66+
67+
<script setup>
68+
import { useCounterStore } from '../stores/useCounterStore'
69+
const counterStore = useCounterStore()
70+
</script>
71+
```
72+
73+
<br/>
74+
75+
## Example
76+
77+
See [examples/vue-pinia/](https://github.com/vikejs/vike-vue/tree/main/examples/vue-pinia).
78+
79+
<br/>
80+
6581
## Populate store with `+data`
6682

6783
To populate your store with data fetched via the [`+data`](https://vike.dev/data) hook, use [`+onData`](https://vike.dev/onData) and [`pageContext.data`](https://vike.dev/pageContext#data).
6884

6985
```ts
7086
// pages/todos/+onData.ts
7187
// Environment: server, client
88+
7289
export { onData }
7390

7491
import type { PageContext } from 'vike/types'
@@ -81,17 +98,17 @@ function onData(pageContext: PageContext & { data?: Data }) {
8198

8299
// Saving KBs: we don't need pageContext.data (we use the store instead)
83100
// - If we don't delete pageContext.data then Vike sends pageContext.data to the client-side
84-
// - This optimization only works if the page is SSR'd: if the page is pre-rendered then don't do this
101+
// - This optimization only works with SSR: if the page is pre-rendered then don't do this
85102
delete pageContext.data
86103
}
87104
```
88105

89-
See To-Do List example at [examples/vue-pinia](https://github.com/vikejs/vike-vue/tree/main/examples/vue-pinia).
106+
See complete To-Do List example at [examples/vue-pinia](https://github.com/vikejs/vike-vue/tree/main/examples/vue-pinia).
90107

91108
> [!NOTE]
92-
> During [SSR](https://vike.dev/ssr), `+onData` is called only on the server. That's because the store state is sent to the client, so that when the page hydrates, the client has the exact same state as the server — preventing [hydration mismatches](https://vike.dev/hydration-mismatch).
109+
> During [SSR](https://vike.dev/ssr), `+onData` is called only on the server — the store's initial state (set by `initTodos()`) is automatically sent to the client, so you don't need to populate the store again on the client.
93110
>
94-
> As a result, the store doesn't need to be populated on the client: it's already populated on the server and then sent to the client.
111+
> This approach prevents [hydration mismatches](https://vike.dev/hydration-mismatch), as it ensures the client has the exact same initial state as the server during SSR.
95112
96113
<br/>
97114

‎packages/vike-vue-query/README.md‎

Lines changed: 73 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,19 @@
66

77
Integrates [TanStack Query](https://tanstack.com/query) into your [`vike-vue`](https://vike.dev/vike-vue) app.
88

9+
<br/>
10+
11+
**Table of Contents**
12+
913
[Installation](#installation)
14+
[Basic usage](#basic-usage)
15+
[Example](#example)
1016
[Settings](#settings)
11-
[Example](https://github.com/vikejs/vike-vue/tree/main/examples/vue-query)
12-
[Version history](https://github.com/vikejs/vike-vue/blob/main/packages/vike-vue-query/CHANGELOG.md)
17+
[Version history](#version-history)
1318
[See also](#see-also)
1419

1520
<br/>
1621

17-
1822
## Installation
1923

2024
1. `npm install vike-vue-query @tanstack/vue-query`
@@ -30,63 +34,72 @@ Integrates [TanStack Query](https://tanstack.com/query) into your [`vike-vue`](h
3034
extends: [vikeVue, vikeVueQuery]
3135
}
3236
```
33-
3. You can now use TanStack Query in any of your components.
34-
```vue
35-
<template>
36-
<h1>Star Wars Movies</h1>
37-
<ol>
38-
<template v-if="isPending">
39-
<li>Loading...</li>
40-
</template>
41-
<template v-else-if="isError">
42-
<li>Error: {{ error }}</li>
43-
</template>
44-
<template v-else>
45-
<li v-for="item in data!" :key="item.id">
46-
{{ item.title }} ({{ item.release_date }})
47-
</li>
48-
</template>
49-
</ol>
50-
</template>
51-
52-
<script setup>
53-
import { onServerPrefetch } from 'vue'
54-
import { useQuery } from '@tanstack/vue-query'
5537

56-
const { isError, isPending, isFetching, data, error, suspense } = useQuery({
57-
queryKey: ['movies'],
58-
queryFn: fetchMovies,
59-
staleTime: 1000 * 60 * 5,
60-
select: (data) => minimize(data),
61-
})
38+
> [!NOTE]
39+
> The `vike-vue-query` extension requires [`vike-vue`](https://vike.dev/vike-vue).
6240
63-
// This will be called on the server to prefetch the data
64-
onServerPrefetch(suspense)
41+
<br/>
6542

66-
async function fetchMovies() {
67-
const response = await fetch('https://brillout.github.io/star-wars/api/films.json')
68-
const moviesData = (await response.json())
69-
return moviesData
70-
}
43+
# Basic usage
7144

72-
function minimize(movies) {
73-
return movies.map((movie) => {
74-
const { title, release_date, id } = movie
75-
return { title, release_date, id }
76-
})
77-
}
78-
</script>
79-
```
45+
```vue
46+
<template>
47+
<h1>Star Wars Movies</h1>
48+
<ol>
49+
<template v-if="isPending">
50+
<li>Loading...</li>
51+
</template>
52+
<template v-else-if="isError">
53+
<li>Error: {{ error }}</li>
54+
</template>
55+
<template v-else>
56+
<li v-for="item in data!" :key="item.id">
57+
{{ item.title }} ({{ item.release_date }})
58+
</li>
59+
</template>
60+
</ol>
61+
</template>
62+
63+
<script setup>
64+
import { onServerPrefetch } from 'vue'
65+
import { useQuery } from '@tanstack/vue-query'
66+
67+
const { isError, isPending, isFetching, data, error, suspense } = useQuery({
68+
queryKey: ['movies'],
69+
queryFn: fetchMovies,
70+
staleTime: 1000 * 60 * 5,
71+
select: (data) => minimize(data),
72+
})
73+
74+
// This will be called on the server to prefetch the data
75+
onServerPrefetch(suspense)
76+
77+
async function fetchMovies() {
78+
const response = await fetch('https://brillout.github.io/star-wars/api/films.json')
79+
const moviesData = (await response.json())
80+
return moviesData
81+
}
8082
81-
> [!NOTE]
82-
> The `vike-vue-query` extension requires [`vike-vue`](https://vike.dev/vike-vue).
83+
function minimize(movies) {
84+
return movies.map((movie) => {
85+
const { title, release_date, id } = movie
86+
return { title, release_date, id }
87+
})
88+
}
89+
</script>
90+
```
8391

8492
<br/>
8593

94+
## Example
95+
96+
See [examples/vue-query/](https://github.com/vikejs/vike-vue/tree/main/examples/vue-query).
97+
98+
<br/>
8699

87100
## Settings
88101

89-
The query client can receive custom options either by adding `queryClientConfig` to your `+config.ts` or adding a separate `+queryClientConfig.ts` file in your `pages` directory.
102+
You can set TanStack Query client options:
90103

91104
```ts
92105
// pages/+queryClientConfig.ts
@@ -95,21 +108,30 @@ export { queryClientConfig }
95108

96109
import type { QueryClientConfig } from '@tanstack/vue-query'
97110

98-
// Query client options
99111
const queryClientConfig: QueryClientConfig = {
100112
defaultOptions: {
101113
queries: {
114+
// Retry failed requests once
115+
retry: 1,
116+
// Consider data stale after 2 minutes
117+
staleTime: 1000 * 60 * 2,
102118
// Don't refetch when window loses or gains focus during development
103119
refetchOnWindowFocus: import.meta.env.PROD,
104-
staleTime: 1000 * 60 * 2
105120
// ... more options ...
106121
}
107122
}
108123
}
109124
```
110125

126+
For all available options, see [TanStack Query > API reference > useQuery](https://tanstack.com/query/latest/docs/framework/vue/reference/useQuery).
127+
111128
<br/>
112129

130+
## Version history
131+
132+
See [CHANGELOG.md](https://github.com/vikejs/vike-vue/blob/main/packages/vike-vue-query/CHANGELOG.md).
133+
134+
<br/>
113135

114136
## See also
115137

0 commit comments

Comments
 (0)