diff --git a/.changeset/afraid-baboons-roll.md b/.changeset/afraid-baboons-roll.md new file mode 100644 index 000000000000..f473cb421833 --- /dev/null +++ b/.changeset/afraid-baboons-roll.md @@ -0,0 +1,18 @@ +--- +"@refinedev/mui": minor +--- + +feat: [`useAutocomplete`](https://refine.dev/docs/ui-integrations/material-ui/hooks/use-auto-complete/)'s `queryResult` and `defaultValueQueryResult` is deprecated, use `query` and `defaultValueQuery` instead. #6179 + +```diff +import { useAutocomplete } from '@refinedev/mui'; + +- const { queryResult, defaultValueQueryResult } = useAutocomplete(); ++ const { query, defaultValueQuery } = useAutocomplete(); +``` + +> ✨ You can use `@refinedev/codemod` to automatically migrate your codebase. Simply run the following command in your project's root directory: +> +> ```bash +> npx @refinedev/codemod@latest use-select-query-result +> ``` diff --git a/.changeset/bright-dancers-tie.md b/.changeset/bright-dancers-tie.md new file mode 100644 index 000000000000..f9bf6260b108 --- /dev/null +++ b/.changeset/bright-dancers-tie.md @@ -0,0 +1,10 @@ +--- +"@refinedev/codemod": minor +--- + +feat: added `npx @refinedev/codemod@latest use-select-query-result` to automatically refactor `useSelect`'s `queryResult` and `defaultValueQueryResult` to `query` and `defaultValueQuery` #6179 + +```diff +- const { queryResult, defaultValueQueryResult } = useSelect(); // or useAutocomplete, useCheckboxGroup, useRadioGroup ++ const { query, defaultValueQuery } = useSelect(); +``` diff --git a/.changeset/cool-cougars-shop.md b/.changeset/cool-cougars-shop.md new file mode 100644 index 000000000000..787b011fd1bb --- /dev/null +++ b/.changeset/cool-cougars-shop.md @@ -0,0 +1,18 @@ +--- +"@refinedev/core": minor +--- + +feat: [`useSelect`](https://refine.dev/docs/data/hooks/use-select/)'s `queryResult` and `defaultValueQueryResult` is deprecated, use `query` and `defaultValueQuery` instead. #6179 + +```diff +import { useSelect } from '@refinedev/core'; + +- const { queryResult, defaultValueQueryResult } = useSelect(); ++ const { query, defaultValueQuery } = useSelect(); +``` + +> ✨ You can use `@refinedev/codemod` to automatically migrate your codebase. Simply run the following command in your project's root directory: +> +> ```bash +> npx @refinedev/codemod@latest use-select-query-result +> ``` diff --git a/.changeset/gentle-vans-tease.md b/.changeset/gentle-vans-tease.md new file mode 100644 index 000000000000..0f96c696ca32 --- /dev/null +++ b/.changeset/gentle-vans-tease.md @@ -0,0 +1,36 @@ +--- +"@refinedev/antd": minor +--- + +feat: [`useSelect`](https://refine.dev/docs/ui-integrations/ant-design/hooks/use-select/)'s `queryResult` and `defaultValueQueryResult` is deprecated, use `query` and `defaultValueQuery` instead. #6179 + +```diff +import { useSelect } from '@refinedev/antd'; + +- const { queryResult, defaultValueQueryResult } = useSelect(); ++ const { query, defaultValueQuery } = useSelect(); +``` + +feat: [`useCheckboxGroup`](https://refine.dev/docs/ui-integrations/ant-design/hooks/use-checkbox-group/)'s `queryResult` is deprecated, use `query` instead. + +```diff +import { useCheckboxGroup } from '@refinedev/antd'; + +- const { queryResult } = useCheckboxGroup(); ++ const { query } = useCheckboxGroup(); +``` + +feat: [`useRadioGroup`](https://refine.dev/docs/ui-integrations/ant-design/hooks/use-radio-group/)'s `queryResult` is deprecated, use `query` instead. + +```diff +import { useRadioGroup } from '@refinedev/antd'; + +- const { queryResult } = useRadioGroup(); ++ const { query } = useRadioGroup(); +``` + +> ✨ You can use `@refinedev/codemod` to automatically migrate your codebase. Simply run the following command in your project's root directory: +> +> ```bash +> npx @refinedev/codemod@latest use-select-query-result +> ``` diff --git a/.changeset/perfect-monkeys-burn.md b/.changeset/perfect-monkeys-burn.md new file mode 100644 index 000000000000..fea9d99bc918 --- /dev/null +++ b/.changeset/perfect-monkeys-burn.md @@ -0,0 +1,18 @@ +--- +"@refinedev/mantine": minor +--- + +feat: [`useSelect`](https://refine.dev/docs/ui-integrations/mantine/hooks/use-select/)'s `queryResult` and `defaultValueQueryResult` is deprecated, use `query` and `defaultValueQuery` instead. #6179 + +```diff +import { useSelect } from '@refinedev/mantine'; + +- const { queryResult, defaultValueQueryResult } = useSelect(); ++ const { query, defaultValueQuery } = useSelect(); +``` + +> ✨ You can use `@refinedev/codemod` to automatically migrate your codebase. Simply run the following command in your project's root directory: +> +> ```bash +> npx @refinedev/codemod@latest use-select-query-result +> ``` diff --git a/documentation/docs/data/hooks/use-select/index.md b/documentation/docs/data/hooks/use-select/index.md index 0f31ae3a2cb2..a6dec752ab53 100644 --- a/documentation/docs/data/hooks/use-select/index.md +++ b/documentation/docs/data/hooks/use-select/index.md @@ -462,14 +462,14 @@ useSelect({ ### Can I create the options manually? -Sometimes it may not be enough to create `optionLabel` and `optionValue` options. In this case we create options with `queryResult`. +Sometimes it may not be enough to create `optionLabel` and `optionValue` options. In this case we create options with `query`. ```tsx -const { queryResult } = useSelect({ +const { query } = useSelect({ resource: "categories", }); -const options = queryResult.data?.data.map((item) => ({ +const options = query.data?.data.map((item) => ({ label: item.name, value: item.id, })); @@ -501,13 +501,13 @@ return ( ### Return values -| Property | Description | Type | -| ----------------------- | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | -| options | It returns possible options | `{ label: string; value: string }` | -| queryResult | Result of the query of a record | [`QueryObserverResult<{ data: TData; error: TError }>`](https://react-query.tanstack.com/reference/useQuery) | -| defaultValueQueryResult | Result of the query of a `defaultValue` record | [`QueryObserverResult<{ data: TData; error: TError }>`](https://react-query.tanstack.com/reference/useQuery) | -| onSearch | A function to set the search value | `onSearch: (value: string) => void` | -| overtime | Overtime loading props | `{ elapsedTime?: number }` | +| Property | Description | Type | +| ----------------- | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | +| options | It returns possible options | `{ label: string; value: string }` | +| query | Result of the query of a record | [`QueryObserverResult<{ data: TData; error: TError }>`](https://react-query.tanstack.com/reference/useQuery) | +| defaultValueQuery | Result of the query of a `defaultValue` record | [`QueryObserverResult<{ data: TData; error: TError }>`](https://react-query.tanstack.com/reference/useQuery) | +| onSearch | A function to set the search value | `onSearch: (value: string) => void` | +| overtime | Overtime loading props | `{ elapsedTime?: number }` | ## Example diff --git a/documentation/docs/ui-integrations/ant-design/hooks/use-select/index.md b/documentation/docs/ui-integrations/ant-design/hooks/use-select/index.md index c7ca3ebb2b50..76d6e4d3463f 100644 --- a/documentation/docs/ui-integrations/ant-design/hooks/use-select/index.md +++ b/documentation/docs/ui-integrations/ant-design/hooks/use-select/index.md @@ -471,12 +471,12 @@ useSelect({ ### Can I create the options manually? -Sometimes it may not be enough to create `optionLabel` and `optionValue` options. In this case we create options with `queryResult`. +Sometimes it may not be enough to create `optionLabel` and `optionValue` options. In this case we create options with `query`. ```tsx -const { queryResult } = useSelect(); +const { query } = useSelect(); -const options = queryResult.data?.data.map((item) => ({ +const options = query.data?.data.map((item) => ({ label: item.title, value: item.id, })); @@ -507,8 +507,8 @@ return ; | Property | Description | Type | | -------------------------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------- | | selectProps | Mantine Select props | [`SelectPropsType`](#selectpropstype) | -| queryResult | Result of the query of a record | [`QueryObserverResult<{ data: TData }>`](https://react-query.tanstack.com/reference/useQuery) | -| defaultValueQueryResult | Result of the query of a `defaultValue` record | [`QueryObserverResult<{ data: TData }>`](https://react-query.tanstack.com/reference/useQuery) | +| query | Result of the query of a record | [`QueryObserverResult<{ data: TData }>`](https://react-query.tanstack.com/reference/useQuery) | +| defaultValueQuery | Result of the query of a `defaultValue` record | [`QueryObserverResult<{ data: TData }>`](https://react-query.tanstack.com/reference/useQuery) | | defaultValueQueryOnSuccess | Default value onSuccess method | `() => void` | | overtime | Overtime loading props | `{ elapsedTime?: number }` | diff --git a/documentation/docs/ui-integrations/material-ui/hooks/use-auto-complete/index.md b/documentation/docs/ui-integrations/material-ui/hooks/use-auto-complete/index.md index bfaee58f1a76..c6b2d181afc7 100644 --- a/documentation/docs/ui-integrations/material-ui/hooks/use-auto-complete/index.md +++ b/documentation/docs/ui-integrations/material-ui/hooks/use-auto-complete/index.md @@ -407,12 +407,12 @@ In some cases we only have `id`, it may be necessary to show it selected in the ### Can I create the options manually? -You can create a new `options` object with `queryResult`. +You can create a new `options` object with `query`. ```tsx -const { autocompleteProps, queryResult } = useAutocomplete(); +const { autocompleteProps, query } = useAutocomplete(); -const options = queryResult.data?.data.map((item) => ({ +const options = query.data?.data.map((item) => ({ title: item.title, value: item.id, })); @@ -447,8 +447,8 @@ By default, Refine does the search using the [`useList`](/docs/data/hooks/use-de | Property | Description | Type | | -------------------------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------- | | autocompleteProps | Material UI Autocomplete props | [`AutoCompleteReturnValues`](#autocompletereturnvalues) | -| queryResult | Result of the query of a record | [`QueryObserverResult<{ data: TData }>`](https://react-query.tanstack.com/reference/useQuery) | -| defaultValueQueryResult | Result of the query of a `defaultValue` record | [`QueryObserverResult<{ data: TData }>`](https://react-query.tanstack.com/reference/useQuery) | +| query | Result of the query of a record | [`QueryObserverResult<{ data: TData }>`](https://react-query.tanstack.com/reference/useQuery) | +| defaultValueQuery | Result of the query of a `defaultValue` record | [`QueryObserverResult<{ data: TData }>`](https://react-query.tanstack.com/reference/useQuery) | | defaultValueQueryOnSuccess | Default value onSuccess method | `() => void` | | overtime | Overtime loading props | `{ elapsedTime?: number }` | diff --git a/examples/app-crm-minimal/src/routes/companies/edit/form.tsx b/examples/app-crm-minimal/src/routes/companies/edit/form.tsx index 23c9f3c126a4..d70e3b49d048 100644 --- a/examples/app-crm-minimal/src/routes/companies/edit/form.tsx +++ b/examples/app-crm-minimal/src/routes/companies/edit/form.tsx @@ -37,17 +37,18 @@ export const CompanyForm = () => { }); const { avatarUrl, name } = queryResult?.data?.data || {}; - const { selectProps: selectPropsUsers, queryResult: queryResultUsers } = - useSelect>({ - resource: "users", - optionLabel: "name", - pagination: { - mode: "off", - }, - meta: { - gqlQuery: USERS_SELECT_QUERY, - }, - }); + const { selectProps: selectPropsUsers, query: queryResultUsers } = useSelect< + GetFieldsFromList + >({ + resource: "users", + optionLabel: "name", + pagination: { + mode: "off", + }, + meta: { + gqlQuery: USERS_SELECT_QUERY, + }, + }); return ( { }, }); - const { selectProps, queryResult } = useSelect< + const { selectProps, query: queryResult } = useSelect< GetFieldsFromList >({ resource: "users", diff --git a/examples/app-crm/src/routes/scrumboard/sales/create.tsx b/examples/app-crm/src/routes/scrumboard/sales/create.tsx index 456095d193a6..c7e06bfd6ad6 100644 --- a/examples/app-crm/src/routes/scrumboard/sales/create.tsx +++ b/examples/app-crm/src/routes/scrumboard/sales/create.tsx @@ -79,7 +79,7 @@ export const SalesCreatePage: FC = ({ children }) => { } }, [searchParams]); - const { selectProps, queryResult } = useSelect< + const { selectProps, query: queryResult } = useSelect< GetFieldsFromList >({ resource: "companies", diff --git a/examples/app-crm/src/routes/scrumboard/sales/edit.tsx b/examples/app-crm/src/routes/scrumboard/sales/edit.tsx index 26bc644172b0..004d5f2daaf4 100644 --- a/examples/app-crm/src/routes/scrumboard/sales/edit.tsx +++ b/examples/app-crm/src/routes/scrumboard/sales/edit.tsx @@ -37,16 +37,14 @@ export const SalesEditPage = () => { }, }); - const { - selectProps: companySelectProps, - queryResult: companySelectQueryResult, - } = useSelect>({ - resource: "companies", - optionLabel: "name", - meta: { - gqlQuery: SALES_COMPANIES_SELECT_QUERY, - }, - }); + const { selectProps: companySelectProps, query: companySelectQueryResult } = + useSelect>({ + resource: "companies", + optionLabel: "name", + meta: { + gqlQuery: SALES_COMPANIES_SELECT_QUERY, + }, + }); const { selectProps: stageSelectProps } = useDealStagesSelect(); diff --git a/examples/customization-offlayout-area/src/components/sider/index.tsx b/examples/customization-offlayout-area/src/components/sider/index.tsx index 8adb0da4ec1b..6552cf16329f 100644 --- a/examples/customization-offlayout-area/src/components/sider/index.tsx +++ b/examples/customization-offlayout-area/src/components/sider/index.tsx @@ -126,7 +126,6 @@ export const FixedSider: React.FC = () => { > - { }, }); - const { selectProps: selectPropsCategory, queryResult: queryResultCategory } = + const { selectProps: selectPropsCategory, query: queryResultCategory } = useSelect({ resource: "category", optionLabel: "title", diff --git a/examples/finefoods-antd/src/components/product/list-table/index.tsx b/examples/finefoods-antd/src/components/product/list-table/index.tsx index 86133521f8e0..6ca66e735be6 100644 --- a/examples/finefoods-antd/src/components/product/list-table/index.tsx +++ b/examples/finefoods-antd/src/components/product/list-table/index.tsx @@ -62,7 +62,7 @@ export const ProductListTable = () => { }, }); - const { selectProps: categorySelectProps, queryResult } = + const { selectProps: categorySelectProps, query: queryResult } = useSelect({ resource: "categories", optionLabel: "title", diff --git a/examples/finefoods-antd/src/pages/couriers/list.tsx b/examples/finefoods-antd/src/pages/couriers/list.tsx index 1445ef2c21e3..10680c025cbe 100644 --- a/examples/finefoods-antd/src/pages/couriers/list.tsx +++ b/examples/finefoods-antd/src/pages/couriers/list.tsx @@ -221,8 +221,8 @@ export const CourierList = ({ children }: PropsWithChildren) => { {/* - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore */} + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore */} {(props: InputProps) => } diff --git a/examples/table-material-ui-advanced/src/pages/dataGrid/index.tsx b/examples/table-material-ui-advanced/src/pages/dataGrid/index.tsx index 9fffe08985f3..712b5a8c953d 100644 --- a/examples/table-material-ui-advanced/src/pages/dataGrid/index.tsx +++ b/examples/table-material-ui-advanced/src/pages/dataGrid/index.tsx @@ -17,7 +17,7 @@ export const BasicDataGrid: React.FC = () => { const { options, - queryResult: { isLoading }, + query: { isLoading }, } = useSelect({ resource: "categories", }); diff --git a/examples/table-material-ui-data-grid-pro/src/pages/posts/list.tsx b/examples/table-material-ui-data-grid-pro/src/pages/posts/list.tsx index 99376bbc129e..023c1112140c 100644 --- a/examples/table-material-ui-data-grid-pro/src/pages/posts/list.tsx +++ b/examples/table-material-ui-data-grid-pro/src/pages/posts/list.tsx @@ -40,7 +40,7 @@ export const PostList: React.FC = () => { const { options, - queryResult: { isLoading }, + query: { isLoading }, } = useSelect({ resource: "categories", hasPagination: false, diff --git a/examples/table-material-ui-use-data-grid/src/pages/posts/list.tsx b/examples/table-material-ui-use-data-grid/src/pages/posts/list.tsx index 0c743d1c4dd1..bde50a7be03a 100644 --- a/examples/table-material-ui-use-data-grid/src/pages/posts/list.tsx +++ b/examples/table-material-ui-use-data-grid/src/pages/posts/list.tsx @@ -33,7 +33,7 @@ export const PostList: React.FC = () => { const { options, - queryResult: { isLoading }, + query: { isLoading }, } = useSelect({ resource: "categories", }); diff --git a/examples/table-material-ui-use-delete-many/src/pages/posts/list.tsx b/examples/table-material-ui-use-delete-many/src/pages/posts/list.tsx index a49a059759e5..4d76acfeda3e 100644 --- a/examples/table-material-ui-use-delete-many/src/pages/posts/list.tsx +++ b/examples/table-material-ui-use-delete-many/src/pages/posts/list.tsx @@ -39,7 +39,7 @@ export const PostList: React.FC = () => { const { options, - queryResult: { isLoading }, + query: { isLoading }, } = useSelect({ resource: "categories", hasPagination: false, diff --git a/examples/table-material-ui-use-update-many/src/pages/posts/list.tsx b/examples/table-material-ui-use-update-many/src/pages/posts/list.tsx index 52908ef95d9e..261824093b80 100644 --- a/examples/table-material-ui-use-update-many/src/pages/posts/list.tsx +++ b/examples/table-material-ui-use-update-many/src/pages/posts/list.tsx @@ -42,7 +42,7 @@ export const PostList: React.FC = () => { const { options, - queryResult: { isLoading }, + query: { isLoading }, } = useSelect({ resource: "categories", }); diff --git a/packages/antd/src/hooks/fields/useCheckboxGroup/index.ts b/packages/antd/src/hooks/fields/useCheckboxGroup/index.ts index 0013aabf0ef2..521d3dc4f631 100644 --- a/packages/antd/src/hooks/fields/useCheckboxGroup/index.ts +++ b/packages/antd/src/hooks/fields/useCheckboxGroup/index.ts @@ -22,6 +22,10 @@ export type UseCheckboxGroupReturnType< > & { options: TOption[]; }; + query: QueryObserverResult>; + /** + * @deprecated Use `query` instead + */ queryResult: QueryObserverResult>; }; @@ -74,12 +78,7 @@ export const useCheckboxGroup = < TError, TData >): UseCheckboxGroupReturnType => { - const { queryResult, options } = useSelect< - TQueryFnData, - TError, - TData, - TOption - >({ + const { query, options } = useSelect({ resource, sort, sorters, @@ -103,6 +102,7 @@ export const useCheckboxGroup = < options, defaultValue, }, - queryResult, + query, + queryResult: query, }; }; diff --git a/packages/antd/src/hooks/fields/useRadioGroup/index.spec.ts b/packages/antd/src/hooks/fields/useRadioGroup/index.spec.ts index 527e871a6154..144ef10c8677 100644 --- a/packages/antd/src/hooks/fields/useRadioGroup/index.spec.ts +++ b/packages/antd/src/hooks/fields/useRadioGroup/index.spec.ts @@ -130,4 +130,22 @@ describe("render hook default options", () => { expect(mockFunc).toBeCalled(); }); + + it("should work with queryResult and query", async () => { + const { result } = renderHook( + () => + useRadioGroup({ + resource: "posts", + }), + { + wrapper: TestWrapper({}), + }, + ); + + await waitFor(() => { + expect(result.current.queryResult.isSuccess).toBeTruthy(); + }); + + expect(result.current.query).toEqual(result.current.queryResult); + }); }); diff --git a/packages/antd/src/hooks/fields/useRadioGroup/index.ts b/packages/antd/src/hooks/fields/useRadioGroup/index.ts index f7f02a16e2f3..3256f014d9cb 100644 --- a/packages/antd/src/hooks/fields/useRadioGroup/index.ts +++ b/packages/antd/src/hooks/fields/useRadioGroup/index.ts @@ -19,6 +19,10 @@ export type UseRadioGroupReturnType< radioGroupProps: Omit, "options"> & { options: TOption[]; }; + query: QueryObserverResult>; + /** + * @deprecated Use `query` instead + */ queryResult: QueryObserverResult>; }; @@ -70,12 +74,7 @@ export const useRadioGroup = < TData, TOption > => { - const { queryResult, options } = useSelect< - TQueryFnData, - TError, - TData, - TOption - >({ + const { query, options } = useSelect({ resource, sort, sorters, @@ -100,6 +99,7 @@ export const useRadioGroup = < options, defaultValue, }, - queryResult, + query, + queryResult: query, }; }; diff --git a/packages/antd/src/hooks/fields/useSelect/index.spec.ts b/packages/antd/src/hooks/fields/useSelect/index.spec.ts index e661b061462e..15b44f27ed10 100644 --- a/packages/antd/src/hooks/fields/useSelect/index.spec.ts +++ b/packages/antd/src/hooks/fields/useSelect/index.spec.ts @@ -347,4 +347,26 @@ describe("useSelect Hook", () => { ); expect(mockFunc).toBeCalled(); }); + + it("should work with queryResult and query", async () => { + const { result } = renderHook( + () => + useSelect({ + resource: "posts", + defaultValue: ["1", "2", "3", "4"], + }), + { + wrapper: TestWrapper({ + dataProvider: MockJSONServer, + resources: [{ name: "posts" }], + }), + }, + ); + + await waitFor(() => { + expect(result.current.queryResult.isSuccess).toBeTruthy(); + }); + + expect(result.current.query).toEqual(result.current.queryResult); + }); }); diff --git a/packages/antd/src/hooks/fields/useSelect/index.ts b/packages/antd/src/hooks/fields/useSelect/index.ts index 31fc8079ed41..927b7c2ec43e 100644 --- a/packages/antd/src/hooks/fields/useSelect/index.ts +++ b/packages/antd/src/hooks/fields/useSelect/index.ts @@ -16,7 +16,15 @@ export type UseSelectReturnType< TOption extends BaseOption = BaseOption, > = { selectProps: SelectProps; + query: QueryObserverResult>; + defaultValueQuery: QueryObserverResult>; + /** + * @deprecated Use `query` instead + */ queryResult: QueryObserverResult>; + /** + * @deprecated Use `defaultValueQuery` instead + */ defaultValueQueryResult: QueryObserverResult>; }; @@ -39,18 +47,24 @@ export const useSelect = < >( props: UseSelectProps, ): UseSelectReturnType => { - const { queryResult, defaultValueQueryResult, onSearch, options } = - useSelectCore(props); + const { query, defaultValueQuery, onSearch, options } = useSelectCore< + TQueryFnData, + TError, + TData, + TOption + >(props); return { selectProps: { options, onSearch, - loading: defaultValueQueryResult.isFetching, + loading: defaultValueQuery.isFetching, showSearch: true, filterOption: false, }, - queryResult, - defaultValueQueryResult, + query, + defaultValueQuery, + queryResult: query, + defaultValueQueryResult: defaultValueQuery, }; }; diff --git a/packages/codemod/src/index.ts b/packages/codemod/src/index.ts index 7178d3841552..eba6dc8d24a4 100644 --- a/packages/codemod/src/index.ts +++ b/packages/codemod/src/index.ts @@ -113,6 +113,10 @@ export function runTransform({ files, flags, transformer }) { } const TRANSFORMER_INQUIRER_CHOICES = [ + { + name: "Refactor[useSelect, useAutocomplete, useCheckboxGroup, useRadioGroup]: { queryResult, defaultValueQueryResult } to { query, defaultValueQuery }", + value: "use-select-query-result", + }, { name: "refine3-to-refine4: Transform from refine 3.x.x to at least 4.0.0", value: "refine3-to-refine4", diff --git a/packages/codemod/src/transformations/use-select-query-result.ts b/packages/codemod/src/transformations/use-select-query-result.ts new file mode 100644 index 000000000000..3c3cd24346d1 --- /dev/null +++ b/packages/codemod/src/transformations/use-select-query-result.ts @@ -0,0 +1,58 @@ +import type { API, FileInfo } from "jscodeshift"; + +// ```diff +// - const { queryResult, defaultValueQueryResult } = useSelect(); +// + const { query, defaultValueQuery } = useSelect(); +// ``` +export default function transformer(file: FileInfo, api: API): string { + const j = api.jscodeshift; + const source = j(file.source); + + const renameProperties = (prop) => { + // just a type guard + if ("shorthand" in prop && "key" in prop && "name" in prop.key) { + const renameMap = { + queryResult: "query", + defaultValueQueryResult: "defaultValueQuery", + }; + const newName = renameMap[prop.key.name]; + if (newName) { + prop.key.name = newName; + + if (prop.shorthand) { + prop.shorthand = false; + prop.value = j.identifier( + prop.key.name === "query" + ? "queryResult" + : "defaultValueQueryResult", + ); + } else { + if (prop.key.name === prop?.value?.name) { + prop.shorthand = true; + } + } + } + } + }; + + ["useSelect", "useAutocomplete", "useCheckboxGroup", "useRadioGroup"].forEach( + (hookName) => { + source + .find(j.VariableDeclarator, { + id: { type: "ObjectPattern" }, + init: { callee: { name: hookName } }, + }) + .forEach((path) => { + if ("properties" in path.node.id) { + path.node.id.properties.forEach((prop) => { + // just a type guard + if ("shorthand" in prop && "key" in prop && "name" in prop.key) { + renameProperties(prop); + } + }); + } + }); + }, + ); + return source.toSource(); +} diff --git a/packages/core/src/hooks/useSelect/index.spec.ts b/packages/core/src/hooks/useSelect/index.spec.ts index 2b20d167e6c8..20f47f6d89d3 100644 --- a/packages/core/src/hooks/useSelect/index.spec.ts +++ b/packages/core/src/hooks/useSelect/index.spec.ts @@ -1223,4 +1223,26 @@ describe("useSelect Hook", () => { expect(result.current.overtime.elapsedTime).toBeUndefined(); }); }); + + it("should work with queryResult and query", async () => { + const { result } = renderHook( + () => + useSelect({ + resource: "posts", + defaultValue: ["1", "2", "3", "4"], + }), + { + wrapper: TestWrapper({ + dataProvider: MockJSONServer, + resources: [{ name: "posts" }], + }), + }, + ); + + await waitFor(() => { + expect(result.current.queryResult.isSuccess).toBeTruthy(); + }); + + expect(result.current.query).toEqual(result.current.queryResult); + }); }); diff --git a/packages/core/src/hooks/useSelect/index.ts b/packages/core/src/hooks/useSelect/index.ts index 9a8933cee080..b9ee27f4c828 100644 --- a/packages/core/src/hooks/useSelect/index.ts +++ b/packages/core/src/hooks/useSelect/index.ts @@ -170,7 +170,15 @@ export type UseSelectReturnType< TError extends HttpError = HttpError, TOption extends BaseOption = BaseOption, > = { + query: QueryObserverResult, TError>; + defaultValueQuery: QueryObserverResult>; + /** + * @deprecated Use `query` instead + */ queryResult: QueryObserverResult, TError>; + /** + * @deprecated Use `defaultValueQuery` instead + */ defaultValueQueryResult: QueryObserverResult>; onSearch: (value: string) => void; options: TOption[]; @@ -395,6 +403,8 @@ export const useSelect = < return { queryResult, defaultValueQueryResult, + query: queryResult, + defaultValueQuery: defaultValueQueryResult, options: combinedOptions, onSearch, overtime: { elapsedTime }, diff --git a/packages/mantine/src/hooks/useSelect/index.ts b/packages/mantine/src/hooks/useSelect/index.ts index aee44da753d7..2134b008b575 100644 --- a/packages/mantine/src/hooks/useSelect/index.ts +++ b/packages/mantine/src/hooks/useSelect/index.ts @@ -21,7 +21,15 @@ export type UseSelectReturnType< data: TOption[]; } >; + query: QueryObserverResult>; + defaultValueQuery: QueryObserverResult>; + /** + * @deprecated Use `query` instead + */ queryResult: QueryObserverResult>; + /** + * @deprecated Use `defaultValueQuery` instead + */ defaultValueQueryResult: QueryObserverResult>; }; @@ -47,8 +55,12 @@ export const useSelect = < >( props: UseSelectProps, ): UseSelectReturnType => { - const { queryResult, defaultValueQueryResult, onSearch, options } = - useSelectCore(props); + const { query, defaultValueQuery, onSearch, options } = useSelectCore< + TQueryFnData, + TError, + TData, + TOption + >(props); return { selectProps: { @@ -58,7 +70,9 @@ export const useSelect = < filterDataOnExactSearchMatch: true, clearable: true, }, - queryResult, - defaultValueQueryResult, + query, + defaultValueQuery, + queryResult: query, + defaultValueQueryResult: defaultValueQuery, }; }; diff --git a/packages/mui/src/hooks/useAutocomplete/index.ts b/packages/mui/src/hooks/useAutocomplete/index.ts index 81fa8e55ee44..e9590518822b 100644 --- a/packages/mui/src/hooks/useAutocomplete/index.ts +++ b/packages/mui/src/hooks/useAutocomplete/index.ts @@ -55,24 +55,27 @@ export const useAutocomplete = < >( props: UseAutocompleteProps, ): UseAutocompleteReturnType => { - const { queryResult, defaultValueQueryResult, onSearch, overtime } = - useSelectCore(props); + const { query, defaultValueQuery, onSearch, overtime } = useSelectCore< + TQueryFnData, + TError, + TData + >(props); return { autocompleteProps: { options: props.selectedOptionsOrder === "selected-first" ? unionWith( - defaultValueQueryResult.data?.data || [], - queryResult.data?.data || [], + defaultValueQuery.data?.data || [], + query.data?.data || [], isEqual, ) : unionWith( - queryResult.data?.data || [], - defaultValueQueryResult.data?.data || [], + query.data?.data || [], + defaultValueQuery.data?.data || [], isEqual, ), - loading: queryResult.isFetching || defaultValueQueryResult.isFetching, + loading: query.isFetching || defaultValueQuery.isFetching, onInputChange: (event, value) => { if (event?.type === "change") { onSearch(value); @@ -83,8 +86,10 @@ export const useAutocomplete = < filterOptions: (x) => x, }, onSearch, - queryResult, - defaultValueQueryResult, + query, + defaultValueQuery, + queryResult: query, + defaultValueQueryResult: defaultValueQuery, overtime, }; };