diff --git a/package.json b/package.json
index dac4ce5f..61c3a37b 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
 		"validate": "run-p lint test:ci test:e2e:headless"
 	},
 	"dependencies": {
-		"@tanstack/react-query": "4.36.1",
+		"@tanstack/react-query": "5.17.0",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"react-router-dom": "6.16.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 69bd9337..ca29e372 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ overrides:
 
 dependencies:
   '@tanstack/react-query':
-    specifier: 4.36.1
-    version: 4.36.1(react-dom@18.2.0)(react@18.2.0)
+    specifier: 5.17.0
+    version: 5.17.0(react@18.2.0)
   react:
     specifier: 18.2.0
     version: 18.2.0
@@ -2389,26 +2389,17 @@ packages:
       tailwindcss: 3.3.3(ts-node@10.9.1)
     dev: true
 
-  /@tanstack/query-core@4.36.1:
-    resolution: {integrity: sha512-DJSilV5+ytBP1FbFcEJovv4rnnm/CokuVvrBEtW/Va9DvuJ3HksbXUJEpI0aV1KtuL4ZoO9AVE6PyNLzF7tLeA==}
+  /@tanstack/query-core@5.17.0:
+    resolution: {integrity: sha512-LoBaPtbMY26kRS+ohII4thTsWkJJsXKGitOLikTo2aqPA4yy7cfFJITs8DRnuERT7tLF5xfG9Lnm33Vp/38Vmw==}
     dev: false
 
-  /@tanstack/react-query@4.36.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-y7ySVHFyyQblPl3J3eQBWpXZkliroki3ARnBKsdJchlgt7yJLRDUcf4B8soufgiYt3pEQIkBWBx1N9/ZPIeUWw==}
+  /@tanstack/react-query@5.17.0(react@18.2.0):
+    resolution: {integrity: sha512-iNSn6ZA7mHUjrT0a271eKoa1oR1HznlrGbb475awft1kuP3zrhyUCrI8tlGowOr7zRoAxJholjwxO+gfz1IObw==}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-native: '*'
-    peerDependenciesMeta:
-      react-dom:
-        optional: true
-      react-native:
-        optional: true
+      react: ^18.0.0
     dependencies:
-      '@tanstack/query-core': 4.36.1
+      '@tanstack/query-core': 5.17.0
       react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      use-sync-external-store: 1.2.0(react@18.2.0)
     dev: false
 
   /@testing-library/cypress@10.0.1(cypress@13.3.1):
@@ -3536,7 +3527,7 @@ packages:
       normalize-path: 3.0.0
       readdirp: 3.6.0
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
     dev: true
 
   /ci-info@3.8.0:
@@ -5057,14 +5048,6 @@ packages:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
     dev: true
 
-  /fsevents@2.3.2:
-    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -7611,7 +7594,7 @@ packages:
     engines: {node: '>=10.0.0'}
     hasBin: true
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
     dev: true
 
   /rollup@4.9.2:
@@ -8668,14 +8651,6 @@ packages:
       requires-port: 1.0.0
     dev: true
 
-  /use-sync-external-store@1.2.0(react@18.2.0):
-    resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      react: 18.2.0
-    dev: false
-
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true
diff --git a/src/pages/Details.tsx b/src/pages/Details.tsx
index a362c152..5f940b53 100644
--- a/src/pages/Details.tsx
+++ b/src/pages/Details.tsx
@@ -1,9 +1,9 @@
+import { useQuery } from '@tanstack/react-query'
 import getFruits from 'api/getFruits'
 import Head from 'components/Head'
 import ImageAttribution from 'components/ImageAttribution'
 import LoadingOrError from 'components/LoadingOrError'
 import type { ReactElement } from 'react'
-import { useQuery } from '@tanstack/react-query'
 import { Link, Navigate, useParams } from 'react-router-dom'
 import { useMediaQuery } from 'utils'
 
@@ -14,8 +14,11 @@ export default function DetailsPage(): ReactElement {
 	const isTabletAndUp = useMediaQuery('(min-width: 600px)')
 	const { fruitName } = useParams()
 
-	const { isLoading, isError, error, data } = useQuery(['fruits'], getFruits)
-	if (isLoading || isError) {
+	const { isPending, isError, error, data } = useQuery({
+		queryKey: ['fruits'],
+		queryFn: getFruits
+	})
+	if (isPending || isError) {
 		return <LoadingOrError error={error as Error} />
 	}
 
diff --git a/src/pages/Gallery.tsx b/src/pages/Gallery.tsx
index aea98a04..a2dcaeb1 100644
--- a/src/pages/Gallery.tsx
+++ b/src/pages/Gallery.tsx
@@ -1,13 +1,16 @@
+import { useQuery } from '@tanstack/react-query'
 import getFruits from 'api/getFruits'
 import Fruit from 'components/Fruit'
 import Head from 'components/Head'
 import LoadingOrError from 'components/LoadingOrError'
 import type { ReactElement } from 'react'
-import { useQuery } from '@tanstack/react-query'
 
 export default function GalleryPage(): ReactElement {
-	const { isLoading, isError, error, data } = useQuery(['fruits'], getFruits)
-	if (isLoading || isError) {
+	const { isPending, isError, error, data } = useQuery({
+		queryKey: ['fruits'],
+		queryFn: getFruits
+	})
+	if (isPending || isError) {
 		return <LoadingOrError error={error as Error} />
 	}
 
diff --git a/src/testUtils.tsx b/src/testUtils.tsx
index c3cea2a0..d3b867ca 100644
--- a/src/testUtils.tsx
+++ b/src/testUtils.tsx
@@ -7,7 +7,7 @@ const queryClient = new QueryClient({
 	defaultOptions: {
 		queries: {
 			retry: false,
-			cacheTime: 0
+			gcTime: 0
 		}
 	}
 })