Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: react query plugin compat. with v5 #12162

Merged
merged 2 commits into from
Mar 11, 2024
Merged

feat: react query plugin compat. with v5 #12162

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d0e9d69
feat: react query plugin compat. with v5
fz6m Mar 1, 2024
ddec535
chore: distinguish version
fz6m Mar 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 75 additions & 14 deletions packages/plugins/src/react-query.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { winPath } from '@umijs/utils';
import { dirname } from 'path';
import { dirname, join } from 'path';
import { IApi } from 'umi';
import { resolveProjectDep } from './utils/resolveProjectDep';
import { withTmpPath } from './utils/withTmpPath';
Expand All @@ -21,26 +21,59 @@ export default (api: IApi) => {
});

let pkgPath: string;
let devtoolsPkgPath: string;
const REACT_QUERY_DEP_NAME = '@tanstack/react-query';
const REACT_QUERY_DEVTOOLS_DEP_NAME = '@tanstack/react-query-devtools';
const defaultPkgPath = winPath(
dirname(require.resolve('@tanstack/react-query/package.json')),
dirname(require.resolve(`${REACT_QUERY_DEP_NAME}/package.json`)),
);
const devtoolPkgPath = winPath(
dirname(require.resolve('@tanstack/react-query-devtools/package.json')),
const defaultDevtoolPkgPath = winPath(
dirname(require.resolve(`${REACT_QUERY_DEVTOOLS_DEP_NAME}/package.json`)),
);
// resolve RQ
try {
const localQueryPath = resolveProjectDep({
pkg: api.pkg,
cwd: api.cwd,
dep: '@tanstack/react-query',
dep: REACT_QUERY_DEP_NAME,
});
pkgPath = localQueryPath ? winPath(localQueryPath) : defaultPkgPath;
} catch (e: any) {
throw new Error(`[reactQuery] package resolve failed, ${e.message}`);
throw new Error(
`[reactQuery] package '${REACT_QUERY_DEP_NAME}' resolve failed, ${e.message}`,
);
}
// resolve RQ devtools
try {
const localDevtoolsPkgPath = resolveProjectDep({
pkg: api.pkg,
cwd: api.cwd,
dep: REACT_QUERY_DEVTOOLS_DEP_NAME,
});
devtoolsPkgPath = localDevtoolsPkgPath
? winPath(localDevtoolsPkgPath)
: defaultDevtoolPkgPath;
} catch (e: any) {
throw new Error(
`[reactQuery] package '${REACT_QUERY_DEVTOOLS_DEP_NAME}' resolve failed, ${e.message}`,
);
}
// package.json
const pkg = require(join(pkgPath, 'package.json'));
const devtoolsPkg = require(join(devtoolsPkgPath, 'package.json'));
// version
const pkgVersion = pkg.version;
const devtoolsVersion = devtoolsPkg.version;
// check version
const useV4 = pkgVersion.startsWith('4');
const useV4Devtools = devtoolsVersion.startsWith('4');
const useV5 = pkgVersion.startsWith('5');
const useV5Devtools = devtoolsVersion.startsWith('5');
const canUseDevtools = (useV4 && useV4Devtools) || (useV5 && useV5Devtools);

api.onStart(() => {
if (pkgPath !== defaultPkgPath) {
api.logger.info(`[reactQuery] use local package ${pkgPath}`);
if (pkgPath !== defaultPkgPath && !process.env.IS_UMI_BUILD_WORKER) {
api.logger.info(`[reactQuery] use local package, version: ${pkgVersion}`);
}
});

Expand All @@ -52,8 +85,18 @@ export default (api: IApi) => {
return ['reactQuery'];
});

// alias
api.modifyConfig((memo) => {
memo.alias[REACT_QUERY_DEP_NAME] = pkgPath;
if (canUseDevtools) {
memo.alias[REACT_QUERY_DEVTOOLS_DEP_NAME] = devtoolsPkgPath;
}
return memo;
});

api.onGenerateFiles(() => {
const enableDevTools = api.config.reactQuery.devtool !== false;
const enableDevTools =
api.config.reactQuery.devtool !== false && canUseDevtools;
const enableQueryClient = api.config.reactQuery.queryClient !== false;
const reactQueryRuntimeCode = api.appData.appJS?.exports.includes(
'reactQuery',
Expand All @@ -65,17 +108,32 @@ export default (api: IApi) => {
content: enableQueryClient
? `
import React from 'react';
import { defaultContext, QueryClient, QueryClientProvider } from '${pkgPath}';
import { ReactQueryDevtools } from '${devtoolPkgPath}';
import {
${useV4 ? 'defaultContext,' : ''}
QueryClient,
QueryClientProvider
} from '${pkgPath}';
${
enableDevTools
? `import { ReactQueryDevtools } from '${devtoolsPkgPath}';`
: ''
}
${reactQueryRuntimeCode}
const client = new QueryClient(reactQueryConfig.queryClient || {});
export function rootContainer(container) {
return (
<QueryClientProvider client={client} context={defaultContext}>
<QueryClientProvider
client={client}
${useV4 ? 'context={defaultContext}' : ''}
>
{container}
${
enableDevTools
? '<ReactQueryDevtools context={defaultContext} initialIsOpen={false} {...(reactQueryConfig.devtool || {})} />'
? `<ReactQueryDevtools
${useV4 ? 'context={defaultContext}' : ''}
initialIsOpen={false}
{...(reactQueryConfig.devtool || {})}
/>`
: ''
}
</QueryClientProvider>
Expand All @@ -84,6 +142,7 @@ export function rootContainer(container) {
`
: '',
});

api.writeTmpFile({
path: 'index.tsx',
content: `
Expand All @@ -109,9 +168,11 @@ export {
useQueryClient,
QueryErrorResetBoundary,
useQueryErrorResetBoundary,
${useV5 ? 'queryOptions,' : ''}
} from '${pkgPath}';
`,
});

api.writeTmpFile({
path: 'types.d.ts',
content: `
Expand All @@ -123,7 +184,7 @@ export type {
QueriesOptions,
QueryErrorResetBoundaryProps,
QueryClientProviderProps,
ContextOptions as QueryContextOptions,
${useV4 ? 'ContextOptions as QueryContextOptions,' : ''}
UseQueryOptions,
UseBaseQueryOptions,
UseQueryResult,
Expand Down
Loading