fix(examples/vue): throw on non-ok 'fetch' responses in the query functions

examples/vue/2.6-basic/src/Post.vue

@@ -4,10 +4,13 @@ import { useQuery } from '@tanstack/vue-query'
 
 import { Post } from './types'
 
-const fetcher = async (id: number): Promise<Post> =>
-  await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then(
-    (response) => response.json(),
+const fetcher = async (id: number): Promise<Post> => {
+  const response = await fetch(
+    `https://jsonplaceholder.typicode.com/posts/${id}`,
   )
+  if (!response.ok) throw new Error('Failed to fetch post')
+  return await response.json()
+}
 
 export default defineComponent({
   name: 'PostDetails',

examples/vue/2.6-basic/src/Posts.vue

@@ -4,10 +4,11 @@ import { useQuery } from '@tanstack/vue-query'
 
 import type { Post } from './types'
 
-const fetcher = async (): Promise<Post[]> =>
-  await fetch('https://jsonplaceholder.typicode.com/posts').then((response) =>
-    response.json(),
-  )
+const fetcher = async (): Promise<Post[]> => {
+  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
+  if (!response.ok) throw new Error('Failed to fetch posts')
+  return await response.json()
+}
 
 export default defineComponent({
   name: 'PostsList',

examples/vue/2.7-basic/src/Post.vue

@@ -4,10 +4,13 @@ import { useQuery } from '@tanstack/vue-query'
 
 import { Post } from './types'
 
-const fetcher = async (id: number): Promise<Post> =>
-  await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then(
-    (response) => response.json(),
+const fetcher = async (id: number): Promise<Post> => {
+  const response = await fetch(
+    `https://jsonplaceholder.typicode.com/posts/${id}`,
   )
+  if (!response.ok) throw new Error('Failed to fetch post')
+  return await response.json()
+}
 
 export default defineComponent({
   name: 'PostDetails',

examples/vue/2.7-basic/src/Posts.vue

@@ -4,10 +4,11 @@ import { useQuery } from '@tanstack/vue-query'
 
 import type { Post } from './types'
 
-const fetcher = async (): Promise<Post[]> =>
-  await fetch('https://jsonplaceholder.typicode.com/posts').then((response) =>
-    response.json(),
-  )
+const fetcher = async (): Promise<Post[]> => {
+  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
+  if (!response.ok) throw new Error('Failed to fetch posts')
+  return await response.json()
+}
 
 export default defineComponent({
   name: 'PostsList',

examples/vue/basic/src/Post.vue

@@ -4,10 +4,13 @@ import { useQuery } from '@tanstack/vue-query'
 
 import type { Post } from './types'
 
-const fetcher = async (id: number): Promise<Post> =>
-  await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then(
-    (response) => response.json(),
+const fetcher = async (id: number): Promise<Post> => {
+  const response = await fetch(
+    `https://jsonplaceholder.typicode.com/posts/${id}`,
   )
+  if (!response.ok) throw new Error('Failed to fetch post')
+  return await response.json()
+}
 
 export default defineComponent({
   name: 'PostDetails',

examples/vue/basic/src/Posts.vue

@@ -4,10 +4,11 @@ import { useQuery } from '@tanstack/vue-query'
 
 import type { Post } from './types'
 
-const fetcher = async (): Promise<Array<Post>> =>
-  await fetch('https://jsonplaceholder.typicode.com/posts').then((response) =>
-    response.json(),
-  )
+const fetcher = async (): Promise<Array<Post>> => {
+  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
+  if (!response.ok) throw new Error('Failed to fetch posts')
+  return await response.json()
+}
 
 export default defineComponent({
   name: 'PostsList',

examples/vue/dependent-queries/src/Post.vue

@@ -4,15 +4,21 @@ import { skipToken, useQuery } from '@tanstack/vue-query'
 
 import type { Author, Post } from './types'
 
-const fetchPost = async (id: number): Promise<Post> =>
-  await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then(
-    (response) => response.json(),
+const fetchPost = async (id: number): Promise<Post> => {
+  const response = await fetch(
+    `https://jsonplaceholder.typicode.com/posts/${id}`,
   )
+  if (!response.ok) throw new Error('Failed to fetch post')
+  return await response.json()
+}
 
-const fetchAuthor = async (id: number): Promise<Author> =>
-  await fetch(`https://jsonplaceholder.typicode.com/users/${id}`).then(
-    (response) => response.json(),
+const fetchAuthor = async (id: number): Promise<Author> => {
+  const response = await fetch(
+    `https://jsonplaceholder.typicode.com/users/${id}`,
   )
+  if (!response.ok) throw new Error('Failed to fetch author')
+  return await response.json()
+}
 
 export default defineComponent({
   name: 'PostDetails',

examples/vue/dependent-queries/src/Posts.vue

@@ -4,10 +4,11 @@ import { useQuery } from '@tanstack/vue-query'
 
 import type { Post } from './types'
 
-const fetcher = async (): Promise<Array<Post>> =>
-  await fetch('https://jsonplaceholder.typicode.com/posts').then((response) =>
-    response.json(),
-  )
+const fetcher = async (): Promise<Array<Post>> => {
+  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
+  if (!response.ok) throw new Error('Failed to fetch posts')
+  return await response.json()
+}
 
 export default defineComponent({
   name: 'PostsList',

examples/vue/nuxt3/app.vue

@@ -5,10 +5,11 @@
 <script setup lang="ts">
 import { useQuery } from '@tanstack/vue-query'
 
-const fetcher = async () =>
-  await fetch('https://jsonplaceholder.typicode.com/posts').then((response) =>
-    response.json(),
-  )
+const fetcher = async () => {
+  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
+  if (!response.ok) throw new Error('Failed to fetch posts')
+  return await response.json()
+}
 
 const { data, suspense } = useQuery({ queryKey: ['test'], queryFn: fetcher })
 

examples/vue/persister/src/Post.vue

@@ -6,10 +6,13 @@ import { useQuery } from '@tanstack/vue-query'
 import { experimental_createQueryPersister } from '@tanstack/query-persist-client-core'
 import type { Post } from './types'
 
-const fetcher = async (id: number): Promise<Post> =>
-  await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then(
-    (response) => response.json(),
+const fetcher = async (id: number): Promise<Post> => {
+  const response = await fetch(
+    `https://jsonplaceholder.typicode.com/posts/${id}`,
   )
+  if (!response.ok) throw new Error('Failed to fetch post')
+  return await response.json()
+}
 
 export default defineComponent({
   name: 'PostDetails',

examples/vue/persister/src/Posts.vue

@@ -5,13 +5,12 @@ import { experimental_createQueryPersister } from '@tanstack/query-persist-clien
 
 import type { Post } from './types'
 
-const fetcher = async (): Promise<Array<Post>> =>
-  await fetch('https://jsonplaceholder.typicode.com/posts').then(
-    (response) =>
-      new Promise((resolve) =>
-        setTimeout(() => resolve(response.json()), 1000),
-      ),
-  )
+const fetcher = async (): Promise<Array<Post>> => {
+  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
+  if (!response.ok) throw new Error('Failed to fetch posts')
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+  return await response.json()
+}
 
 export default defineComponent({
   name: 'PostsList',

examples/vue/simple/src/App.vue

@@ -10,9 +10,11 @@ export default defineComponent({
     const { data, error, isFetching, isPending } = useQuery({
       queryKey: ['repoData'],
       async queryFn() {
-        return await fetch('https://api.github.com/repos/Tanstack/query').then(
-          (response) => response.json(),
+        const response = await fetch(
+          'https://api.github.com/repos/Tanstack/query',
         )
+        if (!response.ok) throw new Error('Failed to fetch repo data')
+        return await response.json()
       },
     })