Update React Query to v3 (#554)

* Apply minor syntax fixes to templates * Fix Wasp react app warnings * Fix small bug in waspc todo app * Rearrange functions in RouterGenerator * Migrate react-query to v3 * Collapse config in react query * Update e2e tests after react-query migration * Rename function in RouterGenerator * Update job tests
2024-12-24 01:22:24 +03:00 · 2022-04-15 11:23:15 +02:00 · 2022-04-15 11:23:15 +02:00 · 50d806daa6
commit 50d806daa6
parent 210a43d781
54 changed files with 140 additions and 145 deletions
--- a/waspc/data/Generator/templates/react-app/src/auth/login.js
+++ b/waspc/data/Generator/templates/react-app/src/auth/login.js
@ -1,5 +1,5 @@
 import config from '../config.js'
-import queryCache from '../queryCache'
+import { queryClient } from '../queryClient'
 import api, { setAuthToken, handleApiError } from '../api.js'

 const login = async (email, password) => {
@ -12,7 +12,7 @@ const login = async (email, password) => {
    // TODO(matija): Currently we are removing all the queries, but we should remove only
    // non-public, user-dependent queries - public queries are expected not to change in respect
    // to the currently logged in user.
-    queryCache.removeQueries()
+    queryClient.removeQueries()

  } catch (error) {
    handleApiError(error)
--- a/waspc/data/Generator/templates/react-app/src/auth/logout.js
+++ b/waspc/data/Generator/templates/react-app/src/auth/logout.js
@ -1,16 +1,16 @@
 import { clearLocalStorage } from '../api.js'
-import queryCache from '../queryCache'
+import { queryClient } from '../queryClient'

 const logout = () => {
  clearLocalStorage()

  // TODO(matija): We are currently invalidating all the queries, but we should invalidate only the
  // non-public, user-dependent ones.
-  queryCache.invalidateQueries()
+  queryClient.invalidateQueries()

  // TODO(matija): We are currently clearing all the queries, but we should clear only the
  // non-public, user-dependent ones.
-  queryCache.clear()
+  queryClient.clear()
 }

 export default logout
--- a/waspc/data/Generator/templates/react-app/src/auth/pages/createAuthRequiredPage.js
+++ b/waspc/data/Generator/templates/react-app/src/auth/pages/createAuthRequiredPage.js
@ -1,13 +1,13 @@
 {{={= =}=}}
 import React from 'react'

-import { Redirect, Link } from 'react-router-dom'
+import { Redirect } from 'react-router-dom'
 import useAuth from '../../auth/useAuth.js'


 const createAuthRequiredPage = (Page) => {
  return (props) => {
-    const { data: user, isError, isSuccess, isLoading, isFetching, status } = useAuth()
+    const { data: user, isError, isSuccess, isLoading } = useAuth()

    if (isSuccess) {
      if (user) {
--- a/waspc/data/Generator/templates/react-app/src/auth/useAuth.js
+++ b/waspc/data/Generator/templates/react-app/src/auth/useAuth.js
@ -1,6 +1,6 @@
 import { useQuery } from '../queries'
 import config from '../config.js'
-import api, { setAuthToken, handleApiError } from '../api.js'
+import api, { handleApiError } from '../api.js'

 const getMe = async () => {
  try {
--- a/waspc/data/Generator/templates/react-app/src/index.js
+++ b/waspc/data/Generator/templates/react-app/src/index.js
@ -1,18 +1,18 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { ReactQueryCacheProvider } from 'react-query'
+import { QueryClientProvider } from 'react-query'

 import router from './router'
-import queryCache from './queryCache'
+import { queryClient } from './queryClient'
 import * as serviceWorker from './serviceWorker'

 import './index.css'


 ReactDOM.render(
-  <ReactQueryCacheProvider queryCache={queryCache}>
+  <QueryClientProvider client={queryClient}>
    { router }
-  </ReactQueryCacheProvider>,
+  </QueryClientProvider>,
  document.getElementById('root')
 )

--- a/waspc/data/Generator/templates/react-app/src/operations/index.js
+++ b/waspc/data/Generator/templates/react-app/src/operations/index.js
@ -1,7 +1,7 @@
 import api, { handleApiError } from '../api.js'
 import config from '../config.js'

-export const callOperation = async (operationRoute, args) => {
+export async function callOperation(operationRoute, args) {
  try {
    const response = await api.post(config.apiUrl + '/' + operationRoute, args)
    return response.data
--- a/waspc/data/Generator/templates/react-app/src/operations/resources.js
+++ b/waspc/data/Generator/templates/react-app/src/operations/resources.js
@ -1,5 +1,5 @@
 {{= {= =} =}}
-import queryCache from '../queryCache'
+import { queryClient } from '../queryClient'


 // Map where key is resource name and value is Set
@ -42,6 +42,6 @@ export const invalidateQueriesUsing = (resources) => {
    getQueriesUsingResource(resource).forEach(key => queryCacheKeysToInvalidate.add(key))
  }
  for (const queryCacheKey of queryCacheKeysToInvalidate) {
-    queryCache.invalidateQueries(queryCacheKey)
+    queryClient.invalidateQueries(queryCacheKey)
  }
 }
--- a/waspc/data/Generator/templates/react-app/src/queries/_query.js
+++ b/waspc/data/Generator/templates/react-app/src/queries/_query.js
@ -2,14 +2,14 @@
 import { callOperation } from '../operations'
 import * as resources from '../operations/resources'

-const {= queryFnName =} = async (args) => {
-  return await callOperation('{= queryRoute =}', args)
+function {= queryFnName =}(args) {
+  return callOperation('{= queryRoute =}', args)
 }

 const queryCacheKey = '{= queryRoute =}'
 {= queryFnName =}.queryCacheKey = queryCacheKey

-export const entitiesUsed = {=& entitiesArray =}
+const entitiesUsed = {=& entitiesArray =}
 resources.addResourcesUsedByQuery(queryCacheKey, entitiesUsed)

 export default {= queryFnName =}
--- a/waspc/data/Generator/templates/react-app/src/queries/index.js
+++ b/waspc/data/Generator/templates/react-app/src/queries/index.js
@ -1,18 +1,16 @@
 import { useQuery as rqUseQuery } from 'react-query'

-export const useQuery = (queryFn, queryFnArgs, config) => {
+export function useQuery(queryFn, queryFnArgs, config) {
  if (typeof queryFn !== 'function') {
-    throw new Error('useQuery requires queryFn to be a function.')
+    throw new TypeError('useQuery requires queryFn to be a function.')
  }
  if (!queryFn.queryCacheKey) {
-    throw new Error('queryFn needs to have queryCacheKey property defined.')
+    throw new TypeError('queryFn needs to have queryCacheKey property defined.')
  }

-  const rqResult = rqUseQuery({
+  return rqUseQuery({
    queryKey: [queryFn.queryCacheKey, queryFnArgs],
-    queryFn: (_key, args) => queryFn(args),
-    config
+    queryFn: () => queryFn(queryFnArgs),
+    ...config
  })
-
-  return rqResult
 }
--- a/waspc/data/Generator/templates/react-app/src/queryCache.js
+++ b/waspc/data/Generator/templates/react-app/src/queryCache.js
@ -1,3 +0,0 @@
-import { QueryCache } from 'react-query'
-
-export default new QueryCache()
--- a/waspc/data/Generator/templates/react-app/src/queryClient.js
+++ b/waspc/data/Generator/templates/react-app/src/queryClient.js
@ -0,0 +1,3 @@
+import { QueryClient } from 'react-query'
+
+export const queryClient = new QueryClient()
--- a/waspc/e2e-test/test-outputs/waspBuild-golden/files.manifest
+++ b/waspc/e2e-test/test-outputs/waspBuild-golden/files.manifest
@ -39,7 +39,7 @@ waspBuild/.wasp/build/web-app/src/logo.png
 waspBuild/.wasp/build/web-app/src/operations/index.js
 waspBuild/.wasp/build/web-app/src/operations/resources.js
 waspBuild/.wasp/build/web-app/src/queries/index.js
-waspBuild/.wasp/build/web-app/src/queryCache.js
+waspBuild/.wasp/build/web-app/src/queryClient.js
 waspBuild/.wasp/build/web-app/src/router.js
 waspBuild/.wasp/build/web-app/src/serviceWorker.js
 waspBuild/.wasp/build/web-app/src/utils.js
--- a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/.waspchecksums
+++ b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/.waspchecksums
@ -186,7 +186,7 @@
            "file",
            "web-app/package.json"
        ],
-        "8eea200335b3bb7ff54099e4aeb5ae2b537ad32d9f5e900aa5eb024dfce7381a"
+        "a22f559d8f4b28831ae19500a0829a32c8d1b69a47b9f849d62401283c4d3b34"
    ],
    [
        [
@ -256,7 +256,7 @@
            "file",
            "web-app/src/index.js"
        ],
-        "4f5af477f3045d3f834e84962ca08a0f8f949e6979145224ef3f61f4a84cd540"
+        "030bfc5cd200d732eaca398b298057c148c3f9d9b8a3e7a24918db438b5d1861"
    ],
    [
        [
@ -270,28 +270,28 @@
            "file",
            "web-app/src/operations/index.js"
        ],
-        "ca58bfb900f5379ee84b42337c11a59cd45b6c62a5018328e5245af5943b32bb"
+        "4eea48fce8a16a41ee86925955c197752d91e8e067d47bcc795c32b450d1c81a"
    ],
    [
        [
            "file",
            "web-app/src/operations/resources.js"
        ],
-        "2057b9c585be6873cf51f4e5229b6f1e9c2ef4f84020edd7580deae1b04536b3"
+        "35f14c763398a5acdd12deea700cc124bca6393553696f2764c2ebfab0609ee1"
    ],
    [
        [
            "file",
            "web-app/src/queries/index.js"
        ],
-        "8cd5049ed1d3e4d00243c480f112a600ac830533c95772512101d4d50866ee25"
+        "39a659c6ed82cbbc38b834b607e049646e0d70e104d01317830f225629a5f14c"
    ],
    [
        [
            "file",
-            "web-app/src/queryCache.js"
+            "web-app/src/queryClient.js"
        ],
-        "c813d33478963f3cde701024ee45c4a14ae6b3a4e87cd0705a19ed72d0a2b187"
+        "f53c6e82b0e1b13dd2c2fff423460c88cd1c331e154867edeb7cd5f98c3586e4"
    ],
    [
        [
--- 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.4"},{"name":"cors","version":"^2.8.5"},{"name":"debug","version":"~2.6.9"},{"name":"express","version":"~4.16.1"},{"name":"morgan","version":"~1.9.1"},{"name":"@prisma/client","version":"3.9.1"},{"name":"jsonwebtoken","version":"^8.5.1"},{"name":"secure-password","version":"^4.0.0"},{"name":"dotenv","version":"8.2.0"},{"name":"helmet","version":"^4.6.0"}],"devDependencies":[{"name":"nodemon","version":"^2.0.4"},{"name":"standard","version":"^14.3.4"},{"name":"prisma","version":"3.9.1"}]},"npmDepsForWebApp":{"dependencies":[{"name":"axios","version":"^0.21.1"},{"name":"lodash","version":"^4.17.15"},{"name":"react","version":"^16.12.0"},{"name":"react-dom","version":"^16.12.0"},{"name":"react-query","version":"^2.14.1"},{"name":"react-router-dom","version":"^5.1.2"},{"name":"react-scripts","version":"4.0.3"},{"name":"uuid","version":"^3.4.0"}],"devDependencies":[]}}
+{"npmDepsForServer":{"dependencies":[{"name":"cookie-parser","version":"~1.4.4"},{"name":"cors","version":"^2.8.5"},{"name":"debug","version":"~2.6.9"},{"name":"express","version":"~4.16.1"},{"name":"morgan","version":"~1.9.1"},{"name":"@prisma/client","version":"3.9.1"},{"name":"jsonwebtoken","version":"^8.5.1"},{"name":"secure-password","version":"^4.0.0"},{"name":"dotenv","version":"8.2.0"},{"name":"helmet","version":"^4.6.0"}],"devDependencies":[{"name":"nodemon","version":"^2.0.4"},{"name":"standard","version":"^14.3.4"},{"name":"prisma","version":"3.9.1"}]},"npmDepsForWebApp":{"dependencies":[{"name":"axios","version":"^0.21.1"},{"name":"lodash","version":"^4.17.15"},{"name":"react","version":"^16.12.0"},{"name":"react-dom","version":"^16.12.0"},{"name":"react-query","version":"^3.34.19"},{"name":"react-router-dom","version":"^5.1.2"},{"name":"react-scripts","version":"4.0.3"},{"name":"uuid","version":"^3.4.0"}],"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
@ -16,7 +16,7 @@
    "lodash": "^4.17.15",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
-    "react-query": "^2.14.1",
+    "react-query": "^3.34.19",
    "react-router-dom": "^5.1.2",
    "react-scripts": "4.0.3",
    "uuid": "^3.4.0"
--- 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,18 +1,18 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { ReactQueryCacheProvider } from 'react-query'
+import { QueryClientProvider } from 'react-query'

 import router from './router'
-import queryCache from './queryCache'
+import { queryClient } from './queryClient'
 import * as serviceWorker from './serviceWorker'

 import './index.css'


 ReactDOM.render(
-  <ReactQueryCacheProvider queryCache={queryCache}>
+  <QueryClientProvider client={queryClient}>
    { router }
-  </ReactQueryCacheProvider>,
+  </QueryClientProvider>,
  document.getElementById('root')
 )

--- a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/operations/index.js
+++ b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/operations/index.js
@ -1,7 +1,7 @@
 import api, { handleApiError } from '../api.js'
 import config from '../config.js'

-export const callOperation = async (operationRoute, args) => {
+export async function callOperation(operationRoute, args) {
  try {
    const response = await api.post(config.apiUrl + '/' + operationRoute, args)
    return response.data
--- 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,4 +1,4 @@
-import queryCache from '../queryCache'
+import { queryClient } from '../queryClient'


 // Map where key is resource name and value is Set
@ -41,6 +41,6 @@ export const invalidateQueriesUsing = (resources) => {
    getQueriesUsingResource(resource).forEach(key => queryCacheKeysToInvalidate.add(key))
  }
  for (const queryCacheKey of queryCacheKeysToInvalidate) {
-    queryCache.invalidateQueries(queryCacheKey)
+    queryClient.invalidateQueries(queryCacheKey)
  }
 }
--- 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,18 +1,16 @@
 import { useQuery as rqUseQuery } from 'react-query'

-export const useQuery = (queryFn, queryFnArgs, config) => {
+export function useQuery(queryFn, queryFnArgs, config) {
  if (typeof queryFn !== 'function') {
-    throw new Error('useQuery requires queryFn to be a function.')
+    throw new TypeError('useQuery requires queryFn to be a function.')
  }
  if (!queryFn.queryCacheKey) {
-    throw new Error('queryFn needs to have queryCacheKey property defined.')
+    throw new TypeError('queryFn needs to have queryCacheKey property defined.')
  }

-  const rqResult = rqUseQuery({
+  return rqUseQuery({
    queryKey: [queryFn.queryCacheKey, queryFnArgs],
-    queryFn: (_key, args) => queryFn(args),
-    config
+    queryFn: () => queryFn(queryFnArgs),
+    ...config
  })
-
-  return rqResult
 }
--- a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/queryCache.js
+++ b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/queryCache.js
@ -1,3 +0,0 @@
-import { QueryCache } from 'react-query'
-
-export default new QueryCache()
--- 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
@ -0,0 +1,3 @@
+import { QueryClient } from 'react-query'
+
+export const queryClient = new QueryClient()
--- a/waspc/e2e-test/test-outputs/waspCompile-golden/files.manifest
+++ b/waspc/e2e-test/test-outputs/waspCompile-golden/files.manifest
@ -39,7 +39,7 @@ waspCompile/.wasp/out/web-app/src/logo.png
 waspCompile/.wasp/out/web-app/src/operations/index.js
 waspCompile/.wasp/out/web-app/src/operations/resources.js
 waspCompile/.wasp/out/web-app/src/queries/index.js
-waspCompile/.wasp/out/web-app/src/queryCache.js
+waspCompile/.wasp/out/web-app/src/queryClient.js
 waspCompile/.wasp/out/web-app/src/router.js
 waspCompile/.wasp/out/web-app/src/serviceWorker.js
 waspCompile/.wasp/out/web-app/src/utils.js
--- a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/.waspchecksums
+++ b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/.waspchecksums
@ -186,7 +186,7 @@
            "file",
            "web-app/package.json"
        ],
-        "43cf96c8649c7facb568a54090c15cf1ed37f334be16e3799ddc8908957660d5"
+        "af943587a56941a0aebc4fd60dacffca05559c904a7d5a754d753ee147bf2af0"
    ],
    [
        [
@ -256,7 +256,7 @@
            "file",
            "web-app/src/index.js"
        ],
-        "4f5af477f3045d3f834e84962ca08a0f8f949e6979145224ef3f61f4a84cd540"
+        "030bfc5cd200d732eaca398b298057c148c3f9d9b8a3e7a24918db438b5d1861"
    ],
    [
        [
@ -270,28 +270,28 @@
            "file",
            "web-app/src/operations/index.js"
        ],
-        "ca58bfb900f5379ee84b42337c11a59cd45b6c62a5018328e5245af5943b32bb"
+        "4eea48fce8a16a41ee86925955c197752d91e8e067d47bcc795c32b450d1c81a"
    ],
    [
        [
            "file",
            "web-app/src/operations/resources.js"
        ],
-        "2057b9c585be6873cf51f4e5229b6f1e9c2ef4f84020edd7580deae1b04536b3"
+        "35f14c763398a5acdd12deea700cc124bca6393553696f2764c2ebfab0609ee1"
    ],
    [
        [
            "file",
            "web-app/src/queries/index.js"
        ],
-        "8cd5049ed1d3e4d00243c480f112a600ac830533c95772512101d4d50866ee25"
+        "39a659c6ed82cbbc38b834b607e049646e0d70e104d01317830f225629a5f14c"
    ],
    [
        [
            "file",
-            "web-app/src/queryCache.js"
+            "web-app/src/queryClient.js"
        ],
-        "c813d33478963f3cde701024ee45c4a14ae6b3a4e87cd0705a19ed72d0a2b187"
+        "f53c6e82b0e1b13dd2c2fff423460c88cd1c331e154867edeb7cd5f98c3586e4"
    ],
    [
        [
--- 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.4"},{"name":"cors","version":"^2.8.5"},{"name":"debug","version":"~2.6.9"},{"name":"express","version":"~4.16.1"},{"name":"morgan","version":"~1.9.1"},{"name":"@prisma/client","version":"3.9.1"},{"name":"jsonwebtoken","version":"^8.5.1"},{"name":"secure-password","version":"^4.0.0"},{"name":"dotenv","version":"8.2.0"},{"name":"helmet","version":"^4.6.0"}],"devDependencies":[{"name":"nodemon","version":"^2.0.4"},{"name":"standard","version":"^14.3.4"},{"name":"prisma","version":"3.9.1"}]},"npmDepsForWebApp":{"dependencies":[{"name":"axios","version":"^0.21.1"},{"name":"lodash","version":"^4.17.15"},{"name":"react","version":"^16.12.0"},{"name":"react-dom","version":"^16.12.0"},{"name":"react-query","version":"^2.14.1"},{"name":"react-router-dom","version":"^5.1.2"},{"name":"react-scripts","version":"4.0.3"},{"name":"uuid","version":"^3.4.0"}],"devDependencies":[]}}
+{"npmDepsForServer":{"dependencies":[{"name":"cookie-parser","version":"~1.4.4"},{"name":"cors","version":"^2.8.5"},{"name":"debug","version":"~2.6.9"},{"name":"express","version":"~4.16.1"},{"name":"morgan","version":"~1.9.1"},{"name":"@prisma/client","version":"3.9.1"},{"name":"jsonwebtoken","version":"^8.5.1"},{"name":"secure-password","version":"^4.0.0"},{"name":"dotenv","version":"8.2.0"},{"name":"helmet","version":"^4.6.0"}],"devDependencies":[{"name":"nodemon","version":"^2.0.4"},{"name":"standard","version":"^14.3.4"},{"name":"prisma","version":"3.9.1"}]},"npmDepsForWebApp":{"dependencies":[{"name":"axios","version":"^0.21.1"},{"name":"lodash","version":"^4.17.15"},{"name":"react","version":"^16.12.0"},{"name":"react-dom","version":"^16.12.0"},{"name":"react-query","version":"^3.34.19"},{"name":"react-router-dom","version":"^5.1.2"},{"name":"react-scripts","version":"4.0.3"},{"name":"uuid","version":"^3.4.0"}],"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
@ -16,7 +16,7 @@
    "lodash": "^4.17.15",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
-    "react-query": "^2.14.1",
+    "react-query": "^3.34.19",
    "react-router-dom": "^5.1.2",
    "react-scripts": "4.0.3",
    "uuid": "^3.4.0"
--- 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,18 +1,18 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { ReactQueryCacheProvider } from 'react-query'
+import { QueryClientProvider } from 'react-query'

 import router from './router'
-import queryCache from './queryCache'
+import { queryClient } from './queryClient'
 import * as serviceWorker from './serviceWorker'

 import './index.css'


 ReactDOM.render(
-  <ReactQueryCacheProvider queryCache={queryCache}>
+  <QueryClientProvider client={queryClient}>
    { router }
-  </ReactQueryCacheProvider>,
+  </QueryClientProvider>,
  document.getElementById('root')
 )

--- a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/operations/index.js
+++ b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/operations/index.js
@ -1,7 +1,7 @@
 import api, { handleApiError } from '../api.js'
 import config from '../config.js'

-export const callOperation = async (operationRoute, args) => {
+export async function callOperation(operationRoute, args) {
  try {
    const response = await api.post(config.apiUrl + '/' + operationRoute, args)
    return response.data
--- 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,4 +1,4 @@
-import queryCache from '../queryCache'
+import { queryClient } from '../queryClient'


 // Map where key is resource name and value is Set
@ -41,6 +41,6 @@ export const invalidateQueriesUsing = (resources) => {
    getQueriesUsingResource(resource).forEach(key => queryCacheKeysToInvalidate.add(key))
  }
  for (const queryCacheKey of queryCacheKeysToInvalidate) {
-    queryCache.invalidateQueries(queryCacheKey)
+    queryClient.invalidateQueries(queryCacheKey)
  }
 }
--- 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,18 +1,16 @@
 import { useQuery as rqUseQuery } from 'react-query'

-export const useQuery = (queryFn, queryFnArgs, config) => {
+export function useQuery(queryFn, queryFnArgs, config) {
  if (typeof queryFn !== 'function') {
-    throw new Error('useQuery requires queryFn to be a function.')
+    throw new TypeError('useQuery requires queryFn to be a function.')
  }
  if (!queryFn.queryCacheKey) {
-    throw new Error('queryFn needs to have queryCacheKey property defined.')
+    throw new TypeError('queryFn needs to have queryCacheKey property defined.')
  }

-  const rqResult = rqUseQuery({
+  return rqUseQuery({
    queryKey: [queryFn.queryCacheKey, queryFnArgs],
-    queryFn: (_key, args) => queryFn(args),
-    config
+    queryFn: () => queryFn(queryFnArgs),
+    ...config
  })
-
-  return rqResult
 }
--- a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/queryCache.js
+++ b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/queryCache.js
@ -1,3 +0,0 @@
-import { QueryCache } from 'react-query'
-
-export default new QueryCache()
--- 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
@ -0,0 +1,3 @@
+import { QueryClient } from 'react-query'
+
+export const queryClient = new QueryClient()
--- a/waspc/e2e-test/test-outputs/waspJob-golden/files.manifest
+++ b/waspc/e2e-test/test-outputs/waspJob-golden/files.manifest
@ -42,7 +42,7 @@ waspJob/.wasp/out/web-app/src/logo.png
 waspJob/.wasp/out/web-app/src/operations/index.js
 waspJob/.wasp/out/web-app/src/operations/resources.js
 waspJob/.wasp/out/web-app/src/queries/index.js
-waspJob/.wasp/out/web-app/src/queryCache.js
+waspJob/.wasp/out/web-app/src/queryClient.js
 waspJob/.wasp/out/web-app/src/router.js
 waspJob/.wasp/out/web-app/src/serviceWorker.js
 waspJob/.wasp/out/web-app/src/utils.js
--- a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/.waspchecksums
+++ b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/.waspchecksums
@ -200,7 +200,7 @@
            "file",
            "web-app/package.json"
        ],
-        "ebc8f016dff0309a355aa0aefea01e1f4b8a18261fac2dfddd2bccb430b82667"
+        "073c6575f20e9cd4f7421d468452de45e54a731859dd4ac9c8949cb762b28e4a"
    ],
    [
        [
@ -277,7 +277,7 @@
            "file",
            "web-app/src/index.js"
        ],
-        "4f5af477f3045d3f834e84962ca08a0f8f949e6979145224ef3f61f4a84cd540"
+        "030bfc5cd200d732eaca398b298057c148c3f9d9b8a3e7a24918db438b5d1861"
    ],
    [
        [
@ -291,28 +291,28 @@
            "file",
            "web-app/src/operations/index.js"
        ],
-        "ca58bfb900f5379ee84b42337c11a59cd45b6c62a5018328e5245af5943b32bb"
+        "4eea48fce8a16a41ee86925955c197752d91e8e067d47bcc795c32b450d1c81a"
    ],
    [
        [
            "file",
            "web-app/src/operations/resources.js"
        ],
-        "2057b9c585be6873cf51f4e5229b6f1e9c2ef4f84020edd7580deae1b04536b3"
+        "35f14c763398a5acdd12deea700cc124bca6393553696f2764c2ebfab0609ee1"
    ],
    [
        [
            "file",
            "web-app/src/queries/index.js"
        ],
-        "8cd5049ed1d3e4d00243c480f112a600ac830533c95772512101d4d50866ee25"
+        "39a659c6ed82cbbc38b834b607e049646e0d70e104d01317830f225629a5f14c"
    ],
    [
        [
            "file",
-            "web-app/src/queryCache.js"
+            "web-app/src/queryClient.js"
        ],
-        "c813d33478963f3cde701024ee45c4a14ae6b3a4e87cd0705a19ed72d0a2b187"
+        "f53c6e82b0e1b13dd2c2fff423460c88cd1c331e154867edeb7cd5f98c3586e4"
    ],
    [
        [
--- 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.4"},{"name":"cors","version":"^2.8.5"},{"name":"debug","version":"~2.6.9"},{"name":"express","version":"~4.16.1"},{"name":"morgan","version":"~1.9.1"},{"name":"@prisma/client","version":"3.9.1"},{"name":"jsonwebtoken","version":"^8.5.1"},{"name":"secure-password","version":"^4.0.0"},{"name":"dotenv","version":"8.2.0"},{"name":"helmet","version":"^4.6.0"}],"devDependencies":[{"name":"nodemon","version":"^2.0.4"},{"name":"standard","version":"^14.3.4"},{"name":"prisma","version":"3.9.1"}]},"npmDepsForWebApp":{"dependencies":[{"name":"axios","version":"^0.21.1"},{"name":"lodash","version":"^4.17.15"},{"name":"react","version":"^16.12.0"},{"name":"react-dom","version":"^16.12.0"},{"name":"react-query","version":"^2.14.1"},{"name":"react-router-dom","version":"^5.1.2"},{"name":"react-scripts","version":"4.0.3"},{"name":"uuid","version":"^3.4.0"}],"devDependencies":[]}}
+{"npmDepsForServer":{"dependencies":[{"name":"cookie-parser","version":"~1.4.4"},{"name":"cors","version":"^2.8.5"},{"name":"debug","version":"~2.6.9"},{"name":"express","version":"~4.16.1"},{"name":"morgan","version":"~1.9.1"},{"name":"@prisma/client","version":"3.9.1"},{"name":"jsonwebtoken","version":"^8.5.1"},{"name":"secure-password","version":"^4.0.0"},{"name":"dotenv","version":"8.2.0"},{"name":"helmet","version":"^4.6.0"}],"devDependencies":[{"name":"nodemon","version":"^2.0.4"},{"name":"standard","version":"^14.3.4"},{"name":"prisma","version":"3.9.1"}]},"npmDepsForWebApp":{"dependencies":[{"name":"axios","version":"^0.21.1"},{"name":"lodash","version":"^4.17.15"},{"name":"react","version":"^16.12.0"},{"name":"react-dom","version":"^16.12.0"},{"name":"react-query","version":"^3.34.19"},{"name":"react-router-dom","version":"^5.1.2"},{"name":"react-scripts","version":"4.0.3"},{"name":"uuid","version":"^3.4.0"}],"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
@ -16,7 +16,7 @@
    "lodash": "^4.17.15",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
-    "react-query": "^2.14.1",
+    "react-query": "^3.34.19",
    "react-router-dom": "^5.1.2",
    "react-scripts": "4.0.3",
    "uuid": "^3.4.0"
--- 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,18 +1,18 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { ReactQueryCacheProvider } from 'react-query'
+import { QueryClientProvider } from 'react-query'

 import router from './router'
-import queryCache from './queryCache'
+import { queryClient } from './queryClient'
 import * as serviceWorker from './serviceWorker'

 import './index.css'


 ReactDOM.render(
-  <ReactQueryCacheProvider queryCache={queryCache}>
+  <QueryClientProvider client={queryClient}>
    { router }
-  </ReactQueryCacheProvider>,
+  </QueryClientProvider>,
  document.getElementById('root')
 )

--- a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/operations/index.js
+++ b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/operations/index.js
@ -1,7 +1,7 @@
 import api, { handleApiError } from '../api.js'
 import config from '../config.js'

-export const callOperation = async (operationRoute, args) => {
+export async function callOperation(operationRoute, args) {
  try {
    const response = await api.post(config.apiUrl + '/' + operationRoute, args)
    return response.data
--- 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,4 +1,4 @@
-import queryCache from '../queryCache'
+import { queryClient } from '../queryClient'


 // Map where key is resource name and value is Set
@ -41,6 +41,6 @@ export const invalidateQueriesUsing = (resources) => {
    getQueriesUsingResource(resource).forEach(key => queryCacheKeysToInvalidate.add(key))
  }
  for (const queryCacheKey of queryCacheKeysToInvalidate) {
-    queryCache.invalidateQueries(queryCacheKey)
+    queryClient.invalidateQueries(queryCacheKey)
  }
 }
--- 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,18 +1,16 @@
 import { useQuery as rqUseQuery } from 'react-query'

-export const useQuery = (queryFn, queryFnArgs, config) => {
+export function useQuery(queryFn, queryFnArgs, config) {
  if (typeof queryFn !== 'function') {
-    throw new Error('useQuery requires queryFn to be a function.')
+    throw new TypeError('useQuery requires queryFn to be a function.')
  }
  if (!queryFn.queryCacheKey) {
-    throw new Error('queryFn needs to have queryCacheKey property defined.')
+    throw new TypeError('queryFn needs to have queryCacheKey property defined.')
  }

-  const rqResult = rqUseQuery({
+  return rqUseQuery({
    queryKey: [queryFn.queryCacheKey, queryFnArgs],
-    queryFn: (_key, args) => queryFn(args),
-    config
+    queryFn: () => queryFn(queryFnArgs),
+    ...config
  })
-
-  return rqResult
 }
--- a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/queryCache.js
+++ b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/queryCache.js
@ -1,3 +0,0 @@
-import { QueryCache } from 'react-query'
-
-export default new QueryCache()
--- 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
@ -0,0 +1,3 @@
+import { QueryClient } from 'react-query'
+
+export const queryClient = new QueryClient()
--- a/waspc/e2e-test/test-outputs/waspMigrate-golden/files.manifest
+++ b/waspc/e2e-test/test-outputs/waspMigrate-golden/files.manifest
@ -44,7 +44,7 @@ waspMigrate/.wasp/out/web-app/src/logo.png
 waspMigrate/.wasp/out/web-app/src/operations/index.js
 waspMigrate/.wasp/out/web-app/src/operations/resources.js
 waspMigrate/.wasp/out/web-app/src/queries/index.js
-waspMigrate/.wasp/out/web-app/src/queryCache.js
+waspMigrate/.wasp/out/web-app/src/queryClient.js
 waspMigrate/.wasp/out/web-app/src/router.js
 waspMigrate/.wasp/out/web-app/src/serviceWorker.js
 waspMigrate/.wasp/out/web-app/src/utils.js
--- a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/.waspchecksums
+++ b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/.waspchecksums
@ -186,7 +186,7 @@
            "file",
            "web-app/package.json"
        ],
-        "655f72fec123ff1b4c17b516bd38771eca4b8236390718d448b69693c26ce8a3"
+        "3f44e953a4466acc8fcd92391ff4130017cec98b4559fd8112eb427b43c0f1e8"
    ],
    [
        [
@ -256,7 +256,7 @@
            "file",
            "web-app/src/index.js"
        ],
-        "4f5af477f3045d3f834e84962ca08a0f8f949e6979145224ef3f61f4a84cd540"
+        "030bfc5cd200d732eaca398b298057c148c3f9d9b8a3e7a24918db438b5d1861"
    ],
    [
        [
@ -270,28 +270,28 @@
            "file",
            "web-app/src/operations/index.js"
        ],
-        "ca58bfb900f5379ee84b42337c11a59cd45b6c62a5018328e5245af5943b32bb"
+        "4eea48fce8a16a41ee86925955c197752d91e8e067d47bcc795c32b450d1c81a"
    ],
    [
        [
            "file",
            "web-app/src/operations/resources.js"
        ],
-        "2057b9c585be6873cf51f4e5229b6f1e9c2ef4f84020edd7580deae1b04536b3"
+        "35f14c763398a5acdd12deea700cc124bca6393553696f2764c2ebfab0609ee1"
    ],
    [
        [
            "file",
            "web-app/src/queries/index.js"
        ],
-        "8cd5049ed1d3e4d00243c480f112a600ac830533c95772512101d4d50866ee25"
+        "39a659c6ed82cbbc38b834b607e049646e0d70e104d01317830f225629a5f14c"
    ],
    [
        [
            "file",
-            "web-app/src/queryCache.js"
+            "web-app/src/queryClient.js"
        ],
-        "c813d33478963f3cde701024ee45c4a14ae6b3a4e87cd0705a19ed72d0a2b187"
+        "f53c6e82b0e1b13dd2c2fff423460c88cd1c331e154867edeb7cd5f98c3586e4"
    ],
    [
        [
--- 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.4"},{"name":"cors","version":"^2.8.5"},{"name":"debug","version":"~2.6.9"},{"name":"express","version":"~4.16.1"},{"name":"morgan","version":"~1.9.1"},{"name":"@prisma/client","version":"3.9.1"},{"name":"jsonwebtoken","version":"^8.5.1"},{"name":"secure-password","version":"^4.0.0"},{"name":"dotenv","version":"8.2.0"},{"name":"helmet","version":"^4.6.0"}],"devDependencies":[{"name":"nodemon","version":"^2.0.4"},{"name":"standard","version":"^14.3.4"},{"name":"prisma","version":"3.9.1"}]},"npmDepsForWebApp":{"dependencies":[{"name":"axios","version":"^0.21.1"},{"name":"lodash","version":"^4.17.15"},{"name":"react","version":"^16.12.0"},{"name":"react-dom","version":"^16.12.0"},{"name":"react-query","version":"^2.14.1"},{"name":"react-router-dom","version":"^5.1.2"},{"name":"react-scripts","version":"4.0.3"},{"name":"uuid","version":"^3.4.0"}],"devDependencies":[]}}
+{"npmDepsForServer":{"dependencies":[{"name":"cookie-parser","version":"~1.4.4"},{"name":"cors","version":"^2.8.5"},{"name":"debug","version":"~2.6.9"},{"name":"express","version":"~4.16.1"},{"name":"morgan","version":"~1.9.1"},{"name":"@prisma/client","version":"3.9.1"},{"name":"jsonwebtoken","version":"^8.5.1"},{"name":"secure-password","version":"^4.0.0"},{"name":"dotenv","version":"8.2.0"},{"name":"helmet","version":"^4.6.0"}],"devDependencies":[{"name":"nodemon","version":"^2.0.4"},{"name":"standard","version":"^14.3.4"},{"name":"prisma","version":"3.9.1"}]},"npmDepsForWebApp":{"dependencies":[{"name":"axios","version":"^0.21.1"},{"name":"lodash","version":"^4.17.15"},{"name":"react","version":"^16.12.0"},{"name":"react-dom","version":"^16.12.0"},{"name":"react-query","version":"^3.34.19"},{"name":"react-router-dom","version":"^5.1.2"},{"name":"react-scripts","version":"4.0.3"},{"name":"uuid","version":"^3.4.0"}],"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
@ -16,7 +16,7 @@
    "lodash": "^4.17.15",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
-    "react-query": "^2.14.1",
+    "react-query": "^3.34.19",
    "react-router-dom": "^5.1.2",
    "react-scripts": "4.0.3",
    "uuid": "^3.4.0"
--- 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,18 +1,18 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { ReactQueryCacheProvider } from 'react-query'
+import { QueryClientProvider } from 'react-query'

 import router from './router'
-import queryCache from './queryCache'
+import { queryClient } from './queryClient'
 import * as serviceWorker from './serviceWorker'

 import './index.css'


 ReactDOM.render(
-  <ReactQueryCacheProvider queryCache={queryCache}>
+  <QueryClientProvider client={queryClient}>
    { router }
-  </ReactQueryCacheProvider>,
+  </QueryClientProvider>,
  document.getElementById('root')
 )

--- a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/operations/index.js
+++ b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/operations/index.js
@ -1,7 +1,7 @@
 import api, { handleApiError } from '../api.js'
 import config from '../config.js'

-export const callOperation = async (operationRoute, args) => {
+export async function callOperation(operationRoute, args) {
  try {
    const response = await api.post(config.apiUrl + '/' + operationRoute, args)
    return response.data
--- 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,4 +1,4 @@
-import queryCache from '../queryCache'
+import { queryClient } from '../queryClient'


 // Map where key is resource name and value is Set
@ -41,6 +41,6 @@ export const invalidateQueriesUsing = (resources) => {
    getQueriesUsingResource(resource).forEach(key => queryCacheKeysToInvalidate.add(key))
  }
  for (const queryCacheKey of queryCacheKeysToInvalidate) {
-    queryCache.invalidateQueries(queryCacheKey)
+    queryClient.invalidateQueries(queryCacheKey)
  }
 }
--- 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,18 +1,16 @@
 import { useQuery as rqUseQuery } from 'react-query'

-export const useQuery = (queryFn, queryFnArgs, config) => {
+export function useQuery(queryFn, queryFnArgs, config) {
  if (typeof queryFn !== 'function') {
-    throw new Error('useQuery requires queryFn to be a function.')
+    throw new TypeError('useQuery requires queryFn to be a function.')
  }
  if (!queryFn.queryCacheKey) {
-    throw new Error('queryFn needs to have queryCacheKey property defined.')
+    throw new TypeError('queryFn needs to have queryCacheKey property defined.')
  }

-  const rqResult = rqUseQuery({
+  return rqUseQuery({
    queryKey: [queryFn.queryCacheKey, queryFnArgs],
-    queryFn: (_key, args) => queryFn(args),
-    config
+    queryFn: () => queryFn(queryFnArgs),
+    ...config
  })
-
-  return rqResult
 }
--- a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/queryCache.js
+++ b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/queryCache.js
@ -1,3 +0,0 @@
-import { QueryCache } from 'react-query'
-
-export default new QueryCache()
--- 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
@ -0,0 +1,3 @@
+import { QueryClient } from 'react-query'
+
+export const queryClient = new QueryClient()
--- a/waspc/examples/todoApp/ext/Todo.js
+++ b/waspc/examples/todoApp/ext/Todo.js
@ -114,7 +114,7 @@ const Task = (props) => {
    <TableRow>
      <TableCell>
        <Checkbox
-          id={props.task.id}
+          id={String(props.task.id)}
          checked={props.task.isDone}
          onChange={handleTaskIsDoneChange}
          color="default"
--- a/waspc/src/Wasp/Generator/WebAppGenerator.hs
+++ b/waspc/src/Wasp/Generator/WebAppGenerator.hs
@ -97,7 +97,7 @@ npmDepsForWasp =
            ("lodash", "^4.17.15"),
            ("react", "^16.12.0"),
            ("react-dom", "^16.12.0"),
-            ("react-query", "^2.14.1"),
+            ("react-query", "^3.34.19"),
            ("react-router-dom", "^5.1.2"),
            ("react-scripts", "4.0.3"),
            ("uuid", "^3.4.0")
@ -172,7 +172,7 @@ genSrcDir spec = do
        [relfile|index.css|],
        [relfile|serviceWorker.js|],
        [relfile|config.js|],
-        [relfile|queryCache.js|],
+        [relfile|queryClient.js|],
        [relfile|utils.js|]
      ]
      ++ operationsFds
--- a/waspc/src/Wasp/Generator/WebAppGenerator/RouterGenerator.hs
+++ b/waspc/src/Wasp/Generator/WebAppGenerator/RouterGenerator.hs
@ -123,7 +123,7 @@ createPageTemplateData page =
    { _importFrom = relPathToExtSrcDir FP.</> SP.fromRelFileP (AS.ExtImport.path pageComponent),
      _importWhat = case AS.ExtImport.name pageComponent of
        AS.ExtImport.ExtImportModule _ -> pageName
-        AS.ExtImport.ExtImportField identifier -> "{ " ++ identifier ++ " as " ++ pageName ++ " }"
+        AS.ExtImport.ExtImportField identifier -> "{ " ++ mkNamedImportExpr identifier pageName ++ " }"
    }
  where
    relPathToExtSrcDir :: FilePath
@ -134,3 +134,8 @@ createPageTemplateData page =

    pageComponent :: AS.ExtImport.ExtImport
    pageComponent = AS.Page.component $ snd page
+
+mkNamedImportExpr :: String -> String -> String
+mkNamedImportExpr identifier alias
+  | identifier == alias = identifier
+  | otherwise = identifier ++ " as " ++ alias