Revert "feat: upgrade tanstack query to v5 (#4360)"

This reverts commit ce1a603.

.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.49.1 install --with-deps
+          pnpx playwright@1.28.0 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.6.6
+          version: 8.9.0
 
       - 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.6.6
+          version: 8.9.0
       - 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": "5.51.1",
+    "@tanstack/react-query": "4.0.10",
     "blitz": "2.2.1",
     "flatted": "3.2.7",
     "next": "15.0.1",

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

@@ -1,14 +1,14 @@
 "use client"
 
-import {useQuery, useMutation, useSuspenseQuery} from "@blitzjs/rpc"
+import {useQuery, useMutation} 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] = useSuspenseQuery(getCurrentUser, null)
+  const [user] = useQuery(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/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/toolkit-app/next.config.js

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

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

@@ -0,0 +1,48 @@
+import { api } from "src/blitz-server"
+import GithubProvider from "next-auth/providers/github"
+import EmailProvider from "next-auth/providers/email"
+import { NextAuthAdapter, BlitzNextAuthOptions } from "@blitzjs/auth/next-auth"
+import db, { User } from "db"
+import { Role } from "types"
+
+// Has to be defined separately for `profile` to be correctly typed below
+const providers = [
+  GithubProvider({
+    clientId: process.env.GITHUB_CLIENT_ID as string,
+    clientSecret: process.env.GITHUB_CLIENT_SECRET as string,
+  }),
+  EmailProvider({
+    from: process.env.GITHUB_CLIENT_ID as string,
+    server: process.env.GITHUB_CLIENT_SECRET as string,
+  }),
+]
+
+export default api(
+  NextAuthAdapter({
+    successRedirectUrl: "/",
+    errorRedirectUrl: "/error",
+    providers,
+    callback: async (user, account, profile, session) => {
+      console.log("USER SIDE PROFILE_DATA", { user, account, profile })
+      let newUser: User
+      try {
+        newUser = await db.user.findFirstOrThrow({ where: { name: { equals: user.name } } })
+      } catch (e) {
+        newUser = await db.user.create({
+          data: {
+            email: user.email as string,
+            name: user.name as string,
+            role: "USER",
+          },
+        })
+      }
+      const publicData = {
+        userId: newUser.id,
+        role: newUser.role as Role,
+        source: "github",
+      }
+      await session.$create(publicData)
+      return { redirectUrl: "/" }
+    },
+  })
+)

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

@@ -44,6 +44,11 @@ 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/web/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/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/basic-features/typescript for more information.

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

@@ -0,0 +1,44 @@
+import {passportAuth} from "@blitzjs/auth"
+import {api} from "src/blitz-server"
+import db from "db"
+import {Strategy as TwitterStrategy} from "passport-twitter"
+
+export default api(
+  passportAuth({
+    successRedirectUrl: "/",
+    errorRedirectUrl: "/",
+    strategies: [
+      {
+        strategy: new TwitterStrategy(
+          {
+            consumerKey: process.env.TWITTER_CONSUMER_KEY as string,
+            consumerSecret: process.env.TWITTER_CONSUMER_SECRET as string,
+            accessTokenURL: "https://api.twitter.com/oauth/access_token",
+            callbackURL: "http://127.0.0.1:3000/api/auth/twitter/callback",
+            includeEmail: true,
+          },
+          async function (_token, _tokenSecret, profile, done) {
+            const email = profile.emails?.[0]?.value ?? "[email protected]"
+
+            const user = await db.user.upsert({
+              where: {email},
+              create: {
+                email,
+                name: profile.displayName,
+              },
+              update: {email},
+            })
+
+            const publicData = {
+              userId: user.id,
+              roles: [user.role],
+              source: "twitter",
+            }
+
+            done(undefined, {publicData})
+          },
+        ),
+      },
+    ],
+  }),
+)

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

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

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

@@ -1,4 +1,4 @@
-import {useSuspenseQuery} from "@blitzjs/rpc"
+import {useQuery} 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] = useSuspenseQuery(getUsers, {})
+  const [users] = useQuery(getUsers, {})
   return (
     <div>
       {users.map((u) => (

apps/web/src/pages/users.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>

integration-tests/auth-with-rpc/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/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/basic-features/typescript for more information.

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

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

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

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

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

@@ -1,12 +1,12 @@
-import {useMutation, useSuspenseQuery} from "@blitzjs/rpc"
+import {useMutation, useQuery} 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] = useSuspenseQuery(getAuthenticatedBasic, undefined)
+  const [result] = useQuery(getAuthenticatedBasic, undefined)
   const [logoutMutation] = useMutation(logout)
   return (
     <div>

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

@@ -1,5 +1,5 @@
 import {useRouter} from "next/router"
-import {useMutation, useSuspenseQuery} from "@blitzjs/rpc"
+import {useMutation, useQuery} 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] = useSuspenseQuery(getCurrentUser, null)
+  const [userId] = useQuery(getCurrentUser, null)
   const [loginMutation] = useMutation(login)
   const [logoutMutation] = useMutation(logout)
 

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

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

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

@@ -1,11 +1,11 @@
-import {useMutation, useSuspenseQuery} from "@blitzjs/rpc"
+import {useMutation, useQuery} 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] = useSuspenseQuery(getAuthenticatedBasic, undefined)
+  const [result] = useQuery(getAuthenticatedBasic, undefined)
   const [logoutMutation] = useMutation(logout)
   return (
     <div>

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

@@ -1,11 +1,11 @@
-import {useMutation, useSuspenseQuery} from "@blitzjs/rpc"
+import {useMutation, useQuery} 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] = useSuspenseQuery(getAuthenticatedBasic, undefined)
+  const [result] = useQuery(getAuthenticatedBasic, undefined)
   const [logoutMutation] = useMutation(logout)
   return (
     <div>

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

@@ -1,11 +1,11 @@
-import {useMutation, useSuspenseQuery} from "@blitzjs/rpc"
+import {useMutation, useQuery} 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] = useSuspenseQuery(getAuthenticatedBasic, undefined)
+  const [result] = useQuery(getAuthenticatedBasic, undefined)
   const [logoutMutation] = useMutation(logout)
   return (
     <div>