update data-fecthing (end)

Author: slax57

docs_headless/src/content/docs/data-fetching/useCreate.md

@@ -1,11 +1,7 @@
 ---
-layout: default
 title: "useCreate"
-storybook_path: ra-core-dataprovider-usecreate-optimistic--success-case
 ---
 
-# `useCreate`
-
 This hook allows to call `dataProvider.create()` when the callback is executed.
 
 ## Syntax
@@ -34,7 +30,7 @@ So, should you pass the parameters when calling the hook, or when executing the
 
 ```tsx
 // set params when calling the hook
-import { useCreate, useRecordContext } from 'react-admin';
+import { useCreate, useRecordContext } from 'ra-core';
 
 const LikeButton = () => {
     const record = useRecordContext();
@@ -48,7 +44,7 @@ const LikeButton = () => {
 };
 
 // set params when calling the create callback
-import { useCreate, useRecordContext } from 'react-admin';
+import { useCreate, useRecordContext } from 'ra-core';
 
 const LikeButton = () => {
     const record = useRecordContext();
@@ -97,6 +93,8 @@ const LikeButton = () => {
 - `returnPromise`.
 
 ```tsx
+import { useNotify, useRedirect } from 'ra-core';
+
 const notify = useNotify();
 const redirect = useRedirect();
 
@@ -128,14 +126,13 @@ Additional options are passed to [React Query](https://tanstack.com/query/v5/)'s
 
 Check [the useMutation documentation](https://tanstack.com/query/v5/docs/react/reference/useMutation) for a detailed description of all options.
 
-**Tip**: In react-admin components that use `useCreate`, you can override the mutation options using the `mutationOptions` prop. This is very common when using mutation hooks like `useCreate`, e.g., to display a notification or redirect to another page.
+**Tip**: In ra-core components that use `useCreate`, you can override the mutation options using the `mutationOptions` prop. This is very common when using mutation hooks like `useCreate`, e.g., to display a notification or redirect to another page.
 
-For instance, here is a button using `<Create mutationOptions>` to notify the user of success using the bottom notification banner:
+For instance, here is a button using `<CreateBase mutationOptions>` to notify the user of success using the bottom notification banner:
 
-{% raw %}
 ```tsx
 import * as React from 'react';
-import { useNotify, useRedirect, Create, SimpleForm } from 'react-admin';
+import { useNotify, useRedirect, CreateBase, Form } from 'ra-core';
 
 const PostCreate = () => {
     const notify = useNotify();
@@ -147,15 +144,14 @@ const PostCreate = () => {
     };
 
     return (
-        <Create mutationOptions={{ onSuccess }}>
-            <SimpleForm>
+        <CreateBase mutationOptions={{ onSuccess }}>
+            <Form>
                 ...
-            </SimpleForm>
-        </Create>
+            </Form>
+        </CreateBase>
     );
 }
 ```
-{% endraw %}
 
 ## Return Value
 
@@ -240,6 +236,8 @@ See [Optimistic Rendering and Undo](./Actions.md#optimistic-rendering-and-undo)
 The `onError` callback is called when the mutation fails. It's the perfect place to display an error message to the user.
 
 ```jsx
+import { useCreate, useNotify } from 'ra-core';
+
 const notify = useNotify();
 const [create, { data, isPending, error }] = useCreate(
     'comments',
@@ -259,6 +257,8 @@ const [create, { data, isPending, error }] = useCreate(
 The `onSettled` callback is called at the end of the mutation, whether it succeeds or fails. It will receive either the `data` or the `error`.
 
 ```jsx
+import { useCreate, useNotify } from 'ra-core';
+
 const notify = useNotify();
 const [create, { data, isPending, error }] = useCreate(
     'comments',
@@ -278,6 +278,8 @@ const [create, { data, isPending, error }] = useCreate(
 The `onSuccess` callback is called when the mutation succeeds. It's the perfect place to display a notification or to redirect the user to another page.
 
 ```jsx
+import { useCreate, useNotify, useRedirect } from 'ra-core';
+
 const notify = useNotify();
 const redirect = useRedirect();
 const [create, { data, isPending, error }] = useCreate(
@@ -292,7 +294,7 @@ const [create, { data, isPending, error }] = useCreate(
 );
 ```
 
-In `pessimistic` mutation mode, `onSuccess` executes *after* the `dataProvider.create()` responds. React-admin passes the result of the `dataProvider.create()` call as the first argument to the `onSuccess` callback.
+In `pessimistic` mutation mode, `onSuccess` executes *after* the `dataProvider.create()` responds. Ra-core passes the result of the `dataProvider.create()` call as the first argument to the `onSuccess` callback.
 
 In `optimistic` mutation mode, `onSuccess` executes *before* the `dataProvider.create()` is called, without waiting for the response. The callback receives no argument.
 

docs_headless/src/content/docs/data-fetching/useDataProvider.md

@@ -1,12 +1,8 @@
 ---
-layout: default
 title: "useDataProvider"
-storybook_path: ra-core-dataprovider-usedataprovider--prefetching
 ---
 
-# `useDataProvider`
-
-React-admin stores the `dataProvider` object in a React context, so it's available from anywhere in your application code. The `useDataProvider` hook exposes the Data Provider to let you call it directly.
+Ra-core stores the `dataProvider` object in a React context, so it's available from anywhere in your application code. The `useDataProvider` hook exposes the Data Provider to let you call it directly.
 
 ## Syntax
 
@@ -34,7 +30,7 @@ Here is how to query the Data Provider for the current user profile:
 
 ```jsx
 import { useState, useEffect } from 'react';
-import { useDataProvider } from 'react-admin';
+import { useDataProvider } from 'ra-core';
 import { Loading, Error } from './MyComponents';
 
 const UserProfile = ({ userId }) => {
@@ -94,15 +90,15 @@ const dataProvider = {
 It is necessary to use `useDataProvider` in conjunction with React Query's `useMutation` to call this method when the user clicks on a button:
 
 ```jsx
-import { useDataProvider, Button } from 'react-admin';
+import { useDataProvider } from 'ra-core';
 import { useMutation } from '@tanstack/react-query';
 
 const BanUserButton = ({ userId }) => {
     const dataProvider = useDataProvider();
     const { mutate, isPending } = useMutation({
         mutationFn: () => dataProvider.banUser(userId)
     });
-    return <Button label="Ban" onClick={() => mutate()} disabled={isPending} />;
+    return <button onClick={() => mutate()} disabled={isPending}>Ban</button>;
 };
 ```
 
@@ -112,7 +108,7 @@ The `useDataProvider` hook accepts a generic parameter for the `dataProvider` ty
 
 ```tsx
 // In src/dataProvider.ts
-import { DataProvider } from 'react-admin';
+import { DataProvider } from 'ra-core';
 
 export interface DataProviderWithCustomMethods extends DataProvider {
     archive: (resource: string, params: {
@@ -128,24 +124,22 @@ export const dataProvider: DataProviderWithCustomMethods = {
 }
 
 // In src/ArchiveButton.tsx
-import { Button, useDataProvider } from 'react-admin';
-import ArchiveIcon from '@mui/icons-material/Archive';
+import { useDataProvider, useRecordContext } from 'ra-core';
 import { DataProviderWithCustomMethods } from './src/dataProvider';
 
 export const ArchiveButton = () => {
     const dataProvider = useDataProvider<DataProviderWithCustomMethods>();
-    const record = useRecord();
+    const record = useRecordContext();
 
     return (
-        <Button
-            label="Archive"
+        <button
             onClick={() => {
                 // TypeScript knows the archive method
                 dataProvider.archive('resource', { id: record.id })
             }}
         >
-            <ArchiveIcon />
-        </Button>
+            📁 Archive
+        </button>
     );
 };
 ```

docs_headless/src/content/docs/data-fetching/useDelete.md

@@ -1,11 +1,7 @@
 ---
-layout: default
 title: "useDelete"
-storybook_path: ra-core-dataprovider-usedelete-optimistic--success-case
 ---
 
-# `useDelete`
-
 This hook allows calling `dataProvider.delete()` when the callback is executed and deleting a single record based on its `id`.
 
 ## Syntax
@@ -34,7 +30,7 @@ So, should you pass the parameters when calling the hook, or when executing the
 
 ```jsx
 // set params when calling the hook
-import { useDelete, useRecordContext } from 'react-admin';
+import { useDelete, useRecordContext } from 'ra-core';
 
 const DeleteButton = () => {
     const record = useRecordContext();
@@ -50,7 +46,7 @@ const DeleteButton = () => {
 };
 
 // set params when calling the deleteOne callback
-import { useDelete, useRecordContext } from 'react-admin';
+import { useDelete, useRecordContext } from 'ra-core';
 
 const DeleteButton = () => {
     const record = useRecordContext();

docs_headless/src/content/docs/data-fetching/useDeleteMany.md

@@ -1,10 +1,7 @@
 ---
-layout: default
 title: "useDeleteMany"
 ---
 
-# `useDeleteMany`
-
 This hook allows to call `dataProvider.deleteMany()` when the callback is executed, and delete an array of records based on their `ids`.
 
 ## Syntax
@@ -33,7 +30,7 @@ So, should you pass the parameters when calling the hook, or when executing the
 
 ```jsx
 // set params when calling the hook
-import { useListContext, useDeleteMany } from 'react-admin';
+import { useListContext, useDeleteMany } from 'ra-core';
 
 const BulkDeletePostsButton = () => {
     const { selectedIds } = useListContext();
@@ -49,7 +46,7 @@ const BulkDeletePostsButton = () => {
 };
 
 // set params when calling the deleteMany callback
-import { useListContext, useDeleteMany } from 'react-admin';
+import { useListContext, useDeleteMany } from 'ra-core';
 
 const BulkDeletePostsButton = () => {
     const { selectedIds } = useListContext();