minor fix & polish

vikejs · Mar 13, 2024 · a4c5a7c · a4c5a7c
1 parent 3a89c35
commit a4c5a7c
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 23 deletions.
diff --git a/packages/vike-react-query/README.md b/packages/vike-react-query/README.md
@@ -9,30 +9,33 @@
 
 See [example](https://github.com/vikejs/vike-react/tree/main/examples/react-query).
 
-## Installation: 
-1. `pnpm i @tanstack/react-query vike-react-query`
-2. extend `+config.h.ts`
-```ts
+## Installation:
 
-import type { Config } from 'vike/types'
-import vikeReact from 'vike-react/config'
-import vikeReactQuery from 'vike-react-query/config'
+1. `pnpm i @tanstack/react-query vike-react-query`
+2. Extend `+config.ts`:
+   ```ts
+   import type { Config } from 'vike/types'
+   import vikeReact from 'vike-react/config'
+   import vikeReactQuery from 'vike-react-query/config'
 
-export default {
-  ...
-  extends: [vikeReact, vikeReactQuery]
-} satisfies Config
-```
+   export default {
+     ...
+     extends: [vikeReact, vikeReactQuery]
+   } satisfies Config
+   ```
 
 
 ## Basic usage:
+
 ```tsx
 import { useSuspenseQuery } from '@tanstack/react-query'
 
 const Movie = ({ id }: { id: string }) => {
   const result = useSuspenseQuery({
     queryKey: ['movie', id],
-    queryFn: () => fetch(`https://star-wars.brillout.com/api/films/${id}.json`).then((res) => res.json())
+    queryFn: () =>
+      fetch(`https://brillout.github.io/star-wars/api/films/${id}.json`)
+      .then((res) => res.json())
   })
 
   const { title } = result.data
@@ -47,6 +50,7 @@ const Movie = ({ id }: { id: string }) => {
 
 
 ## `withFallback`
+
 Using `withFallback`, you can create reusable and independent components, that leverage React 18's suspense streaming feature. (Similar to [Next.js Loading UI and Streaming](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming), but on component level.)<br/>
 While the query is loading, it renders the `Loading` component.<br/>
 When the query completed and the data is available, the component independently becomes interactive.<br/>
@@ -60,7 +64,9 @@ const Movie = withFallback(
   ({ id }: { id: string }) => {
     const result = useSuspenseQuery({
       queryKey: ['movie', id],
-      queryFn: () => fetch(`https://star-wars.brillout.com/api/films/${id}.json`).then((res) => res.json())
+      queryFn: () =>
+        fetch(`https://brillout.github.io/star-wars/api/films/${id}.json`)
+        .then((res) => res.json())
     })
 
     const { title } = result.data
@@ -84,18 +90,20 @@ const Movie = withFallback(
 ```
 
 ## Usage with Telefunc:
+
 If used together with [Telefunc](https://telefunc.com/), the query function will always run on the server. (Similar to [Next.js Server Actions and Mutations](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations).)
 
 #### Query example:
+
 ```tsx
-//movie.telefunc.ts
+// movie.telefunc.ts
 export async function getMovie(id: string) {
   const movie = await prisma.movie.findUnique({ where: id })
   return movie;
 }
 
 
-//movie.tsx
+// movie.tsx
 import { useSuspenseQuery } from '@tanstack/react-query'
 import { withFallback } from 'vike-react-query'
 import { getMovie } from './movie.telefunc'
@@ -128,15 +136,16 @@ const Movie = withFallback(
 ```
 
 #### Mutation example:
+
 ```tsx
-//movie.telefunc.ts
+// movie.telefunc.ts
 export async function createMovie({ title }: { title: string }) {
   const movie = await prisma.movie.create({ data: { title } })
   return movie
 }
 
 
-//movie.tsx
+// movie.tsx
 import { useMutation } from '@tanstack/react-query'
 import { createMovie } from './movie.telefunc'
 
@@ -164,8 +173,9 @@ const CreateMovie = () => {
 ```
 
 #### Putting it together:
+
 ```tsx
-//movie.telefunc.ts
+// movie.telefunc.ts
 export async function getMovies() {
   const movies = await prisma.movie.findMany()
   return movies;
@@ -176,7 +186,7 @@ export async function createMovie({ title }: { title: string }) {
 }
 
 
-//movie.tsx
+// movie.tsx
 import { useSuspenseQuery, useMutation } from '@tanstack/react-query'
 import { withFallback } from 'vike-react-query'
 import { getMovies, createMovie } from './movie.telefunc'

diff --git a/packages/vike-react/CHANGELOG.md b/packages/vike-react/CHANGELOG.md
@@ -37,7 +37,7 @@
 ### BREAKING CHANGES
 
 * Update Vike to `0.4.160` or above.
-* Replace `import vikeReact from 'vike-react'` with `import vikeReact from 'vike-react/config'`. (Typically in your `/pages/+config.h.js`.)
+* Replace `import vikeReact from 'vike-react'` with `import vikeReact from 'vike-react/config'`. (Typically in your `/pages/+config.js`.)
 
 
 ## [0.4.2](https://github.com/vikejs/vike-react/compare/vike-react@0.4.1...vike-react@0.4.2) (2024-01-21)

diff --git a/packages/vike-react/README.md b/packages/vike-react/README.md
@@ -38,7 +38,7 @@ npm install vike-react
 2. Extend your existing Vike config files with `vike-react`:
 
 ```diff
- // /pages/+config.h.js
+ // /pages/+config.js
 
 +import vikeReact from 'vike-react/config'
 +

diff --git a/packages/vike-react/src/index.ts b/packages/vike-react/src/index.ts
@@ -1,5 +1,5 @@
 // TODO/next-major-release: remove this file/export
 console.warn(
-  "[vike-react][warning][deprecation] Replace `import vikeReact from 'vike-react'` with `import vikeReact from 'vike-react/config'` (typically in your /pages/+config.h.js)"
+  "[vike-react][warning][deprecation] Replace `import vikeReact from 'vike-react'` with `import vikeReact from 'vike-react/config'` (typically in your /pages/+config.js)"
 )
 export { default } from './+config.js'