feat: upgrade tanstack query to v5 (#4360)

* upgrade syntax to v5

* blitz-next changes

* fix types and export new functions

* fix blitz suspense logic

* fix workflow

* changeset

* fix pnpm version

* fix pnpm lock file

* latest pnpm version

* fix

* fix pnpm lock file

* fixes

* commit

* commit

* pnpm lock update

* revert change

* fixes

* temp: remove patch

* lockfile

* chore: fix build and lint

* fix: auth-with-rpc tests

* qm test

* remaining tests

* fix rpc unit tests

* revrt

* another revert pnpm version change

* revert back to pnpm 8.6.6

* pnpm lock fix

* try fix

* fix

Author: siddhsuresh

.changeset/sweet-socks-juggle.md

@@ -0,0 +1,11 @@
+---
+"@blitzjs/next": major
+"@blitzjs/rpc": major
+"blitz": major
+"@blitzjs/auth": major
+"@blitzjs/codemod": major
+"@blitzjs/config": major
+"@blitzjs/generator": major
+---
+
+TODO: Upgrade @tanstack/react-query to v5.1.1

.github/workflows/main.yml

@@ -148,7 +148,7 @@ jobs:
       - name: Install playwright
         if: matrix.folder != 'next-13-app-dir' || matrix.os != 'windows-latest'
         run: |
-          pnpx playwright@1.28.0 install --with-deps
+          pnpx playwright@1.49.1 install --with-deps
         shell: bash
 
       - name: Build

.github/workflows/pr-release.yml

@@ -29,7 +29,7 @@ jobs:
         run: |
           pr="$(gh api repos/${{ github.repository }}/pulls/${{ github.event.issue.number }})"
           head_sha="$(echo "$pr" | jq -r .head.sha)"
-          
+
           echo "head_sha=$head_sha" >> $GITHUB_OUTPUT
 
       - uses: actions/checkout@v4
@@ -39,7 +39,7 @@ jobs:
       - name: Setup PNPM
         uses: pnpm/action-setup@646cdf48217256a3d0b80361c5a50727664284f2
         with:
-          version: 8.9.0
+          version: 8.6.6
 
       - name: Setup Node
         uses: actions/setup-node@v4

.github/workflows/release.yml

@@ -37,7 +37,7 @@ jobs:
       - name: Pre-publish
         uses: pnpm/action-setup@646cdf48217256a3d0b80361c5a50727664284f2
         with:
-          version: 8.9.0
+          version: 8.6.6
       - run: pnpm install
         env:
           PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1

apps/next13/package.json

@@ -19,7 +19,7 @@
     "@hookform/error-message": "2.0.0",
     "@hookform/resolvers": "2.9.10",
     "@prisma/client": "^4.5.0",
-    "@tanstack/react-query": "4.0.10",
+    "@tanstack/react-query": "5.51.1",
     "blitz": "2.2.1",
     "flatted": "3.2.7",
     "next": "15.0.1",

apps/next13/src/app/loading.tsx

@@ -0,0 +1,4 @@
+export default function Loading() {
+  // You can add any UI inside Loading, including a Skeleton.
+  return "Loading..."
+}

apps/next13/src/app/react-query.tsx

@@ -1,14 +1,14 @@
 "use client"
 
-import {useQuery, useMutation} from "@blitzjs/rpc"
+import {useQuery, useMutation, useSuspenseQuery} from "@blitzjs/rpc"
 import logout from "../auth/mutations/logout"
 import getCurrentUser from "../users/queries/getCurrentUser"
 import {useTransition} from "react"
 import {useRouter} from "next/navigation"
 
 export default function Test() {
   const router = useRouter()
-  const [user] = useQuery(getCurrentUser, null)
+  const [user] = useSuspenseQuery(getCurrentUser, null)
   const [isPending, startTransition] = useTransition()
   const [logoutMutation] = useMutation(logout)
   console.log(user)

apps/toolkit-app-passportjs/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

apps/toolkit-app/next.config.js

@@ -1,4 +1,3 @@
-const { withNextAuthAdapter } = require("@blitzjs/auth/next-auth")
 const { withBlitz } = require("@blitzjs/next")
 
 /**
@@ -11,4 +10,4 @@ const config = {
   },
 }
 
-module.exports = withBlitz(withNextAuthAdapter(config))
+module.exports = withBlitz(config)

apps/toolkit-app/src/pages/api/auth/[...nextauth].ts

@@ -44,11 +44,6 @@ const UserInfo = () => {
         <Link href={"/auth/login"} className={styles.loginButton}>
           <strong>Login</strong>
         </Link>
-        <Link href="/api/auth/github/login" passHref legacyBehavior>
-          <a className="button small">
-            <strong>Sign in with GitHub</strong>
-          </a>
-        </Link>
       </>
     )
   }

apps/toolkit-app/src/pages/index.tsx

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

apps/web/next-env.d.ts

@@ -1,4 +1,4 @@
-import {useInfiniteQuery} from "@blitzjs/rpc"
+import {useSuspenseInfiniteQuery} from "@blitzjs/rpc"
 import {gSSP} from "src/blitz-server"
 import getInfiniteUsers from "src/queries/getInfiniteUsers"
 
@@ -10,9 +10,14 @@ export const getServerSideProps = gSSP(async ({ctx}) => {
 })
 
 function PageWithPrefetchInfiniteQuery(props) {
-  const [usersPages] = useInfiniteQuery(getInfiniteUsers, (page = {take: 3, skip: 0}) => page, {
-    getNextPageParam: (lastPage) => lastPage.nextPage,
-  })
+  const [usersPages] = useSuspenseInfiniteQuery(
+    getInfiniteUsers,
+    (page = {take: 3, skip: 0}) => page,
+    {
+      getNextPageParam: (lastPage) => lastPage.nextPage,
+      initialPageParam: {take: 3, skip: 0},
+    },
+  )
   return (
     <div>
       {usersPages.map((usersPage) =>

apps/web/src/pages/api/auth/[...auth].ts

@@ -1,4 +1,4 @@
-import {useQuery} from "@blitzjs/rpc"
+import {useSuspenseQuery} from "@blitzjs/rpc"
 import {gSSP} from "src/blitz-server"
 import getUsers from "src/queries/getUsers"
 
@@ -10,7 +10,7 @@ export const getServerSideProps = gSSP(async ({ctx}) => {
 })
 
 function PageWithPrefetch(props) {
-  const [users] = useQuery(getUsers, {})
+  const [users] = useSuspenseQuery(getUsers, {})
   return (
     <div>
       {users.map((u) => (

apps/web/src/pages/page-with-inf-prefetch.tsx

@@ -7,7 +7,7 @@ function UsersPage() {
     <div>
       Users:
       <ul>
-        {users.map((user) => (
+        {users?.map((user) => (
           <li key={user.id}>
             {user.name} - {user.email}
           </li>

apps/web/src/pages/page-with-prefetch.tsx

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

apps/web/src/pages/users.tsx

@@ -49,7 +49,7 @@
     "husky": "8.0.2",
     "jsdom": "20.0.3",
     "lint-staged": "13.0.3",
-    "playwright": "1.28.0",
+    "playwright": "1.49.1",
     "prettier": "^2.7.1",
     "prettier-plugin-prisma": "4.4.0",
     "pretty-quick": "3.1.3",

integration-tests/auth-with-rpc/next-env.d.ts

@@ -1,13 +1,14 @@
-import {useMutation, useQuery} from "@blitzjs/rpc"
+import {QueryClient, useMutation, useQuery} from "@blitzjs/rpc"
 import logout from "../mutations/logout"
 import getAuthenticatedBasic from "../queries/getAuthenticatedBasic"
-import {Suspense} from "react"
 
 function Content() {
-  const [result] = useQuery(getAuthenticatedBasic, undefined)
+  const [result, {isLoading, isError, error}] = useQuery(getAuthenticatedBasic, undefined)
   const [logoutMutation] = useMutation(logout)
+  if (isError) throw error
+  if (isLoading || !result) return <div>Loading...</div>
   return (
-    <div>
+    <>
       <div id="content">{result}</div>
       <button
         id="logout"
@@ -17,16 +18,14 @@ function Content() {
       >
         logout
       </button>
-    </div>
+    </>
   )
 }
 
 function AuthenticatedQuery() {
   return (
     <div id="page">
-      <Suspense fallback={"Loading..."}>
-        <Content />
-      </Suspense>
+      <Content />
     </div>
   )
 }

integration-tests/auth-with-rpc/package.json

@@ -1,12 +1,12 @@
-import {useMutation, useQuery} from "@blitzjs/rpc"
+import {useMutation, useSuspenseQuery} from "@blitzjs/rpc"
 import {BlitzPage} from "@blitzjs/next"
 import AuthenticateRedirectLayout from "../layouts/AuthenticateRedirectLayout"
 import logout from "../mutations/logout"
 import getAuthenticatedBasic from "../queries/getAuthenticatedBasic"
 import {Suspense} from "react"
 
 function Content() {
-  const [result] = useQuery(getAuthenticatedBasic, undefined)
+  const [result] = useSuspenseQuery(getAuthenticatedBasic, undefined)
   const [logoutMutation] = useMutation(logout)
   return (
     <div>

integration-tests/auth-with-rpc/src/pages/authenticated-query.tsx

@@ -1,5 +1,5 @@
 import {useRouter} from "next/router"
-import {useMutation, useQuery} from "@blitzjs/rpc"
+import {useMutation, useSuspenseQuery} from "@blitzjs/rpc"
 import login from "../mutations/login"
 import logout from "../mutations/logout"
 import getCurrentUser from "../queries/getCurrentUser"
@@ -8,7 +8,7 @@ import {Suspense, useState} from "react"
 function Content() {
   const router = useRouter()
   const [error, setError] = useState(null)
-  const [userId] = useQuery(getCurrentUser, null)
+  const [userId] = useSuspenseQuery(getCurrentUser, null)
   const [loginMutation] = useMutation(login)
   const [logoutMutation] = useMutation(logout)
 

integration-tests/auth-with-rpc/src/pages/layout-authenticate-redirect.tsx

@@ -1,9 +1,9 @@
-import {useQuery} from "@blitzjs/rpc"
+import {useSuspenseQuery} from "@blitzjs/rpc"
 import getNoauthBasic from "../queries/getNoauthBasic"
 import {Suspense} from "react"
 
 function Content() {
-  const [result] = useQuery(getNoauthBasic, undefined)
+  const [result] = useSuspenseQuery(getNoauthBasic, undefined)
   return <div id="content">{result}</div>
 }
 

integration-tests/auth-with-rpc/src/pages/login.tsx

@@ -1,11 +1,11 @@
-import {useMutation, useQuery} from "@blitzjs/rpc"
+import {useMutation, useSuspenseQuery} from "@blitzjs/rpc"
 import {BlitzPage} from "@blitzjs/next"
 import logout from "../mutations/logout"
 import getAuthenticatedBasic from "../queries/getAuthenticatedBasic"
 import {Suspense} from "react"
 
 function Content() {
-  const [result] = useQuery(getAuthenticatedBasic, undefined)
+  const [result] = useSuspenseQuery(getAuthenticatedBasic, undefined)
   const [logoutMutation] = useMutation(logout)
   return (
     <div>

integration-tests/auth-with-rpc/src/pages/noauth-query.tsx

@@ -1,11 +1,11 @@
-import {useMutation, useQuery} from "@blitzjs/rpc"
+import {useMutation, useSuspenseQuery} from "@blitzjs/rpc"
 import {BlitzPage} from "@blitzjs/next"
 import logout from "../mutations/logout"
 import getAuthenticatedBasic from "../queries/getAuthenticatedBasic"
 import {Suspense} from "react"
 
 function Content() {
-  const [result] = useQuery(getAuthenticatedBasic, undefined)
+  const [result] = useSuspenseQuery(getAuthenticatedBasic, undefined)
   const [logoutMutation] = useMutation(logout)
   return (
     <div>

integration-tests/auth-with-rpc/src/pages/page-dot-authenticate-redirect.tsx

@@ -1,11 +1,11 @@
-import {useMutation, useQuery} from "@blitzjs/rpc"
+import {useMutation, useSuspenseQuery} from "@blitzjs/rpc"
 import {BlitzPage} from "@blitzjs/next"
 import logout from "../mutations/logout"
 import getAuthenticatedBasic from "../queries/getAuthenticatedBasic"
 import {Suspense} from "react"
 
 function Content() {
-  const [result] = useQuery(getAuthenticatedBasic, undefined)
+  const [result] = useSuspenseQuery(getAuthenticatedBasic, undefined)
   const [logoutMutation] = useMutation(logout)
   return (
     <div>