Update React Query to version 4 (#782)

* Update to React Query 4, pass 1 * Fix array key for React Query 4 * Fix logout bug after React Query 4 update * Update e2e tests
2024-11-27 14:55:20 +03:00 · 2022-10-25 11:41:03 +02:00 · 2022-10-25 11:41:03 +02:00 · 1b129188b0
commit 1b129188b0
parent bbb0f36879
44 changed files with 89 additions and 89 deletions
--- a/waspc/data/Generator/templates/react-app/src/actions/index.js
+++ b/waspc/data/Generator/templates/react-app/src/actions/index.js
@ -1,7 +1,7 @@
 import {
  useMutation,
  useQueryClient,
-} from 'react-query'
+} from '@tanstack/react-query'

 export { configureQueryClient } from '../queryClient'

@ -250,5 +250,5 @@ function getOptimisticUpdateDefinitionForSpecificItem(optimisticUpdateDefinition
 */
 function getRqQueryKeyFromSpecifier(querySpecifier) {
  const [queryFn, ...otherKeys] = querySpecifier
-  return [queryFn.queryCacheKey, ...otherKeys]
+  return [...queryFn.queryCacheKey, ...otherKeys]
 }
--- a/waspc/data/Generator/templates/react-app/src/auth/useAuth.js
+++ b/waspc/data/Generator/templates/react-app/src/auth/useAuth.js
@ -1,7 +1,7 @@
 import { useQuery } from '../queries'
 import api, { handleApiError } from '../api.js'

-export default function useAuth(queryFnArgs, config)  {
+export default function useAuth(queryFnArgs, config) {
  return useQuery(getMe, queryFnArgs, config)
 }
 async function getMe() {
@ -18,4 +18,4 @@ async function getMe() {
  }
 }

-getMe.queryCacheKey = 'auth/me'
+getMe.queryCacheKey = ['auth/me']
--- a/waspc/data/Generator/templates/react-app/src/index.js
+++ b/waspc/data/Generator/templates/react-app/src/index.js
@ -1,7 +1,7 @@
 {{={= =}=}}
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { QueryClientProvider } from 'react-query'
+import { QueryClientProvider } from '@tanstack/react-query'

 import router from './router'
 import { 
--- a/waspc/data/Generator/templates/react-app/src/operations/resources.js
+++ b/waspc/data/Generator/templates/react-app/src/operations/resources.js
@ -1,6 +1,6 @@
 import { queryClientInitialized } from '../queryClient'
 import { makeUpdateHandlersMap } from './updateHandlersMap'
-import { hashQueryKey } from 'react-query'
+import { hashQueryKey } from '@tanstack/react-query'

 // Map where key is resource name and value is Set
 // containing query ids of all the queries that use
@ -47,10 +47,10 @@ export async function removeQueries() {

 export async function invalidateAndRemoveQueries() {
  const queryClient = await queryClientInitialized
-  // If we don't invalidate the queries before removing them, Wasp will stay on
+  // If we don't reset the queries before removing them, Wasp will stay on
  // the same page. The user would have to manually refresh the page to "finish"
  // logging out.
-  queryClient.invalidateQueries()
+  queryClient.resetQueries()
  // If we don't remove the queries after invalidating them, the old query data
  // remains in the cache, casuing a potential privacy issue.
  queryClient.removeQueries()
--- a/waspc/data/Generator/templates/react-app/src/queries/core.js
+++ b/waspc/data/Generator/templates/react-app/src/queries/core.js
@ -13,7 +13,7 @@ export function createQuery(queryRoute, entitiesUsed) {
    )
  }

-  query.queryCacheKey = queryRoute
+  query.queryCacheKey = [queryRoute]
  addResourcesUsedByQuery(query.queryCacheKey, entitiesUsed)

  return query
--- a/waspc/data/Generator/templates/react-app/src/queries/index.js
+++ b/waspc/data/Generator/templates/react-app/src/queries/index.js
@ -1,4 +1,4 @@
-import { useQuery as rqUseQuery } from 'react-query'
+import { useQuery as rqUseQuery } from '@tanstack/react-query'
 export { configureQueryClient } from '../queryClient'

 export function useQuery(queryFn, queryFnArgs, options) {
@ -9,7 +9,7 @@ export function useQuery(queryFn, queryFnArgs, options) {
    throw new TypeError('queryFn needs to have queryCacheKey property defined.')
  }

-  const queryKey = queryFnArgs !== undefined ? [queryFn.queryCacheKey, queryFnArgs] : [queryFn.queryCacheKey]
+  const queryKey = queryFnArgs !== undefined ? [...queryFn.queryCacheKey, queryFnArgs] : queryFn.queryCacheKey
  return rqUseQuery({
    queryKey,
    queryFn: () => queryFn(queryKey, queryFnArgs),
--- a/waspc/data/Generator/templates/react-app/src/queryClient.js
+++ b/waspc/data/Generator/templates/react-app/src/queryClient.js
@ -1,4 +1,4 @@
-import { QueryClient } from 'react-query'
+import { QueryClient } from '@tanstack/react-query'

 const defaultQueryClientConfig = {}

--- a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/.waspchecksums
+++ b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/.waspchecksums
@ -207,7 +207,7 @@
            "file",
            "web-app/package.json"
        ],
-        "c213d464507348b7531d1cd4a58499f652abed111305684af7d748d2898aa993"
+        "dcfb537ea41be61f8c435716c1ecf6af3ca372aaabc7abc44c96a72e5eac2bf3"
    ],
    [
        [
@ -242,7 +242,7 @@
            "file",
            "web-app/src/actions/index.js"
        ],
-        "a9dbcffd4be75f7616cade56053e4060aac4ffd62b09195a4c84f4465a4dcaa7"
+        "7da2524a6920c46aada7e60e29fbe24d0e45e4bfcf7bf3044d16d11ab89a965e"
    ],
    [
        [
@ -291,7 +291,7 @@
            "file",
            "web-app/src/index.js"
        ],
-        "d0aeef2633b26de4c5d7064acc7c4533212cee8d3b36e91a3a785930621d02e4"
+        "2366be8f2650e21ddd4a75d6d3e9e59ee1d63800506056b1d40e72b1796db964"
    ],
    [
        [
@ -312,7 +312,7 @@
            "file",
            "web-app/src/operations/resources.js"
        ],
-        "4bbae164648c6442220dd1dfff76f11dce41dca85604e53f671db383fe1efd03"
+        "d815397e45efe773908b48de42f21ee22481396c318b21ea215ad6343d3f4170"
    ],
    [
        [
@ -326,21 +326,21 @@
            "file",
            "web-app/src/queries/core.js"
        ],
-        "705fcfe43f08cce6fbbc617a05cca5304c1398f311df19dfef6e52d421337215"
+        "2daf5b414722204281d65e954ce862a6fc586e8907b202800694909d23957c5e"
    ],
    [
        [
            "file",
            "web-app/src/queries/index.js"
        ],
-        "fcae00e6d2f60683509dcc06d37a0785e9e657ed11d0319859156feddbd547c0"
+        "8379699fa710f43d5be2b96f3a5c7c551a8d3d9db3ef0fea964502da00f36ffc"
    ],
    [
        [
            "file",
            "web-app/src/queryClient.js"
        ],
-        "3adf1c16b436ce5eb71f0ef7a4ec2bcd04e0dafbc2b43291c5050d1621cb764c"
+        "1739d8618286b4a2aa536bd3fcb754514c828ec896b69c7074e22f66c07e7b03"
    ],
    [
        [
--- a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/installedFullStackNpmDependencies.json
+++ b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/installedFullStackNpmDependencies.json
@ -1 +1 @@
-{"npmDepsForServer":{"dependencies":[{"name":"cookie-parser","version":"~1.4.6"},{"name":"cors","version":"^2.8.5"},{"name":"debug","version":"~4.3.4"},{"name":"express","version":"~4.18.1"},{"name":"morgan","version":"~1.10.0"},{"name":"@prisma/client","version":"3.15.2"},{"name":"jsonwebtoken","version":"^8.5.1"},{"name":"secure-password","version":"^4.0.0"},{"name":"dotenv","version":"16.0.2"},{"name":"helmet","version":"^6.0.0"},{"name":"patch-package","version":"^6.4.7"},{"name":"uuid","version":"^9.0.0"},{"name":"lodash","version":"^4.17.21"}],"devDependencies":[{"name":"nodemon","version":"^2.0.19"},{"name":"standard","version":"^17.0.0"},{"name":"prisma","version":"3.15.2"}]},"npmDepsForWebApp":{"dependencies":[{"name":"axios","version":"^0.27.2"},{"name":"react","version":"^17.0.2"},{"name":"react-dom","version":"^17.0.2"},{"name":"react-query","version":"^3.39.2"},{"name":"react-router-dom","version":"^5.3.3"},{"name":"react-scripts","version":"5.0.1"}],"devDependencies":[]}}
+{"npmDepsForServer":{"dependencies":[{"name":"cookie-parser","version":"~1.4.6"},{"name":"cors","version":"^2.8.5"},{"name":"debug","version":"~4.3.4"},{"name":"express","version":"~4.18.1"},{"name":"morgan","version":"~1.10.0"},{"name":"@prisma/client","version":"3.15.2"},{"name":"jsonwebtoken","version":"^8.5.1"},{"name":"secure-password","version":"^4.0.0"},{"name":"dotenv","version":"16.0.2"},{"name":"helmet","version":"^6.0.0"},{"name":"patch-package","version":"^6.4.7"},{"name":"uuid","version":"^9.0.0"},{"name":"lodash","version":"^4.17.21"}],"devDependencies":[{"name":"nodemon","version":"^2.0.19"},{"name":"standard","version":"^17.0.0"},{"name":"prisma","version":"3.15.2"}]},"npmDepsForWebApp":{"dependencies":[{"name":"axios","version":"^0.27.2"},{"name":"react","version":"^17.0.2"},{"name":"react-dom","version":"^17.0.2"},{"name":"@tanstack/react-query","version":"^4.13.0"},{"name":"react-router-dom","version":"^5.3.3"},{"name":"react-scripts","version":"5.0.1"}],"devDependencies":[]}}
--- a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/package.json
+++ b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/package.json
@ -12,10 +12,10 @@
    ]
  },
  "dependencies": {
+    "@tanstack/react-query": "^4.13.0",
    "axios": "^0.27.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
-    "react-query": "^3.39.2",
    "react-router-dom": "^5.3.3",
    "react-scripts": "5.0.1"
  },
--- a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/actions/index.js
+++ b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/actions/index.js
@ -1,7 +1,7 @@
 import {
  useMutation,
  useQueryClient,
-} from 'react-query'
+} from '@tanstack/react-query'

 export { configureQueryClient } from '../queryClient'

@ -250,5 +250,5 @@ function getOptimisticUpdateDefinitionForSpecificItem(optimisticUpdateDefinition
 */
 function getRqQueryKeyFromSpecifier(querySpecifier) {
  const [queryFn, ...otherKeys] = querySpecifier
-  return [queryFn.queryCacheKey, ...otherKeys]
+  return [...queryFn.queryCacheKey, ...otherKeys]
 }
--- a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/index.js
+++ b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/index.js
@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { QueryClientProvider } from 'react-query'
+import { QueryClientProvider } from '@tanstack/react-query'

 import router from './router'
 import { 
--- a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/operations/resources.js
+++ b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/operations/resources.js
@ -1,6 +1,6 @@
 import { queryClientInitialized } from '../queryClient'
 import { makeUpdateHandlersMap } from './updateHandlersMap'
-import { hashQueryKey } from 'react-query'
+import { hashQueryKey } from '@tanstack/react-query'

 // Map where key is resource name and value is Set
 // containing query ids of all the queries that use
@ -47,10 +47,10 @@ export async function removeQueries() {

 export async function invalidateAndRemoveQueries() {
  const queryClient = await queryClientInitialized
-  // If we don't invalidate the queries before removing them, Wasp will stay on
+  // If we don't reset the queries before removing them, Wasp will stay on
  // the same page. The user would have to manually refresh the page to "finish"
  // logging out.
-  queryClient.invalidateQueries()
+  queryClient.resetQueries()
  // If we don't remove the queries after invalidating them, the old query data
  // remains in the cache, casuing a potential privacy issue.
  queryClient.removeQueries()
--- a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/queries/core.js
+++ b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/queries/core.js
@ -13,7 +13,7 @@ export function createQuery(queryRoute, entitiesUsed) {
    )
  }

-  query.queryCacheKey = queryRoute
+  query.queryCacheKey = [queryRoute]
  addResourcesUsedByQuery(query.queryCacheKey, entitiesUsed)

  return query
--- a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/queries/index.js
+++ b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/queries/index.js
@ -1,4 +1,4 @@
-import { useQuery as rqUseQuery } from 'react-query'
+import { useQuery as rqUseQuery } from '@tanstack/react-query'
 export { configureQueryClient } from '../queryClient'

 export function useQuery(queryFn, queryFnArgs, options) {
@ -9,7 +9,7 @@ export function useQuery(queryFn, queryFnArgs, options) {
    throw new TypeError('queryFn needs to have queryCacheKey property defined.')
  }

-  const queryKey = queryFnArgs !== undefined ? [queryFn.queryCacheKey, queryFnArgs] : [queryFn.queryCacheKey]
+  const queryKey = queryFnArgs !== undefined ? [...queryFn.queryCacheKey, queryFnArgs] : queryFn.queryCacheKey
  return rqUseQuery({
    queryKey,
    queryFn: () => queryFn(queryKey, queryFnArgs),
--- a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/queryClient.js
+++ b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/queryClient.js
@ -1,4 +1,4 @@
-import { QueryClient } from 'react-query'
+import { QueryClient } from '@tanstack/react-query'

 const defaultQueryClientConfig = {}

--- a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/.waspchecksums
+++ b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/.waspchecksums
@ -207,7 +207,7 @@
            "file",
            "web-app/package.json"
        ],
-        "684c01c087596d85f5f22f19efd7d0306a7c27b642f87e56a647c108e0feef13"
+        "78971dc36bacf3ea3270a10315ff3bd36b75db0d244b82a62d15f366695fe97e"
    ],
    [
        [
@ -242,7 +242,7 @@
            "file",
            "web-app/src/actions/index.js"
        ],
-        "a9dbcffd4be75f7616cade56053e4060aac4ffd62b09195a4c84f4465a4dcaa7"
+        "7da2524a6920c46aada7e60e29fbe24d0e45e4bfcf7bf3044d16d11ab89a965e"
    ],
    [
        [
@ -291,7 +291,7 @@
            "file",
            "web-app/src/index.js"
        ],
-        "d0aeef2633b26de4c5d7064acc7c4533212cee8d3b36e91a3a785930621d02e4"
+        "2366be8f2650e21ddd4a75d6d3e9e59ee1d63800506056b1d40e72b1796db964"
    ],
    [
        [
@ -312,7 +312,7 @@
            "file",
            "web-app/src/operations/resources.js"
        ],
-        "4bbae164648c6442220dd1dfff76f11dce41dca85604e53f671db383fe1efd03"
+        "d815397e45efe773908b48de42f21ee22481396c318b21ea215ad6343d3f4170"
    ],
    [
        [
@ -326,21 +326,21 @@
            "file",
            "web-app/src/queries/core.js"
        ],
-        "705fcfe43f08cce6fbbc617a05cca5304c1398f311df19dfef6e52d421337215"
+        "2daf5b414722204281d65e954ce862a6fc586e8907b202800694909d23957c5e"
    ],
    [
        [
            "file",
            "web-app/src/queries/index.js"
        ],
-        "fcae00e6d2f60683509dcc06d37a0785e9e657ed11d0319859156feddbd547c0"
+        "8379699fa710f43d5be2b96f3a5c7c551a8d3d9db3ef0fea964502da00f36ffc"
    ],
    [
        [
            "file",
            "web-app/src/queryClient.js"
        ],
-        "3adf1c16b436ce5eb71f0ef7a4ec2bcd04e0dafbc2b43291c5050d1621cb764c"
+        "1739d8618286b4a2aa536bd3fcb754514c828ec896b69c7074e22f66c07e7b03"
    ],
    [
        [
--- a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/installedFullStackNpmDependencies.json
+++ b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/installedFullStackNpmDependencies.json
@ -1 +1 @@
-{"npmDepsForServer":{"dependencies":[{"name":"cookie-parser","version":"~1.4.6"},{"name":"cors","version":"^2.8.5"},{"name":"debug","version":"~4.3.4"},{"name":"express","version":"~4.18.1"},{"name":"morgan","version":"~1.10.0"},{"name":"@prisma/client","version":"3.15.2"},{"name":"jsonwebtoken","version":"^8.5.1"},{"name":"secure-password","version":"^4.0.0"},{"name":"dotenv","version":"16.0.2"},{"name":"helmet","version":"^6.0.0"},{"name":"patch-package","version":"^6.4.7"},{"name":"uuid","version":"^9.0.0"},{"name":"lodash","version":"^4.17.21"}],"devDependencies":[{"name":"nodemon","version":"^2.0.19"},{"name":"standard","version":"^17.0.0"},{"name":"prisma","version":"3.15.2"}]},"npmDepsForWebApp":{"dependencies":[{"name":"axios","version":"^0.27.2"},{"name":"react","version":"^17.0.2"},{"name":"react-dom","version":"^17.0.2"},{"name":"react-query","version":"^3.39.2"},{"name":"react-router-dom","version":"^5.3.3"},{"name":"react-scripts","version":"5.0.1"}],"devDependencies":[]}}
+{"npmDepsForServer":{"dependencies":[{"name":"cookie-parser","version":"~1.4.6"},{"name":"cors","version":"^2.8.5"},{"name":"debug","version":"~4.3.4"},{"name":"express","version":"~4.18.1"},{"name":"morgan","version":"~1.10.0"},{"name":"@prisma/client","version":"3.15.2"},{"name":"jsonwebtoken","version":"^8.5.1"},{"name":"secure-password","version":"^4.0.0"},{"name":"dotenv","version":"16.0.2"},{"name":"helmet","version":"^6.0.0"},{"name":"patch-package","version":"^6.4.7"},{"name":"uuid","version":"^9.0.0"},{"name":"lodash","version":"^4.17.21"}],"devDependencies":[{"name":"nodemon","version":"^2.0.19"},{"name":"standard","version":"^17.0.0"},{"name":"prisma","version":"3.15.2"}]},"npmDepsForWebApp":{"dependencies":[{"name":"axios","version":"^0.27.2"},{"name":"react","version":"^17.0.2"},{"name":"react-dom","version":"^17.0.2"},{"name":"@tanstack/react-query","version":"^4.13.0"},{"name":"react-router-dom","version":"^5.3.3"},{"name":"react-scripts","version":"5.0.1"}],"devDependencies":[]}}
--- a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/package.json
+++ b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/package.json
@ -12,10 +12,10 @@
    ]
  },
  "dependencies": {
+    "@tanstack/react-query": "^4.13.0",
    "axios": "^0.27.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
-    "react-query": "^3.39.2",
    "react-router-dom": "^5.3.3",
    "react-scripts": "5.0.1"
  },
--- a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/actions/index.js
+++ b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/actions/index.js
@ -1,7 +1,7 @@
 import {
  useMutation,
  useQueryClient,
-} from 'react-query'
+} from '@tanstack/react-query'

 export { configureQueryClient } from '../queryClient'

@ -250,5 +250,5 @@ function getOptimisticUpdateDefinitionForSpecificItem(optimisticUpdateDefinition
 */
 function getRqQueryKeyFromSpecifier(querySpecifier) {
  const [queryFn, ...otherKeys] = querySpecifier
-  return [queryFn.queryCacheKey, ...otherKeys]
+  return [...queryFn.queryCacheKey, ...otherKeys]
 }
--- a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/index.js
+++ b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/index.js
@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { QueryClientProvider } from 'react-query'
+import { QueryClientProvider } from '@tanstack/react-query'

 import router from './router'
 import { 
--- a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/operations/resources.js
+++ b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/operations/resources.js
@ -1,6 +1,6 @@
 import { queryClientInitialized } from '../queryClient'
 import { makeUpdateHandlersMap } from './updateHandlersMap'
-import { hashQueryKey } from 'react-query'
+import { hashQueryKey } from '@tanstack/react-query'

 // Map where key is resource name and value is Set
 // containing query ids of all the queries that use
@ -47,10 +47,10 @@ export async function removeQueries() {

 export async function invalidateAndRemoveQueries() {
  const queryClient = await queryClientInitialized
-  // If we don't invalidate the queries before removing them, Wasp will stay on
+  // If we don't reset the queries before removing them, Wasp will stay on
  // the same page. The user would have to manually refresh the page to "finish"
  // logging out.
-  queryClient.invalidateQueries()
+  queryClient.resetQueries()
  // If we don't remove the queries after invalidating them, the old query data
  // remains in the cache, casuing a potential privacy issue.
  queryClient.removeQueries()
--- a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/queries/core.js
+++ b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/queries/core.js
@ -13,7 +13,7 @@ export function createQuery(queryRoute, entitiesUsed) {
    )
  }

-  query.queryCacheKey = queryRoute
+  query.queryCacheKey = [queryRoute]
  addResourcesUsedByQuery(query.queryCacheKey, entitiesUsed)

  return query
--- a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/queries/index.js
+++ b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/queries/index.js
@ -1,4 +1,4 @@
-import { useQuery as rqUseQuery } from 'react-query'
+import { useQuery as rqUseQuery } from '@tanstack/react-query'
 export { configureQueryClient } from '../queryClient'

 export function useQuery(queryFn, queryFnArgs, options) {
@ -9,7 +9,7 @@ export function useQuery(queryFn, queryFnArgs, options) {
    throw new TypeError('queryFn needs to have queryCacheKey property defined.')
  }

-  const queryKey = queryFnArgs !== undefined ? [queryFn.queryCacheKey, queryFnArgs] : [queryFn.queryCacheKey]
+  const queryKey = queryFnArgs !== undefined ? [...queryFn.queryCacheKey, queryFnArgs] : queryFn.queryCacheKey
  return rqUseQuery({
    queryKey,
    queryFn: () => queryFn(queryKey, queryFnArgs),
--- a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/queryClient.js
+++ b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/queryClient.js
@ -1,4 +1,4 @@
-import { QueryClient } from 'react-query'
+import { QueryClient } from '@tanstack/react-query'

 const defaultQueryClientConfig = {}

--- a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/.waspchecksums
+++ b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/.waspchecksums
@ -221,7 +221,7 @@
            "file",
            "web-app/package.json"
        ],
-        "0f3787b9565d139c0175b137c2900c76eb94ca5538d2201fef5a9957acfe5c4a"
+        "87b09290ebeb7cb704d567860100954e1aa76d74353013d03ebb77d38e2beaea"
    ],
    [
        [
@ -256,7 +256,7 @@
            "file",
            "web-app/src/actions/index.js"
        ],
-        "a9dbcffd4be75f7616cade56053e4060aac4ffd62b09195a4c84f4465a4dcaa7"
+        "7da2524a6920c46aada7e60e29fbe24d0e45e4bfcf7bf3044d16d11ab89a965e"
    ],
    [
        [
@ -312,7 +312,7 @@
            "file",
            "web-app/src/index.js"
        ],
-        "d0aeef2633b26de4c5d7064acc7c4533212cee8d3b36e91a3a785930621d02e4"
+        "2366be8f2650e21ddd4a75d6d3e9e59ee1d63800506056b1d40e72b1796db964"
    ],
    [
        [
@ -333,7 +333,7 @@
            "file",
            "web-app/src/operations/resources.js"
        ],
-        "4bbae164648c6442220dd1dfff76f11dce41dca85604e53f671db383fe1efd03"
+        "d815397e45efe773908b48de42f21ee22481396c318b21ea215ad6343d3f4170"
    ],
    [
        [
@ -347,21 +347,21 @@
            "file",
            "web-app/src/queries/core.js"
        ],
-        "705fcfe43f08cce6fbbc617a05cca5304c1398f311df19dfef6e52d421337215"
+        "2daf5b414722204281d65e954ce862a6fc586e8907b202800694909d23957c5e"
    ],
    [
        [
            "file",
            "web-app/src/queries/index.js"
        ],
-        "fcae00e6d2f60683509dcc06d37a0785e9e657ed11d0319859156feddbd547c0"
+        "8379699fa710f43d5be2b96f3a5c7c551a8d3d9db3ef0fea964502da00f36ffc"
    ],
    [
        [
            "file",
            "web-app/src/queryClient.js"
        ],
-        "3adf1c16b436ce5eb71f0ef7a4ec2bcd04e0dafbc2b43291c5050d1621cb764c"
+        "1739d8618286b4a2aa536bd3fcb754514c828ec896b69c7074e22f66c07e7b03"
    ],
    [
        [
--- a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/installedFullStackNpmDependencies.json
+++ b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/installedFullStackNpmDependencies.json
@ -1 +1 @@
-{"npmDepsForServer":{"dependencies":[{"name":"cookie-parser","version":"~1.4.6"},{"name":"cors","version":"^2.8.5"},{"name":"debug","version":"~4.3.4"},{"name":"express","version":"~4.18.1"},{"name":"morgan","version":"~1.10.0"},{"name":"@prisma/client","version":"3.15.2"},{"name":"jsonwebtoken","version":"^8.5.1"},{"name":"secure-password","version":"^4.0.0"},{"name":"dotenv","version":"16.0.2"},{"name":"helmet","version":"^6.0.0"},{"name":"patch-package","version":"^6.4.7"},{"name":"uuid","version":"^9.0.0"},{"name":"lodash","version":"^4.17.21"},{"name":"pg-boss","version":"^8.0.0"}],"devDependencies":[{"name":"nodemon","version":"^2.0.19"},{"name":"standard","version":"^17.0.0"},{"name":"prisma","version":"3.15.2"}]},"npmDepsForWebApp":{"dependencies":[{"name":"axios","version":"^0.27.2"},{"name":"react","version":"^17.0.2"},{"name":"react-dom","version":"^17.0.2"},{"name":"react-query","version":"^3.39.2"},{"name":"react-router-dom","version":"^5.3.3"},{"name":"react-scripts","version":"5.0.1"}],"devDependencies":[]}}
+{"npmDepsForServer":{"dependencies":[{"name":"cookie-parser","version":"~1.4.6"},{"name":"cors","version":"^2.8.5"},{"name":"debug","version":"~4.3.4"},{"name":"express","version":"~4.18.1"},{"name":"morgan","version":"~1.10.0"},{"name":"@prisma/client","version":"3.15.2"},{"name":"jsonwebtoken","version":"^8.5.1"},{"name":"secure-password","version":"^4.0.0"},{"name":"dotenv","version":"16.0.2"},{"name":"helmet","version":"^6.0.0"},{"name":"patch-package","version":"^6.4.7"},{"name":"uuid","version":"^9.0.0"},{"name":"lodash","version":"^4.17.21"},{"name":"pg-boss","version":"^8.0.0"}],"devDependencies":[{"name":"nodemon","version":"^2.0.19"},{"name":"standard","version":"^17.0.0"},{"name":"prisma","version":"3.15.2"}]},"npmDepsForWebApp":{"dependencies":[{"name":"axios","version":"^0.27.2"},{"name":"react","version":"^17.0.2"},{"name":"react-dom","version":"^17.0.2"},{"name":"@tanstack/react-query","version":"^4.13.0"},{"name":"react-router-dom","version":"^5.3.3"},{"name":"react-scripts","version":"5.0.1"}],"devDependencies":[]}}
--- a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/package.json
+++ b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/package.json
@ -12,10 +12,10 @@
    ]
  },
  "dependencies": {
+    "@tanstack/react-query": "^4.13.0",
    "axios": "^0.27.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
-    "react-query": "^3.39.2",
    "react-router-dom": "^5.3.3",
    "react-scripts": "5.0.1"
  },
--- a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/actions/index.js
+++ b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/actions/index.js
@ -1,7 +1,7 @@
 import {
  useMutation,
  useQueryClient,
-} from 'react-query'
+} from '@tanstack/react-query'

 export { configureQueryClient } from '../queryClient'

@ -250,5 +250,5 @@ function getOptimisticUpdateDefinitionForSpecificItem(optimisticUpdateDefinition
 */
 function getRqQueryKeyFromSpecifier(querySpecifier) {
  const [queryFn, ...otherKeys] = querySpecifier
-  return [queryFn.queryCacheKey, ...otherKeys]
+  return [...queryFn.queryCacheKey, ...otherKeys]
 }
--- a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/index.js
+++ b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/index.js
@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { QueryClientProvider } from 'react-query'
+import { QueryClientProvider } from '@tanstack/react-query'

 import router from './router'
 import { 
--- a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/operations/resources.js
+++ b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/operations/resources.js
@ -1,6 +1,6 @@
 import { queryClientInitialized } from '../queryClient'
 import { makeUpdateHandlersMap } from './updateHandlersMap'
-import { hashQueryKey } from 'react-query'
+import { hashQueryKey } from '@tanstack/react-query'

 // Map where key is resource name and value is Set
 // containing query ids of all the queries that use
@ -47,10 +47,10 @@ export async function removeQueries() {

 export async function invalidateAndRemoveQueries() {
  const queryClient = await queryClientInitialized
-  // If we don't invalidate the queries before removing them, Wasp will stay on
+  // If we don't reset the queries before removing them, Wasp will stay on
  // the same page. The user would have to manually refresh the page to "finish"
  // logging out.
-  queryClient.invalidateQueries()
+  queryClient.resetQueries()
  // If we don't remove the queries after invalidating them, the old query data
  // remains in the cache, casuing a potential privacy issue.
  queryClient.removeQueries()
--- a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/queries/core.js
+++ b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/queries/core.js
@ -13,7 +13,7 @@ export function createQuery(queryRoute, entitiesUsed) {
    )
  }

-  query.queryCacheKey = queryRoute
+  query.queryCacheKey = [queryRoute]
  addResourcesUsedByQuery(query.queryCacheKey, entitiesUsed)

  return query
--- a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/queries/index.js
+++ b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/queries/index.js
@ -1,4 +1,4 @@
-import { useQuery as rqUseQuery } from 'react-query'
+import { useQuery as rqUseQuery } from '@tanstack/react-query'
 export { configureQueryClient } from '../queryClient'

 export function useQuery(queryFn, queryFnArgs, options) {
@ -9,7 +9,7 @@ export function useQuery(queryFn, queryFnArgs, options) {
    throw new TypeError('queryFn needs to have queryCacheKey property defined.')
  }

-  const queryKey = queryFnArgs !== undefined ? [queryFn.queryCacheKey, queryFnArgs] : [queryFn.queryCacheKey]
+  const queryKey = queryFnArgs !== undefined ? [...queryFn.queryCacheKey, queryFnArgs] : queryFn.queryCacheKey
  return rqUseQuery({
    queryKey,
    queryFn: () => queryFn(queryKey, queryFnArgs),
--- a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/queryClient.js
+++ b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/queryClient.js
@ -1,4 +1,4 @@
-import { QueryClient } from 'react-query'
+import { QueryClient } from '@tanstack/react-query'

 const defaultQueryClientConfig = {}

--- a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/.waspchecksums
+++ b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/.waspchecksums
@ -207,7 +207,7 @@
            "file",
            "web-app/package.json"
        ],
-        "f00f94a06d4af99969402a0c7ff862718543161e347f3bce90f2c7ffd0ac8391"
+        "757531fc8904820a41a00c5bd513d26cf3fbe89aac62d6a4fc8b85c58de80aae"
    ],
    [
        [
@ -242,7 +242,7 @@
            "file",
            "web-app/src/actions/index.js"
        ],
-        "a9dbcffd4be75f7616cade56053e4060aac4ffd62b09195a4c84f4465a4dcaa7"
+        "7da2524a6920c46aada7e60e29fbe24d0e45e4bfcf7bf3044d16d11ab89a965e"
    ],
    [
        [
@ -291,7 +291,7 @@
            "file",
            "web-app/src/index.js"
        ],
-        "d0aeef2633b26de4c5d7064acc7c4533212cee8d3b36e91a3a785930621d02e4"
+        "2366be8f2650e21ddd4a75d6d3e9e59ee1d63800506056b1d40e72b1796db964"
    ],
    [
        [
@ -312,7 +312,7 @@
            "file",
            "web-app/src/operations/resources.js"
        ],
-        "4bbae164648c6442220dd1dfff76f11dce41dca85604e53f671db383fe1efd03"
+        "d815397e45efe773908b48de42f21ee22481396c318b21ea215ad6343d3f4170"
    ],
    [
        [
@ -326,21 +326,21 @@
            "file",
            "web-app/src/queries/core.js"
        ],
-        "705fcfe43f08cce6fbbc617a05cca5304c1398f311df19dfef6e52d421337215"
+        "2daf5b414722204281d65e954ce862a6fc586e8907b202800694909d23957c5e"
    ],
    [
        [
            "file",
            "web-app/src/queries/index.js"
        ],
-        "fcae00e6d2f60683509dcc06d37a0785e9e657ed11d0319859156feddbd547c0"
+        "8379699fa710f43d5be2b96f3a5c7c551a8d3d9db3ef0fea964502da00f36ffc"
    ],
    [
        [
            "file",
            "web-app/src/queryClient.js"
        ],
-        "3adf1c16b436ce5eb71f0ef7a4ec2bcd04e0dafbc2b43291c5050d1621cb764c"
+        "1739d8618286b4a2aa536bd3fcb754514c828ec896b69c7074e22f66c07e7b03"
    ],
    [
        [
--- a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/installedFullStackNpmDependencies.json
+++ b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/installedFullStackNpmDependencies.json
@ -1 +1 @@
-{"npmDepsForServer":{"dependencies":[{"name":"cookie-parser","version":"~1.4.6"},{"name":"cors","version":"^2.8.5"},{"name":"debug","version":"~4.3.4"},{"name":"express","version":"~4.18.1"},{"name":"morgan","version":"~1.10.0"},{"name":"@prisma/client","version":"3.15.2"},{"name":"jsonwebtoken","version":"^8.5.1"},{"name":"secure-password","version":"^4.0.0"},{"name":"dotenv","version":"16.0.2"},{"name":"helmet","version":"^6.0.0"},{"name":"patch-package","version":"^6.4.7"},{"name":"uuid","version":"^9.0.0"},{"name":"lodash","version":"^4.17.21"}],"devDependencies":[{"name":"nodemon","version":"^2.0.19"},{"name":"standard","version":"^17.0.0"},{"name":"prisma","version":"3.15.2"}]},"npmDepsForWebApp":{"dependencies":[{"name":"axios","version":"^0.27.2"},{"name":"react","version":"^17.0.2"},{"name":"react-dom","version":"^17.0.2"},{"name":"react-query","version":"^3.39.2"},{"name":"react-router-dom","version":"^5.3.3"},{"name":"react-scripts","version":"5.0.1"}],"devDependencies":[]}}
+{"npmDepsForServer":{"dependencies":[{"name":"cookie-parser","version":"~1.4.6"},{"name":"cors","version":"^2.8.5"},{"name":"debug","version":"~4.3.4"},{"name":"express","version":"~4.18.1"},{"name":"morgan","version":"~1.10.0"},{"name":"@prisma/client","version":"3.15.2"},{"name":"jsonwebtoken","version":"^8.5.1"},{"name":"secure-password","version":"^4.0.0"},{"name":"dotenv","version":"16.0.2"},{"name":"helmet","version":"^6.0.0"},{"name":"patch-package","version":"^6.4.7"},{"name":"uuid","version":"^9.0.0"},{"name":"lodash","version":"^4.17.21"}],"devDependencies":[{"name":"nodemon","version":"^2.0.19"},{"name":"standard","version":"^17.0.0"},{"name":"prisma","version":"3.15.2"}]},"npmDepsForWebApp":{"dependencies":[{"name":"axios","version":"^0.27.2"},{"name":"react","version":"^17.0.2"},{"name":"react-dom","version":"^17.0.2"},{"name":"@tanstack/react-query","version":"^4.13.0"},{"name":"react-router-dom","version":"^5.3.3"},{"name":"react-scripts","version":"5.0.1"}],"devDependencies":[]}}
--- a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/package.json
+++ b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/package.json
@ -12,10 +12,10 @@
    ]
  },
  "dependencies": {
+    "@tanstack/react-query": "^4.13.0",
    "axios": "^0.27.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
-    "react-query": "^3.39.2",
    "react-router-dom": "^5.3.3",
    "react-scripts": "5.0.1"
  },
--- a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/actions/index.js
+++ b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/actions/index.js
@ -1,7 +1,7 @@
 import {
  useMutation,
  useQueryClient,
-} from 'react-query'
+} from '@tanstack/react-query'

 export { configureQueryClient } from '../queryClient'

@ -250,5 +250,5 @@ function getOptimisticUpdateDefinitionForSpecificItem(optimisticUpdateDefinition
 */
 function getRqQueryKeyFromSpecifier(querySpecifier) {
  const [queryFn, ...otherKeys] = querySpecifier
-  return [queryFn.queryCacheKey, ...otherKeys]
+  return [...queryFn.queryCacheKey, ...otherKeys]
 }
--- a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/index.js
+++ b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/index.js
@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { QueryClientProvider } from 'react-query'
+import { QueryClientProvider } from '@tanstack/react-query'

 import router from './router'
 import { 
--- a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/operations/resources.js
+++ b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/operations/resources.js
@ -1,6 +1,6 @@
 import { queryClientInitialized } from '../queryClient'
 import { makeUpdateHandlersMap } from './updateHandlersMap'
-import { hashQueryKey } from 'react-query'
+import { hashQueryKey } from '@tanstack/react-query'

 // Map where key is resource name and value is Set
 // containing query ids of all the queries that use
@ -47,10 +47,10 @@ export async function removeQueries() {

 export async function invalidateAndRemoveQueries() {
  const queryClient = await queryClientInitialized
-  // If we don't invalidate the queries before removing them, Wasp will stay on
+  // If we don't reset the queries before removing them, Wasp will stay on
  // the same page. The user would have to manually refresh the page to "finish"
  // logging out.
-  queryClient.invalidateQueries()
+  queryClient.resetQueries()
  // If we don't remove the queries after invalidating them, the old query data
  // remains in the cache, casuing a potential privacy issue.
  queryClient.removeQueries()
--- a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/queries/core.js
+++ b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/queries/core.js
@ -13,7 +13,7 @@ export function createQuery(queryRoute, entitiesUsed) {
    )
  }

-  query.queryCacheKey = queryRoute
+  query.queryCacheKey = [queryRoute]
  addResourcesUsedByQuery(query.queryCacheKey, entitiesUsed)

  return query
--- a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/queries/index.js
+++ b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/queries/index.js
@ -1,4 +1,4 @@
-import { useQuery as rqUseQuery } from 'react-query'
+import { useQuery as rqUseQuery } from '@tanstack/react-query'
 export { configureQueryClient } from '../queryClient'

 export function useQuery(queryFn, queryFnArgs, options) {
@ -9,7 +9,7 @@ export function useQuery(queryFn, queryFnArgs, options) {
    throw new TypeError('queryFn needs to have queryCacheKey property defined.')
  }

-  const queryKey = queryFnArgs !== undefined ? [queryFn.queryCacheKey, queryFnArgs] : [queryFn.queryCacheKey]
+  const queryKey = queryFnArgs !== undefined ? [...queryFn.queryCacheKey, queryFnArgs] : queryFn.queryCacheKey
  return rqUseQuery({
    queryKey,
    queryFn: () => queryFn(queryKey, queryFnArgs),
--- a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/queryClient.js
+++ b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/queryClient.js
@ -1,4 +1,4 @@
-import { QueryClient } from 'react-query'
+import { QueryClient } from '@tanstack/react-query'

 const defaultQueryClientConfig = {}

--- a/waspc/src/Wasp/Generator/WebAppGenerator.hs
+++ b/waspc/src/Wasp/Generator/WebAppGenerator.hs
@ -103,7 +103,7 @@ npmDepsForWasp _spec =
          [ ("axios", "^0.27.2"),
            ("react", "^17.0.2"),
            ("react-dom", "^17.0.2"),
-            ("react-query", "^3.39.2"),
+            ("@tanstack/react-query", "^4.13.0"),
            ("react-router-dom", "^5.3.3"),
            ("react-scripts", "5.0.1")
          ],