feat(RQ): improve react-query plugin (#12226)

* example: add react-query v5 example

* chore: extract flatted method

* chore(RQ): extract RQ exports

* feat(RQ): add runtime config and v5 compat types

* chore: update lockfile

* example: update RQ example

* fix(RQ): cannot write empty tmp file

* docs: update RQ doc

docs/docs/docs/max/react-query.md

@@ -29,6 +29,14 @@ export default {
 }
 ```
 
+:::info
+注：在使用时，请务必检查关于 `refetchOnWindowFocus` 的配置项，详见 [运行时配置项](#运行时配置项) 。
+:::
+
+## 版本
+
+默认使用的是 [TanStack Query](https://tanstack.com/query/latest) v4 版本，若需使用最新 v5 版本，手动安装 v5 版本的 `@tanstack/react-query` 与 `@tanstack/react-query-devtools` 依赖即可。
+
 ## 特性
 
 插件帮你做了几件事，
@@ -66,27 +74,26 @@ export default {
 - `devtool`：object
 - `queryClient`: object
 
-比如：
+例子：
 
 ```ts
-const API_SERVER = '/path/to/api/server';
-export const reactQuery = {
+// src/app.ts
+
+import { RuntimeReactQueryType } from 'umi';
+
+export const reactQuery: RuntimeReactQueryType = {
   devtool: { 
     initialIsOpen: true,
   },
   queryClient: {
-	  defaultOptions: {
-	    queries: {
-	      queryFn: async ({ queryKey }) => {
-	        const res = await fetch(`${API_SERVER}/${queryKey.join('/')}`);
-	        if (res.status !== 200) {
-	          throw new Error(res.statusText);
-	        }
-	        return res.json();
-	      }
-	    }
-	  }
+    defaultOptions: {
+      queries: {
+        // 🟡 此配置具有的表现往往令人出乎意料，若无特殊需求，请默认关闭
+        refetchOnWindowFocus: false,
+      },
+    },
   },
 };
 ```
 
+注：绝大多数项目中，**你都应该默认设定 `refetchOnWindowFocus: false`** ，否则将引发出人意料的反复获取数据效果（这在 SWR 中被称为 [`revalidateOnFocus`](https://swr.vercel.app/zh-CN/docs/api#options) ）。

examples/with-react-query-v5/.umirc.ts

@@ -0,0 +1,4 @@
+export default {
+  plugins: ['@umijs/plugins/dist/react-query'],
+  reactQuery: {},
+};

examples/with-react-query-v5/app.ts

@@ -0,0 +1,14 @@
+import { RuntimeReactQueryType } from 'umi';
+
+export const reactQuery: RuntimeReactQueryType = {
+  queryClient: {
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+      },
+    },
+  },
+  devtool: {
+    buttonPosition: 'bottom-left',
+  },
+};

examples/with-react-query-v5/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@example/with-react-query-v5",
+  "private": true,
+  "scripts": {
+    "build": "umi build",
+    "dev": "umi dev",
+    "start": "npm run dev"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.28.6",
+    "@tanstack/react-query-devtools": "^5.28.6",
+    "umi": "workspace:*"
+  }
+}

examples/with-react-query-v5/pages/index.tsx

@@ -0,0 +1,30 @@
+import { useQuery } from 'umi';
+import '../style.less';
+
+export default function HomePage() {
+  const { isFetching, data } = useQuery({
+    queryKey: ['repoData'],
+    queryFn: () => {
+      return new Promise<{ stargazers_count: number }>((resolve, _) => {
+        setTimeout(async () => {
+          const res = await fetch('https://api.github.com/repos/umijs/umi');
+          const json = await res.json();
+          resolve(json);
+        }, 500);
+      });
+    },
+  });
+
+  return (
+    <div className="container">
+      <div>
+        <p className="title">UmiJS x react-query v5</p>
+        {isFetching ? (
+          <p>Loading ...</p>
+        ) : (
+          <p>UmiJS has {data?.stargazers_count} stars now!</p>
+        )}
+      </div>
+    </div>
+  );
+}

examples/with-react-query-v5/readme.md

@@ -0,0 +1,3 @@
+# react-query-v5
+
+An example of using [UmiJS](https://umijs.org/zh-CN) with [react-query](https://github.com/TanStack/query) v5.

examples/with-react-query-v5/style.less

@@ -0,0 +1,22 @@
+body {
+  font-family: 'Lucida Sans', sans-serif;
+}
+
+.container {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .title {
+    font-size: 64px;
+  }
+
+}

examples/with-react-query-v5/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.umi/tsconfig.json"
+}

examples/with-react-query/app.ts

@@ -0,0 +1,14 @@
+import { RuntimeReactQueryType } from 'umi';
+
+export const reactQuery: RuntimeReactQueryType = {
+  queryClient: {
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+      },
+    },
+  },
+  devtool: {
+    position: 'bottom-left',
+  },
+};

examples/with-react-query/pages/index.tsx

@@ -2,15 +2,15 @@ import { useQuery } from 'umi';
 import '../style.less';
 
 export default function HomePage() {
-  const { isLoading, data } = useQuery(['repoData'], () =>
+  const { isFetching, data } = useQuery(['repoData'], () =>
     fetch('https://api.github.com/repos/umijs/umi').then((res) => res.json()),
   );
 
   return (
     <div className="container">
       <div>
         <p className="title">UmiJS x react-query</p>
-        {isLoading && <p>Loading ...</p>}
+        {isFetching && <p>Loading ...</p>}
         {data && <p>UmiJS has {data.stargazers_count} stars now!</p>}
       </div>
     </div>

examples/with-react-query/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.umi/tsconfig.json"
+}

packages/plugins/src/layout.ts

@@ -1,7 +1,8 @@
 import { existsSync, readFileSync } from 'fs';
 import { dirname, join } from 'path';
 import { IApi, RUNTIME_TYPE_FILE_NAME } from 'umi';
-import { lodash, Mustache, NpmClientEnum, winPath } from 'umi/plugin-utils';
+import { lodash, Mustache, winPath } from 'umi/plugin-utils';
+import { isFlattedNodeModulesDir } from './utils/npmClient';
 import { resolveProjectDep } from './utils/resolveProjectDep';
 import { withTmpPath } from './utils/withTmpPath';
 
@@ -117,21 +118,10 @@ export default (api: IApi) => {
   });
 
   api.onGenerateFiles(() => {
-    let realNpmClient = api.appData.npmClient;
-    // tnpm 作为 npmClient 时，可能使用不同的安装模式
-    if (
-      api.appData.npmClient === NpmClientEnum.tnpm &&
-      api.pkg.tnpm?.mode &&
-      [NpmClientEnum.npm, NpmClientEnum.yarn].includes(api.pkg.tnpm.mode)
-    ) {
-      realNpmClient = api.pkg.tnpm.mode;
-    }
     // use absolute path to types references in `npm/yarn` will cause case problems.
     // https://github.com/umijs/umi/discussions/10947
     // https://github.com/umijs/umi/discussions/11570
-    const isFlattedDepsDir = [NpmClientEnum.npm, NpmClientEnum.yarn].includes(
-      realNpmClient,
-    );
+    const isFlattedDepsDir = isFlattedNodeModulesDir(api);
     const PKG_TYPE_REFERENCE = `
 /// <reference types="${
       isFlattedDepsDir ? ANT_PRO_COMPONENT : resolvedPkgPath