diff --git a/documentation/blog/2023-08-12-react-admin-vs-refine.md b/documentation/blog/2023-08-12-react-admin-vs-refine.md index df89acd4960d..f29b501dd81d 100644 --- a/documentation/blog/2023-08-12-react-admin-vs-refine.md +++ b/documentation/blog/2023-08-12-react-admin-vs-refine.md @@ -790,7 +790,7 @@ This structure will let you show errors in the form fields with out of the box i React-admin also provides a similar feature but it does not have the i18n support out of the box. -Check out the [Server Side Validation](https://refine.dev/docs/advanced-tutorials/forms/server-side-form-validation/) documentation for more information about Refine's server side validation features. +Check out the [Server Side Validation](https://refine.dev/docs/guides-concepts/forms/#server-side-validation-) documentation for more information about Refine's server side validation features. ### Auto Save diff --git a/documentation/blog/2024-06-13-flexbox-vs-grid.md b/documentation/blog/2024-06-13-flexbox-vs-grid.md index 923e65f72f8b..7c4927e8bacb 100644 --- a/documentation/blog/2024-06-13-flexbox-vs-grid.md +++ b/documentation/blog/2024-06-13-flexbox-vs-grid.md @@ -270,7 +270,7 @@ Use grid: You should just ensure that the combination of both CSS Grid and Flexbox is not at the cost of web page loading or running performance. Grids can sometimes be complicated, requiring a bit more work from the rendering engine; when there are large layouts, it may take more time to render them. Flexbox should be faster than Grid for simple one-dimensional layouts. -### Optimisation Tips +### Optimization Tips The following will serve you to keep your web pages running smoothly: diff --git a/documentation/blog/2024-06-20-framer-motion.md b/documentation/blog/2024-06-20-framer-motion.md index 25d57cc06230..3b9af678975c 100644 --- a/documentation/blog/2024-06-20-framer-motion.md +++ b/documentation/blog/2024-06-20-framer-motion.md @@ -587,7 +587,7 @@ We may use the `useTransform` to define a new motion value called opacity. By sp #### Use cases of the useTransform hook. -An example is to utilise the `useTransform` hook to animate the background parameters of an element on hover. +An example is to utilize the `useTransform` hook to animate the background parameters of an element on hover. **Code:** diff --git a/documentation/blog/2024-07-05-turborepo.md b/documentation/blog/2024-07-05-turborepo.md index ce9b52073c3b..8ff8a59439de 100644 --- a/documentation/blog/2024-07-05-turborepo.md +++ b/documentation/blog/2024-07-05-turborepo.md @@ -198,7 +198,7 @@ jobs: Turborepo effectively integrates with package managers like npm, yarn, and pnpm, making it possible to manage dependencies in one centralized place. The add-on nature of Turborepo allows you to use the main features of your favorite package manager while using Turborepo's advanced features for task execution and caching. -1. **Setup**: Install dependencies using your favourite package manager. +1. **Setup**: Install dependencies using your favorite package manager. 2. **Configuration**: Configure Turborepo to understand and work with the package manager's lock file and workspace settings. diff --git a/documentation/blog/2024-08-05-react-unit-testing.md b/documentation/blog/2024-08-05-react-unit-testing.md index 4558e628277e..1dd577920ee1 100644 --- a/documentation/blog/2024-08-05-react-unit-testing.md +++ b/documentation/blog/2024-08-05-react-unit-testing.md @@ -741,7 +741,7 @@ test("button should have correct aria-label", () => { }); ``` -In this example we are using the aria-label attribute in order that the button is accessibly labelled. We then use the @testing-library/react getByLabelText to test that the button is accessible by its ARIA label. +In this example we are using the aria-label attribute in order that the button is accessibly labeled. We then use the @testing-library/react getByLabelText to test that the button is accessible by its ARIA label. ### Keyboard Navigation Testing diff --git a/documentation/blog/2024-08-09-react-uselayouteffect.md b/documentation/blog/2024-08-09-react-uselayouteffect.md index 36367f922c6d..70fe6f443f74 100644 --- a/documentation/blog/2024-08-09-react-uselayouteffect.md +++ b/documentation/blog/2024-08-09-react-uselayouteffect.md @@ -394,7 +394,7 @@ test("removes event listener on unmount", () => { ### Timers and Asynchronous Operations -If the `useLayoutEffect` depends on some async operation or running timers, then with the help of test utilities, such as Jest's fake timers, you are sure the behaviour is tested right. You will be able to manipulate time better and determine the side effects that should happen with that delay. +If the `useLayoutEffect` depends on some async operation or running timers, then with the help of test utilities, such as Jest's fake timers, you are sure the behavior is tested right. You will be able to manipulate time better and determine the side effects that should happen with that delay. ```tsx import React, { useLayoutEffect, useRef } from "react"; diff --git a/documentation/blog/2024-08-15-react-web-socket.md b/documentation/blog/2024-08-15-react-web-socket.md index 0f896b2351a5..fb290519d17f 100644 --- a/documentation/blog/2024-08-15-react-web-socket.md +++ b/documentation/blog/2024-08-15-react-web-socket.md @@ -336,7 +336,7 @@ I would like to briefly share my thoughts on security considerations while worki ### WSS: WebSocket Secure Connections -Please be sure to use secure websocket connections (wss://) not just plain websocket connections (ws://). This would be the equivalent of using HTTPS not HTTP. Secure websocket connections actually encrypt the data travelling between the two points and, for this reason, help secure it from being man-in-the-middled to abuse. +Please be sure to use secure websocket connections (wss://) not just plain websocket connections (ws://). This would be the equivalent of using HTTPS not HTTP. Secure websocket connections actually encrypt the data traveling between the two points and, for this reason, help secure it from being man-in-the-middled to abuse. ```tsx const ws = new WebSocket("wss://example.com/socket"); diff --git a/documentation/docs/data/data-provider/index.md b/documentation/docs/data/data-provider/index.md index 0a21a78db0a3..1ee9f34b50d0 100644 --- a/documentation/docs/data/data-provider/index.md +++ b/documentation/docs/data/data-provider/index.md @@ -178,7 +178,9 @@ You can either use the `dataProviderName` prop in data hooks and data-related co ```tsx useTable({ - dataProviderName: "example", + meta: { + dataProviderName: "example", + }, }); ``` @@ -241,6 +243,7 @@ The `getList` method is used to get a list of resources with sorting, filtering, Refine will consume this method using the [`useList`][use-list] or [`useInfiniteList`][use-infinite-list] data hook. #### Retrieving the Total Row Count + - Different data providers have specific ways to determine the total row count, and these are just some examples: - **Simple REST Providers:** The `x-total-count` header is commonly used to get the row count. - **GraphQL Providers:** The total count is often sourced from specific data fields, like `response.data.pageInfo.total`. @@ -266,6 +269,7 @@ getList: async ({ resource, pagination, sorters, filters, meta }) => { total, }; }; +``` :::tip diff --git a/documentation/docs/data/hooks/use-form/index.md b/documentation/docs/data/hooks/use-form/index.md index 5618864584de..5956b6d3d47f 100644 --- a/documentation/docs/data/hooks/use-form/index.md +++ b/documentation/docs/data/hooks/use-form/index.md @@ -233,7 +233,7 @@ useForm({ meta: { headers: { "x-greetings": "hello world" } } }); Meta data values to be used in the internal `useOne` call for the `edit` and `clone` actions. These values will take precedence over the `meta` values. ```tsx -useForm({ meta: { headers: { "x-greetings": "hello mars" } } }); +useForm({ queryMeta: { headers: { "x-greetings": "hello mars" } } }); ``` ### mutationMeta @@ -241,7 +241,7 @@ useForm({ meta: { headers: { "x-greetings": "hello mars" } } }); Meta data values to be used in the internal `useCreate` and `useUpdate` calls for form submissions. These values will take precedence over the `meta` values. ```tsx -useForm({ meta: { headers: { "x-greetings": "hello pluto" } } }); +useForm({ mutationMeta: { headers: { "x-greetings": "hello pluto" } } }); ``` ### queryOptions diff --git a/documentation/docs/data/hooks/use-invalidate/index.md b/documentation/docs/data/hooks/use-invalidate/index.md index ba7fe66c688b..2b5821bda164 100644 --- a/documentation/docs/data/hooks/use-invalidate/index.md +++ b/documentation/docs/data/hooks/use-invalidate/index.md @@ -111,13 +111,13 @@ By default settings, all the targeted queries are invalidated and the active one ### Invalidation Parameters -| Property | Description | Type | Default | -| -------------------------------- | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -| invalidated | The states you want to invalidate. | `all`, `resourceAll`, `list`, `many`, `detail`, `false` | | -| resource | Resource name for State invalidation. | `string` | | -| id | The `id` to use when invalidating the "detail" state. | [`BaseKey`](/docs/core/interface-references#basekey) | | -| dataProviderName | The name of the data provider whose state you want to invalidate. | `string` | `default` | -| invalidationFilters | The filters to use when picking queries to invalidate | [`InvalidateQueryFilters`](https://tanstack.com/query/latest/docs/react/reference/QueryClient#queryclientinvalidatequeries) | `{ type: "all", refetchType: "active" }` | -| invalidationOptions | The options to use in the invalidation process | [`InvalidateOptions`](https://tanstack.com/query/latest/docs/react/reference/QueryClient#queryclientinvalidatequeries) | `{ cancelRefetch: false }` | +| Property | Description | Type | Default | +| -------------------------------- | ----------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | +| invalidated | The states you want to invalidate. | `all`, `resourceAll`, `list`, `many`, `detail`, `false` | | +| resource | Resource name for State invalidation. | `string` | | +| id | The `id` to use when invalidating the "detail" state. | [`BaseKey`](/docs/core/interface-references#basekey) | | +| dataProviderName | The name of the data provider whose state you want to invalidate. | `string` | `default` | +| invalidationFilters | The filters to use when picking queries to invalidate | [`InvalidateQueryFilters`](https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientinvalidatequeries) | `{ type: "all", refetchType: "active" }` | +| invalidationOptions | The options to use in the invalidation process | [`InvalidateOptions`](https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientinvalidatequeries) | `{ cancelRefetch: false }` | [data-provider]: /docs/data/data-provider diff --git a/documentation/docs/data/hooks/use-show/_basic-usage-live-preview.md b/documentation/docs/data/hooks/use-show/_basic-usage-live-preview.md index 41d4317fa070..674cab544090 100644 --- a/documentation/docs/data/hooks/use-show/_basic-usage-live-preview.md +++ b/documentation/docs/data/hooks/use-show/_basic-usage-live-preview.md @@ -19,10 +19,10 @@ interface IProduct { const ProductShow: React.FC = () => { const { query } = useShow(); - const { data, isLoading, isError } = query; + const { data, isFetching, isError, refetch } = query; const product = data?.data; - if (isLoading) { + if (isFetching) { return
Loading...
; } @@ -36,6 +36,7 @@ const ProductShow: React.FC = () => {

id: {product?.id}

name: {product?.name}

material: {product?.material}

+ ); }; diff --git a/documentation/docs/data/packages/simple-rest/index.md b/documentation/docs/data/packages/simple-rest/index.md index f2f38d602713..d66d36e58638 100644 --- a/documentation/docs/data/packages/simple-rest/index.md +++ b/documentation/docs/data/packages/simple-rest/index.md @@ -123,7 +123,7 @@ In some cases, you may need to customize the data provider to work with a REST A const App = () => { return ( ); diff --git a/documentation/docs/data/packages/strapi-v4/index.md b/documentation/docs/data/packages/strapi-v4/index.md index 6bc00b7602c2..93297b3d6039 100644 --- a/documentation/docs/data/packages/strapi-v4/index.md +++ b/documentation/docs/data/packages/strapi-v4/index.md @@ -1204,7 +1204,7 @@ By default, `@refinedev/strapi-v4` transforms the error response from Strapi int Thus, `useForm` will automatically set the error message for each field that has a validation error. -[Refer to the server-side form validation documentation for more information → ](/docs/advanced-tutorials/forms/server-side-form-validation). +[Refer to the server-side form validation documentation for more information → ](/docs/guides-concepts/forms/#server-side-validation-). ## Example diff --git a/documentation/docs/examples/form/antd/serverSideFormValidation.md b/documentation/docs/examples/form/antd/serverSideFormValidation.md index 24d6bd0dcd3c..037f8973b851 100644 --- a/documentation/docs/examples/form/antd/serverSideFormValidation.md +++ b/documentation/docs/examples/form/antd/serverSideFormValidation.md @@ -8,7 +8,7 @@ You can handle server-side form validation errors out-of-the-box with [Ant Desig When `dataProvider` returns rejected promise with `errors` field, [`useForm`][react-hook-form-use-form] will automatically update the error state with the rejected `errors` field. -[Refer to the server-side Form Validation documentation for more information. →](/docs/advanced-tutorials/forms/server-side-form-validation/) +[Refer to the server-side Form Validation documentation for more information. →](/docs/guides-concepts/forms/#server-side-validation-) diff --git a/documentation/docs/examples/form/chakra-ui/serverSideFormValidation.md b/documentation/docs/examples/form/chakra-ui/serverSideFormValidation.md index 8e76456e65a8..58b52ae1204d 100644 --- a/documentation/docs/examples/form/chakra-ui/serverSideFormValidation.md +++ b/documentation/docs/examples/form/chakra-ui/serverSideFormValidation.md @@ -8,7 +8,7 @@ You can handle server-side form validation errors out-of-the-box with [React Hoo When `dataProvider` returns rejected promise with `errors` field, [`useForm`][react-hook-form-use-form] will automatically update the error state with the rejected `errors` field. -[Refer to the server-side Form Validation documentation for more information. →](/docs/advanced-tutorials/forms/server-side-form-validation/) +[Refer to the server-side Form Validation documentation for more information. →](/docs/guides-concepts/forms/#server-side-validation-) diff --git a/documentation/docs/examples/form/mantine/serverSideFormValidation.md b/documentation/docs/examples/form/mantine/serverSideFormValidation.md index 637d6b0b82d8..d0fe71e502d5 100644 --- a/documentation/docs/examples/form/mantine/serverSideFormValidation.md +++ b/documentation/docs/examples/form/mantine/serverSideFormValidation.md @@ -8,7 +8,7 @@ You can handle server-side form validation errors out-of-the-box with [Mantine u When `dataProvider` returns rejected promise with `errors` field, [`useForm`][react-hook-form-use-form] will automatically update the error state with the rejected `errors` field. -[Refer to the server-side Form Validation documentation for more information. →](/docs/advanced-tutorials/forms/server-side-form-validation/) +[Refer to the server-side Form Validation documentation for more information. →](/docs/guides-concepts/forms/#server-side-validation-) diff --git a/documentation/docs/examples/form/mui/serverSideFormValidation.md b/documentation/docs/examples/form/mui/serverSideFormValidation.md index 7756b5a25e4f..c0cd48b97465 100644 --- a/documentation/docs/examples/form/mui/serverSideFormValidation.md +++ b/documentation/docs/examples/form/mui/serverSideFormValidation.md @@ -8,7 +8,7 @@ You can handle server-side form validation errors out-of-the-box with [React Hoo When `dataProvider` returns rejected promise with `errors` field, [`useForm`][react-hook-form-use-form] will automatically update the error state with the rejected `errors` field. -[Refer to the server-side Form Validation documentation for more information. →](/docs/advanced-tutorials/forms/server-side-form-validation/) +[Refer to the server-side Form Validation documentation for more information. →](/docs/guides-concepts/forms/#server-side-validation-) diff --git a/documentation/docs/guides-concepts/data-fetching/index.md b/documentation/docs/guides-concepts/data-fetching/index.md index 0d995f096cd9..906f162c57f9 100644 --- a/documentation/docs/guides-concepts/data-fetching/index.md +++ b/documentation/docs/guides-concepts/data-fetching/index.md @@ -384,7 +384,7 @@ After obtaining the token, we'll use Axios interceptors to include the token in ## TanStack Query `QueryClient` -To modify the [`QueryClient`](https://tanstack.com/query/latest/docs/react/reference/QueryClient) instance, you can use the `reactQuery` prop of the [``](/docs/core/refine-component) component. +To modify the [`QueryClient`](https://tanstack.com/query/v4/docs/reference/QueryClient) instance, you can use the `reactQuery` prop of the [``](/docs/core/refine-component) component. ## `dataProvider` interface diff --git a/documentation/docs/guides-concepts/notifications/notifications-mui.tsx b/documentation/docs/guides-concepts/notifications/notifications-mui.tsx index def764acd9db..8205c407f419 100644 --- a/documentation/docs/guides-concepts/notifications/notifications-mui.tsx +++ b/documentation/docs/guides-concepts/notifications/notifications-mui.tsx @@ -14,7 +14,7 @@ export default function NotificationMui() { "@mui/lab": "^5.0.0-alpha.85", "@mui/material": "^5.14.2", "@mui/system": "latest", - "@refinedev/mui": "5.0.0", + "@refinedev/mui": "latest", }} startRoute="/" files={{ diff --git a/documentation/docs/notification/notification-provider/index.md b/documentation/docs/notification/notification-provider/index.md index 5e615700a6fc..c26a4e914c0d 100644 --- a/documentation/docs/notification/notification-provider/index.md +++ b/documentation/docs/notification/notification-provider/index.md @@ -51,7 +51,7 @@ const App = () => { return ( {/* ... */} @@ -139,7 +139,7 @@ import { useNotificationProvider } from "@refinedev/chakra-ui"; return ( ); ``` diff --git a/documentation/docs/packages/react-hook-form/use-form/index.md b/documentation/docs/packages/react-hook-form/use-form/index.md index f4339ff0c155..fe3b35154d98 100644 --- a/documentation/docs/packages/react-hook-form/use-form/index.md +++ b/documentation/docs/packages/react-hook-form/use-form/index.md @@ -1048,7 +1048,7 @@ const handleSubmit = async (e: React.FormEvent) => { `onFinish` is a function that is called when the form is submitted. It will call the appropriate mutation based on the `action` property. You can override the default behavior by passing an `onFinish` function in the hook's options. -For example you can [change values before sending to the API](/docs/packages/list-of-packages#how-can-i-change-the-form-data-before-submitting-it-to-the-api). +For example you can [change values before sending to the API](/docs/packages/react-hook-form/use-form/#how-can-i-change-the-form-data-before-submitting-it-to-the-api). ### saveButtonProps diff --git a/documentation/docs/routing/integrations/next-js/index.md b/documentation/docs/routing/integrations/next-js/index.md index 7ec3295a7d06..c8bd100179d8 100644 --- a/documentation/docs/routing/integrations/next-js/index.md +++ b/documentation/docs/routing/integrations/next-js/index.md @@ -668,7 +668,7 @@ First let's create our [AuthProvider](/docs/authentication/auth-provider) let's install the `nookies` packages in our project. - + We will set/destroy cookies in the `login`, `logout` and `check` functions of our `AuthProvider`. diff --git a/documentation/docs/ui-integrations/ant-design/hooks/use-modal-form/index.md b/documentation/docs/ui-integrations/ant-design/hooks/use-modal-form/index.md index d9c19c6fb048..32aecc5ec557 100644 --- a/documentation/docs/ui-integrations/ant-design/hooks/use-modal-form/index.md +++ b/documentation/docs/ui-integrations/ant-design/hooks/use-modal-form/index.md @@ -424,7 +424,7 @@ const modalForm = useModalForm({ Default values for the form. Use this to pre-populate the form with data that needs to be displayed. ```tsx -useForm({ +useModalForm({ defaultFormValues: { title: "Hello World", }, @@ -436,7 +436,7 @@ Also, it can be provided as an async function to fetch the default values. The l > 🚨 When `action` is "edit" or "clone" a race condition with `async defaultFormValues` may occur. In this case, the form values will be the result of the last completed operation. ```tsx -const { defaultFormValuesLoading } = useForm({ +const { defaultFormValuesLoading } = useModalForm({ defaultFormValues: async () => { const response = await fetch("https://my-api.com/posts/1"); const data = await response.json(); diff --git a/documentation/docs/ui-integrations/ant-design/hooks/use-radio-group/index.md b/documentation/docs/ui-integrations/ant-design/hooks/use-radio-group/index.md index 15daf7aa228d..62498058bc00 100644 --- a/documentation/docs/ui-integrations/ant-design/hooks/use-radio-group/index.md +++ b/documentation/docs/ui-integrations/ant-design/hooks/use-radio-group/index.md @@ -83,7 +83,7 @@ If you have multiple resources with the same name, you can pass the `identifier` ### defaultValue ```tsx -const { selectProps } = useRadioGroup({ +const { radioGroupProps } = useRadioGroup({ resource: "languages", // highlight-next-line defaultValue: 1, @@ -98,7 +98,7 @@ const { selectProps } = useRadioGroup({ - `"selected-first"`: sort `selectedOptions` at the top. ```tsx -const { selectProps } = useRadioGroup({ +const { radioGroupProps } = useRadioGroup({ resource: "languages", // highlight-next-line defaultValue: 1, @@ -212,7 +212,7 @@ const { radioGroupProps } = useRadioGroup({ `fetchSize` is the amount of records to fetch in checkboxes. ```tsx -const { selectProps } = useRadioGroup({ +const { radioGroupProps } = useRadioGroup({ resource: "languages", // highlight-next-line fetchSize: 20, @@ -243,7 +243,7 @@ const { radioGroupProps } = useRadioGroup({ For example, lets say that we have 1000 post records: ```ts -const { selectProps } = useRadioGroup({ +const { radioGroupProps } = useRadioGroup({ resource: "categories", // highlight-next-line pagination: { current: 3, pageSize: 8 }, diff --git a/documentation/docs/ui-integrations/mantine/hooks/use-form/index.md b/documentation/docs/ui-integrations/mantine/hooks/use-form/index.md index 552b1fa3e5fa..d29a64cd8d3a 100644 --- a/documentation/docs/ui-integrations/mantine/hooks/use-form/index.md +++ b/documentation/docs/ui-integrations/mantine/hooks/use-form/index.md @@ -1161,7 +1161,7 @@ You can use `meta` property to pass common values to the mutation and the query. ### How can I handle server-side form validation? -[Refer to the Server-Side form validation documentation for more information. →](/docs/advanced-tutorials/forms/server-side-form-validation/#example-with-mantine-useform) +[Refer to the Server-Side form validation documentation for more information. →](/docs/guides-concepts/forms/#server-side-validation-#example-with-mantine-useform) ## API Reference diff --git a/documentation/docs/ui-integrations/mantine/introduction/previews/auth-page.tsx b/documentation/docs/ui-integrations/mantine/introduction/previews/auth-page.tsx index 5e4aadc27722..e5ed88834d72 100644 --- a/documentation/docs/ui-integrations/mantine/introduction/previews/auth-page.tsx +++ b/documentation/docs/ui-integrations/mantine/introduction/previews/auth-page.tsx @@ -89,7 +89,7 @@ import { ErrorComponent, ThemedLayoutV2, RefineThemes, - notificationProvider, + useNotificationProvider, AuthPage } from "@refinedev/mantine"; import { NotificationsProvider } from "@mantine/notifications"; @@ -115,7 +115,7 @@ const App: React.FC = () => { { ]} > - }>}> + }>}> @@ -142,7 +142,7 @@ const App: React.FC = () => { } /> - }>}> + }>}> { { { {