Ra Core

https://marmelab.com/ra-core/
Admin
Ra Core is a headless Single-Page Application framework for React, offering battle-tested hooks and...
Tokens:275,798
Snippets:2,616
Trust Score:9.9
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install JSON Server Data Provider

Source: https://marmelab.com/ra-core/getting-started

Install the JSON Server data provider for use in examples.

```bash
npm install ra-data-json-server
```

--------------------------------

### Complete CoreAdmin Configuration

Source: https://marmelab.com/ra-core/coreadmin

This example shows a more comprehensive CoreAdmin setup including data, auth, and i18n providers, layout, dashboard, and login page.

```javascript
// in src/App.js
import { CoreAdmin, Resource, CustomRoutes } from 'ra-core';
import { Route } from "react-router-dom";


import { dataProvider, authProvider, i18nProvider } from './providers';
import { Layout } from './layout';
import { Dashboard } from './dashboard';
import { Login } from './login';
import { CustomerList, CustomerEdit } from './customers';
import { OrderList, OrderEdit } from './orders';
import { InvoiceList, InvoiceEdit } from './invoices';
import { ProductList, ProductEdit, ProductCreate } from './products';
import { CategoryList, CategoryEdit, CategoryCreate } from './categories';
import { ReviewList } from './reviews';
import { Segments } from './segments';


const App = () => (
    <CoreAdmin
        dataProvider={dataProvider}
        authProvider={authProvider}
        i18nProvider={i18nProvider}
        layout={Layout}
        dashboard={Dashboard}
        loginPage={Login}
    >
        <Resource name="customers" list={CustomerList} edit={CustomerEdit} />
        <Resource name="orders" list={OrderList} edit={OrderEdit} options={{ label: 'Orders' }} />
        <Resource name="invoices" list={InvoiceList} edit={InvoiceEdit} />
        <Resource name="products" list={ProductList} edit={ProductEdit} create={ProductCreate} />
        <Resource name="categories" list={CategoryList} edit={CategoryEdit} create={CategoryCreate} />
        <Resource name="reviews" list={ReviewList} />
        <CustomRoutes>
            <Route path="/segments" element={<Segments />} />
        </CustomRoutes>
    </CoreAdmin>
);


```

--------------------------------

### Basic React Admin Core App Setup

Source: https://marmelab.com/ra-core/getting-started

Configure a minimal React Admin Core application with a JSON Server data provider and a basic resource definition. This example demonstrates setting up the core admin component and a simple post resource.

```typescript
// in src/App.tsx
import React from 'react';
import {
  CoreAdmin,
  Resource,
  ListBase,
  useListContext,
  ReferenceFieldBase,
  useRecordContext
} from 'ra-core';
import jsonServerProvider from 'ra-data-json-server';


// Simple TextField component to display user names
const UserNameField = () => {
    const record = useRecordContext();
    return <span>{record?.name}</span>;
};


// Simple HTML-based List component
const PostList = () => (
    <ListBase>
        <PostListView />
    </ListBase>
);


const PostListView = () => {
    const { data, isLoading } = useListContext();


    if (isLoading || !data) return <div>Loading...</div>;


    return (
        <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
            <h1 style={{ marginBottom: '20px' }}>Posts</h1>
            <table style={{
                width: '100%',
                borderCollapse: 'collapse',
                border: '1px solid #ccc',
                borderRadius: '8px',
                overflow: 'hidden'
            }}>
                <thead style={{ backgroundColor: 'rgba(0, 0, 0, 0.05)' }}>
                    <tr>
                        <th style={{
                            padding: '12px',
                            textAlign: 'left',
                            borderBottom: '2px solid #ccc',
                            fontWeight: 'bold'
                        }}>ID</th>
                        <th style={{
                            padding: '12px',
                            textAlign: 'left',
                            borderBottom: '2px solid #ccc',
                            fontWeight: 'bold'
                        }}>Title</th>
                        <th style={{
                            padding: '12px',
                            textAlign: 'left',
                            borderBottom: '2px solid #ccc',
                            fontWeight: 'bold'
                        }}>Author</th>
                    </tr>
                </thead>
                <tbody>
                    {data.map(record => (
                        <tr key={record.id}>
                            <td style={{ padding: '8px 16px', borderBottom: '1px solid #ddd' }}>
                                {record.id}
                            </td>
                            <td style={{ padding: '8px 16px', borderBottom: '1px solid #ddd' }}>
                                {record.title}
                            </td>
                            <td style={{ padding: '8px 16px', borderBottom: '1px solid #ddd' }}>
                                <ReferenceFieldBase
                                    source="userId"
                                    reference="users"
                                    record={record}
                                >
                                    <UserNameField />
                                </ReferenceFieldBase>
                            </td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
};


const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');


const App = () => (
    <CoreAdmin dataProvider={dataProvider}>
        <Resource name="posts" list={PostList} />
    </CoreAdmin>
);


export default App;

```

--------------------------------

### Basic List Rendering with ListBase

Source: https://marmelab.com/ra-core/listbase

Demonstrates a basic list rendering setup using ListBase and a custom child component. This example will fail on initial load if not handled.

```jsx
import { ListBase, useListContext } from 'ra-core';


const SimpleBookList = () => {
    const { data } = useListContext();
    return (
        <ul>
            {data.map(book => (
                <li key={book.id}>
                    <i>{book.title}</i>, by {book.author} ({book.year})
                </li>
            ))}
        </ul>
    );
}


const BookList = () => (
    <ListBase>
        <SimpleBookList />
    </ListBase>
);
```

--------------------------------

### Basic Infinite List with Custom UI

Source: https://marmelab.com/ra-core/infinitelistbase

This example demonstrates the minimal setup for InfiniteListBase to display a list of books with infinite scroll. It includes custom components for rendering the table and a 'Load more' button.

```javascript
// in src/books.js
import { InfiniteListBase, useListContext, useInfinitePaginationContext } from 'ra-core';


const BookTable = () => {
    const { data, isPending } = useListContext();


    if (isPending) {
        return <div>Loading...</div>;
    }


    return (
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Title</th>
                    <th>Author</th>
                </tr>
            </thead>
            <tbody>
                {data.map(book => (
                    <tr key={book.id}>
                        <td>{book.id}</td>
                        <td>{book.title}</td>
                        <td>{book.author}</td>
                    </tr>
                ))}
            </tbody>
        </table>
    );
};


const InfinitePagination = () => {
    const { hasNextPage, fetchNextPage, isFetchingNextPage } = useInfinitePaginationContext();


    if (!hasNextPage) {
        return null;
    }


    return (
        <div style={{ textAlign: 'center', margin: '1rem' }}>
            <button
                disabled={isFetchingNextPage}
                onClick={() => fetchNextPage()}
            >
                {isFetchingNextPage ? 'Loading...' : 'Load more'}
            </button>
        </div>
    );
};


export const BookList = () => (
    <InfiniteListBase>
        <div>
            <h1>Books</h1>
            <BookTable />
            <InfinitePagination />
        </div>
    </InfiniteListBase>
);


// in src/App.js
import { CoreAdmin, Resource } from 'ra-core';
import jsonServerProvider from 'ra-data-json-server';


import { BookList } from './books';


const App = () => (
    <CoreAdmin dataProvider={jsonServerProvider('https://jsonplaceholder.typicode.com')}> 
        <Resource name="books" list={BookList} />
    </CoreAdmin>
);


export default App;

```

--------------------------------

### Install ListLiveUpdate

Source: https://marmelab.com/ra-core/listliveupdate

Install the Enterprise Edition package for ListLiveUpdate.

```bash
npm install @react-admin/ra-core-ee
# or
yarn add @react-admin/ra-core-ee
```

--------------------------------

### Install Simple REST Data Provider

Source: https://marmelab.com/ra-core/dataproviders

Install the `ra-data-simple-rest` package using yarn.

```bash
yarn add ra-data-simple-rest
```

--------------------------------

### Get Permissions From Roles Example

Source: https://marmelab.com/ra-core/getpermissionsfromroles

Demonstrates how to use `getPermissionsFromRoles` with static role definitions and user roles/permissions. The resulting permissions array can be used with `canAccessWithPermissions`.

```javascript
import { getPermissionsFromRoles } from '@react-admin/ra-core-ee';


// static role definitions (usually in the app code)
const roleDefinitions = {
    admin: [
        { action: '*', resource: '*' },
    ],
    reader: [
        { action: ['list', 'show', 'export'], resource: '*' },
        { action: 'read', resource: 'posts.*' },
        { action: 'read', resource: 'comments.*' },
    ],
    accounting: [
        { action: '*', resource: 'sales' },
    ],
};


const permissions = getPermissionsFromRoles({
    roleDefinitions,
    // roles of the current user (usually returned by the server upon login)
    userRoles: ['reader'],
    // extra permissions for the current user (usually usually returned by the server upon login)
    userPermissions: [
        { action: 'list', resource: 'sales'},
    ],
});
// permissions = [
//  { action: ['list', 'show', 'export'], resource: '*' },
//  { action: 'read', resource: 'posts.*' },
//  { action: 'read', resource: 'comments.*' },
//  { action: 'list', resource: 'sales' },
// ];
```

--------------------------------

### Basic CoreAdmin Setup

Source: https://marmelab.com/ra-core/coreadmin

A minimal CoreAdmin configuration requires a dataProvider and at least one Resource.

```javascript
// in src/App.js
import { CoreAdmin, Resource } from 'ra-core';
import simpleRestProvider from 'ra-data-simple-rest';


import { PostList } from './posts';


const App = () => (
    <CoreAdmin dataProvider={simpleRestProvider('http://path.to.my.api')}> 
        <Resource name="posts" list={PostList} />
    </CoreAdmin>
);


export default App;
```

--------------------------------

### Redirecting to Different Views

Source: https://marmelab.com/ra-core/useredirect

Examples demonstrating redirection to list, edit, and create views for a 'posts' resource. The edit view example includes passing a record ID.

```javascript
// redirect to the post list page
redirect('list', 'posts');
// redirect to the edit page of a post:
redirect('edit', 'posts', 1);
// redirect to the post creation page:
redirect('create', 'posts');
```

--------------------------------

### Install ra-core

Source: https://marmelab.com/ra-core/getting-started

Install the ra-core package using npm or yarn.

```bash
npm install ra-core
# or
yarn add ra-core
```

--------------------------------

### Install Offline Support Packages

Source: https://marmelab.com/ra-core/dataproviders

Install the necessary react-query packages for offline support. These packages enable data persistence and offline functionality.

```bash
yarn add @tanstack/react-query-persist-client @tanstack/query-async-storage-persister

```

--------------------------------

### Example authProvider with Local Storage Permissions

Source: https://marmelab.com/ra-core/permissions

An example implementation of an `authProvider` that stores user permissions in local storage after login and uses them to check access. This approach aims for fast access control by fetching permissions once on login.

```javascript
const authProvider = {
    async login({ username, password }) {
        // ...
        const permissions = await fetchPermissions();
        // permissions look like
        // ['posts', 'comments', 'users']
        localStorage.setItem('permissions', JSON.stringify(permissions));
    },
    async logout() {
        // ...
        localStorage.removeItem('permissions');
    },
    async canAccess({ resource }) {
        const permissions = JSON.parse(localStorage.getItem('permissions'));
        return permissions.some(p => p.resource === resource);
    },
};
```

--------------------------------

### Install ra-core-ee

Source: https://marmelab.com/ra-core/usegetlistdeleted

Installs the Enterprise Edition of ra-core, which is required for the useGetListDeleted hook.

```bash
npm install --save @react-admin/ra-core-ee
# or
yarn add @react-admin/ra-core-ee

```

--------------------------------

### useDeleteMany with Parameters at Hook Initialization

Source: https://marmelab.com/ra-core/usedeletemany

Example of setting parameters (resource and ids) when calling the useDeleteMany hook.

```javascript
import { useListContext, useDeleteMany } from 'ra-core';


const BulkDeletePostsButton = () => {
    const { selectedIds } = useListContext();
    const [deleteMany, { isPending, error }] = useDeleteMany(
        'posts',
        { ids: selectedIds }
    );
    const handleClick = () => {
        deleteMany()
    }
    if (error) { return <p>ERROR</p>; }
    return <button disabled={isPending} onClick={handleClick}>Delete selected posts</button>;
};

```

--------------------------------

### Basic useRefresh Example

Source: https://marmelab.com/ra-core/userefresh

Demonstrates how to use the useRefresh hook to create a button that forces a data refetch.

```javascript
import { useRefresh } from 'ra-core';


const RefreshButton = () => {
    const refresh = useRefresh();
    const handleClick = () => {
        refresh();
    }
    return <button onClick={handleClick}>Refresh</button>;
};
```

--------------------------------

### Advanced Lifecycle Callbacks Example

Source: https://marmelab.com/ra-core/withlifecyclecallbacks

This example demonstrates multiple callbacks including `afterRead`, `afterSave`, and `beforeDelete` for a 'posts' resource, showing data transformation and related record updates.

```javascript
const dataProvider = withLifecycleCallbacks(
  jsonServerProvider("http://localhost:3000"),
  [
    {
      resource: "posts",
      afterRead: async (data, dataProvider) => {
        // rename field to the record
        data.user_id = data.userId;
        return data;
      },
      // executed after create, update and updateMany
      afterSave: async (record, dataProvider) => {
        // update the author's nb_posts
        const { total } = await dataProvider.getList("users", {
          filter: { id: record.user_id },
          pagination: { page: 1, perPage: 1 },
        });
        await dataProvider.update("users", {
          id: user.id,
          data: { nb_posts: total },
          previousData: user,
        });
        return record;
      },
      beforeDelete: async (params, dataProvider) => {
        // delete all comments linked to the post
        const { data: comments } = await dataProvider.getManyReference(
          "comments",
          {
            target: "post_id",
            id: params.id,
          }
        );
        if (comments.length > 0) {
          await dataProvider.deleteMany("comments", {
            ids: comments.map((comment) => comment.id),
          });
        }
        // update the author's nb_posts
        const { data: post } = await dataProvider.getOne("posts", {
          id: params.id,
        });
        const { total } = await dataProvider.getList("users", {
          filter: { id: post.user_id },
          pagination: { page: 1, perPage: 1 },
        });
        await dataProvider.update("users", {
          id: user.id,
          data: { nb_posts: total - 1 },
          previousData: user,
        });
        return params;
      },
    },
  ]
);

```

--------------------------------

### Install React Admin Core Data Provider

Source: https://marmelab.com/ra-core/getting-started

Install the JSON Server data provider for React Admin Core. This is typically the first step in setting up your data layer.

```bash
yarn add ra-data-json-server
```

--------------------------------

### getList Method Interface and Example

Source: https://marmelab.com/ra-core/dataproviderwriting

Defines the parameters and expected response for the `getList` method, used to fetch a list of records with pagination, sorting, and filtering. Includes an example of fetching posts.

```typescript
interface GetListParams {
    pagination: { page: number, perPage: number };
    sort: { field: string, order: 'ASC' | 'DESC' };
    filter: any;
    meta?: any; // request metadata
    signal?: AbortSignal;
}
interface GetListResult {
    data: Record[];
    total?: number;
    // if using partial pagination
    pageInfo?: {
        hasNextPage?: boolean;
        hasPreviousPage?: boolean;
    };
    meta?: any; // response metadata
}
function getList(resource: string, params: GetListParams): Promise<GetListResult>
```

```javascript
// find the first 5 posts whose author_id is 12, sorted by title
dataProvider.getList('posts', {
    pagination: { page: 1, perPage: 5 },
    sort: { field: 'title', order: 'ASC' },
    filter: { author_id: 12 },
})
.then(response => console.log(response));
// {
//     data: [
//         { id: 126, title: "allo?", author_id: 12 },
//         { id: 127, title: "bien le bonjour", author_id: 12 },
//         { id: 124, title: "good day sunshine", author_id: 12 },
//         { id: 123, title: "hello, world", author_id: 12 },
//         { id: 125, title: "howdy partner", author_id: 12 },
//     ],
//     total: 27,
//     meta: {
//         facets: [
//             { name: "published", count: 12 },
//             { name: "draft", count: 15 },
//         ],
//     },
// }
```

--------------------------------

### TypeScript Example for Custom Headers

Source: https://marmelab.com/ra-core/fetchjson

A typed example for TypeScript users demonstrating how to add custom headers to requests using fetchJson. It ensures proper type handling for headers.

```typescript
import { fetchUtils } from 'ra-core';


const httpClient = (url: string, options: fetchUtils.Options = {}) => {
    const customHeaders = (options.headers ||
        new Headers({
            Accept: 'application/json',
        })) as Headers;
    // add your own headers here
    customHeaders.set('X-Custom-Header', 'foobar');
    options.headers = customHeaders;
    return fetchUtils.fetchJson(url, options);
}

```

--------------------------------

### Undoable Mutation Example with useUpdate

Source: https://marmelab.com/ra-core/actions

This example shows how to implement an 'undoable' mutation. It updates the UI immediately and provides a delay with an 'undo' option before calling the data provider. Note the specific handling for notifications and side effects in undoable mode.

```javascript
import * as React from 'react';
import { useUpdate, useNotify, useRedirect, useRecordContext } from 'ra-core';


const ApproveButton = () => {
    const record = useRecordContext();
    const notify = useNotify();
    const redirect = useRedirect();
    const [approve, { isPending }] = useUpdate(
        'comments',
        { id: record.id, data: { isApproved: true } }
        {
           mutationMode: 'undoable',
           onSuccess: (data) => {
           onSuccess: () => {
                redirect('/comments');
               notify('Comment approved');
               notify('Comment approved', { undoable: true });
            },
            onError: (error) => notify(`Error: ${error.message}`, { type: 'error' }),
        }
    );
    return <button onClick={() => approve()} disabled={isPending}>
        {isPending ? 'Approving...' : 'Approve'}
    </button>;
};


```

--------------------------------

### JSON Server GET Request for Embedded Data

Source: https://marmelab.com/ra-core/dataproviderwriting

Example of a GET request to a JSON Server API to embed related data, using the `_embed` query parameter.

```http
GET /posts/123?_embed=author

```

--------------------------------

### GraphQL Query for getList

Source: https://marmelab.com/ra-core/dataproviderwriting

Example GraphQL query for fetching a list of resources with sorting, pagination, and filtering.

```graphql
query {
    posts(limit: 4, offset: 0, order_by: { title: 'asc' }, where: { author_id: { _eq: 12 } }) {
        id
        title
        body
        author_id
        created_at
    }
    posts_aggregate(where: where: { author_id: { _eq: 12 } }) {
        aggregate {
            count
        }
    }
}
```

--------------------------------

### Get One Record Example

Source: https://marmelab.com/ra-core/datafetchingguide

Demonstrates how ra-core calls `dataProvider.getOne()` to fetch a single record. The response contains the requested data.

```javascript
const response = await dataProvider.getOne('posts', { id: 123 });
console.log(response.data); // { id: 123, title: "hello, world" }
```

--------------------------------

### Internationalization Provider Setup

Source: https://marmelab.com/ra-core/coreadmin

Configure internationalization for your application by providing an `i18nProvider` to the CoreAdmin component. This example sets the UI language to French.

```javascript
// in src/i18nProvider.js
import polyglotI18nProvider from 'ra-i18n-polyglot';
import fr from 'ra-language-french';


export const i18nProvider = polyglotI18nProvider(() => fr, 'fr');


// in src/App.js
import { i18nProvider } from './i18nProvider';


const App = () => (
    <CoreAdmin
        dataProvider={dataProvider}
        i18nProvider={i18nProvider}
    >
        {/* ... */}
    </CoreAdmin>
);
```

--------------------------------

### REST Data Provider HTTP Request Example

Source: https://marmelab.com/ra-core/architecture

This example shows the HTTP GET request generated by the REST data provider for fetching a list of posts, including query parameters for sorting, range, and filtering. It also shows the expected HTTP response.

```http
GET http://path.to.my.api/posts?sort=["title","ASC"]&range=[0, 4]&filter={"author_id":12}


HTTP/1.1 200 OK
Content-Type: application/json
Content-Range: posts 0-4/27
[
    { id: 452, title: "Harry Potter Cast: Where Now?", author_id: 12 },
    { id: 384, title: "Hermione: A Feminist Icon", author_id: 12 },
    { id: 496, title: "Marauder's Map Mysteries", author_id: 12 },
    { id: 123, title: "Real-World Roots of Wizard Spells", author_id: 12 },
    { id: 189, title: "Your True Hogwarts House Quiz", author_id: 12 },
]
```

--------------------------------

### Example with onCreate Callback for Author Creation

Source: https://marmelab.com/ra-core/usesupportcreatesuggestion

Illustrates how to use the onCreate callback within useSupportCreateSuggestion to create new author options. It shows setting up state for filter and value, defining the onCreate logic to call an API, and integrating the hook's utilities into a select component.

```javascript
import { useSupportCreateSuggestion } from 'ra-core';
import { useState } from 'react';


const AuthorInput = () => {
    const [value, setValue] = useState('');
    const [filter, setFilter] = useState('');


    const {
        getCreateItem,
        handleChange,
        getOptionDisabled,
    } = useSupportCreateSuggestion({
        filter,
        handleChange: (eventOrValue) => {
          setValue(eventOrValue?.target?.value ?? eventOrValue?.id);
        },
        onCreate: async (authorName) => {
            // Call your API to create a new author
            return await createNewAuthor(authorName);
        },
        createItemLabel: 'Create author "%{item}"',
    });


    const createItem = getCreateItem(filter);
    const options = [
        ...existingAuthors,
        createItem,
    ];


    return (
        <div>
            <input
                type="text"
                placeholder="Search authors..."
                value={filter}
                onChange={(e) => setFilter(e.target.value)}
            />
            <select value={value} onChange={handleChange}>
                {options.map(option => (
                    <option
                        key={option.id}
                        value={option.id}
                        disabled={getOptionDisabled(option)}
                    >
                        {option.name}
                    </option>
                ))}
            </select>
        </div>
    );
};
```

--------------------------------

### Supabase Replication Setup (SQL)

Source: https://marmelab.com/ra-core/realtimefeatures

Configures Supabase publications for real-time replication. This involves dropping and recreating the publication, then adding specific tables.

```sql
begin;


-- remove the supabase_realtime publication
drop
  publication if exists supabase_realtime;


-- re-create the supabase_realtime publication with no tables
create publication supabase_realtime;


commit;


-- add a table to the publication
alter
  publication supabase_realtime add table sales;
alter
  publication supabase_realtime add table contacts;
alter
  publication supabase_realtime add table contactNotes;

```

--------------------------------

### Show Controller with Authentication and Access Control

Source: https://marmelab.com/ra-core/useshowcontroller

This example demonstrates how to use `useShowController` with explicit `id` and `resource` props, including handling loading and error states. It also shows how access control is checked.

```jsx
import { useShowController } from 'ra-core';
import { TextField } from './TextField';


const PostShow = ({ id }) => {
  const { isPending, error, data } = useShowController({ resource: 'posts', id })
  if (error) return <div>Error!</div>;
  if (isPending) return <div>Loading...</div>;
  return (
      <div>
        <TextField source="title" />
        <TextField source="author" />
        <TextField source="published_at" />
      </div>
  );
}

```

--------------------------------

### Basic Post List with useListController

Source: https://marmelab.com/ra-core/uselistcontroller

A simple example of using useListController to fetch and display a list of posts. It handles loading and error states.

```javascript
import { useListController } from 'ra-core';
import { SimpleList } from './SimpleList';


const PostList = () => {
  const { isPending, error, data, total } = useListController({ resource: 'posts'})
  if (error) return <div>Error!</div>;
  return (
      <SimpleList
        data={data}
        total={total}
        isPending={isPending}
        primaryText="%{title}"
      />
  );
}

```

--------------------------------

### Using FilterLiveForm with Input Components

Source: https://marmelab.com/ra-core/filterliveform

Example demonstrating how to use FilterLiveForm with TextInput and ReferenceInputBase components. This setup is typically used within a ListBase component to manage filters for a list view.

```jsx
import * as React from 'react';
import {
    FilterLiveForm,
    ListBase,
    ReferenceFieldBase,
    ReferenceInputBase,
    useListContext,
} from 'ra-core';
import { TextInput } from './TextInput';
import { AutocompleteInput } from './AutocompleteInput';


const BookListAside = () => (
    <div style={{ marginRight: '1rem', marginTop: '3rem', width: '250px' }}>
        <div>
            <div>
                <h4>Title</h4>
                <FilterLiveForm>
                    <TextInput source="title" />
                </FilterLiveForm>
            </div>
            <div>
                <h4>Author</h4>
                <FilterLiveForm>
                    <ReferenceInputBase source="authorId" reference="authors">
                        <AutocompleteInput />
                    </ReferenceInputBase>
                </FilterLiveForm>
            </div>
        </div>
    </div>
);


const BookTable = () => {
    const { data } = useListContext();


    return (
        <table>
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Author</th>
                    <th>Year</th>
                </tr>
            </thead>
            <tbody>
                {data.map(record => (
                    <tr key={record.id}>
                        <td>{record.title}</td>
                        <td>
                            <ReferenceFieldBase
                                source="authorId"
                                reference="authors"
                                render={({ record: author }) => author?.name || record.authorId}
                            />
                        </td>
                        <td>{record.year}</td>
                    </tr>
                ))}
            </tbody>
        </table>
    );
};


export const BookList = () => (
    <ListBase>
        <div style={{ display: 'flex' }}>
            <BookListAside />
            <BookTable />
        </div>
    </ListBase>
);
```

--------------------------------

### Loading States in useGetOne

Source: https://marmelab.com/ra-core/actions

Demonstrates the basic usage of `useGetOne` hook and its loading states. Use `isPending` to determine if a loading indicator is necessary.

```javascript
const { data, isPending, isFetching, isLoading } = useGetOne('users', { id: record.id });
```

--------------------------------

### Link Two Inputs with useWatch

Source: https://marmelab.com/ra-core/form

Demonstrates linking two inputs, such as country and city, where the city choices depend on the selected country. This example uses `useWatch` from react-hook-form to get the current form values.

```javascript
import * as React from 'react';
import { EditBase, Form } from 'ra-core';
import { SelectInput } from './SelectInput';
import { useWatch } from 'react-hook-form';


const countries = ['USA', 'UK', 'France'];
const cities = {
    USA: ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Phoenix'],
    UK: ['London', 'Birmingham', 'Glasgow', 'Liverpool', 'Bristol'],
    France: ['Paris', 'Marseille', 'Lyon', 'Toulouse', 'Nice'],
};
const toChoices = items => items.map(item => ({ id: item, name: item }));


const CityInput = () => {
    const country = useWatch({ name: 'country' });
    return (
        <SelectInput
            choices={country ? toChoices(cities[country]) : []}
            source="cities"
        />
    );
};


const OrderEdit = () => (
    <EditBase>
        <Form>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', padding: '1rem' }}>
                <SelectInput source="country" choices={toChoices(countries)} />
                <CityInput />
            </div>
        </Form>
    </EditBase>
);


export default OrderEdit;
```

--------------------------------

### Access Nested Resource ID with useParams

Source: https://marmelab.com/ra-core/resource

In a nested detail component, use `useParams` to retrieve both the parent resource ID and the specific nested resource ID. This example gets `id` and `songId` to edit a song.

```jsx
// in src/SongDetail.jsx
import { EditBase, Form } from 'ra-core';
import { useParams } from 'react-router-dom';
import { TextInput } from './TextInput';
import { DateInput } from './DateInput';


export const SongDetail = () => {
    const { id, songId } = useParams();
    return (
        <EditBase resource="songs" id={songId} redirect={`/artists/${id}/songs`}>
            <div>
                <h1>Edit Song</h1>
                <Form>
                    <TextInput source="title" />
                    <DateInput source="released" />
                    <TextInput source="writer" />
                    <TextInput source="producer" />
                    <TextInput source="recordCompany" label="Label" />
                    <button type="submit">Save</button>
                </Form>
            </div>
        </EditBase>
    );
};

```

--------------------------------

### useStore Example: Managing List Density

Source: https://marmelab.com/ra-core/usestore

Demonstrates how to use useStore to manage a 'density' setting for a list component. Changes made by one component (ChangeDensity) will automatically update other components (PostList) that read the same store key.

```javascript
import { ListBase } from 'ra-core';


const PostList = () => {
    const [density] = useStore('posts.list.density', 'small');


    return (
        <ListBase>
            <div style={{ padding: density === 'small' ? '0.5em' : '1em' }}>
                ...
            </div>
        </ListBase>
    );
}


// anywhere else in the app
import { useStore } from 'ra-core';


const ChangeDensity = () => {
    const [density, setDensity] = useStore('posts.list.density', 'small');


    // Clicking on this button will trigger a rerender of the PostList
    const changeDensity = () => {
        setDensity(density === 'small' ? 'medium' : 'small');
    };


    return (
        <button onClick={changeDensity}>
            Change density (current {density})
        </button>
    );
};
```

--------------------------------

### Linking to a Sub-Route from a Parent List

Source: https://marmelab.com/ra-core/resource

This example illustrates how to create a link from a parent resource's list item to a sub-route. It uses useRecordContext to get the current record's ID and constructs the URL dynamically.

```jsx
// in src/AuthorList.jsx
import { useRecordContext, ListBase, RecordsIterator } from 'ra-core';
import { Link } from 'react-router-dom';


const BooksButton = () => {
    const record = useRecordContext();
    return (
        <Link to={`/authors/${record.id}/books`}>
            Books
        </Link>
    );
};


export const AuthorList = () => (
    <ListBase>
        <div>
            <h1>Authors</h1>
            <RecordsIterator
                render={author => (
                    <div key={author.id} style={{ padding: '1rem', border: '1px solid #ddd', margin: '0.5rem' }}>
                        <span>{author.firstName} {author.lastName}</span>
                        <BooksButton />
                    </div>
                )} 
            />
        </div>
    </ListBase>
);
```

--------------------------------

### Auth0 Auth Provider Example

Source: https://marmelab.com/ra-core/authentication

A sample authProvider implementation for Auth0, demonstrating login, authentication checks, callback handling, and logout.

```javascript
import { Auth0Client } from './Auth0Client';


export const authProvider = {
    async login() { /* This function will not be called */ },
    async checkAuth() {
        const isAuthenticated = await Auth0Client.isAuthenticated();
        if (isAuthenticated) {
            return;
        }
        // not authenticated: redirect the user to the Auth0 service,
        // where they will be redirected back to the app after login
        Auth0Client.loginWithRedirect({
            authorizationParams: {
                redirect_uri: `${window.location.origin}/auth-callback`,
            },
        });
    },
    // A user logged successfully on the Auth0 service
    // and was redirected back to the /auth-callback route on the app
    async handleCallback() {
        const query = window.location.search;
        if (query.includes('code=') && query.includes('state=')) {
            try {
                // get an access token based on the query paramaters
                await Auth0Client.handleRedirectCallback();
                return;
            } catch (error) {
                console.log('error', error);
                throw error;
            }
        }
        throw new Error('Failed to handle login callback.');
    },
    async logout() {
        const isAuthenticated = await client.isAuthenticated();
            // need to check for this as ra-core calls logout in case checkAuth failed
        if (isAuthenticated) {
            return Auth0Client.logout({
                returnTo: window.location.origin,
            });
        }
    },
    ...
};
```

--------------------------------

### Create Post Form with Default Settings

Source: https://marmelab.com/ra-core/createbase

A basic `CreateBase` setup for creating posts, relying on default resource and authentication settings.

```javascript
import { CreateBase, Form } from 'ra-core';
import { TextInput } from './TextInput';


// Resource name is "posts"
const PostCreate = () => (
    <CreateBase>
        <Form>
            <TextInput source="title" />
            <TextInput source="author" />
            <TextInput source="published_at" />
        </Form>
    </CreateBase>
);

```

--------------------------------

### React Admin GraphQL Data Provider with Apollo Client

Source: https://marmelab.com/ra-core/dataproviderwriting

Example implementation of a React Admin Data Provider using Apollo Client to interact with a GraphQL API. Includes setup for Apollo Client and basic data provider methods.

```javascript
import { ApolloClient, InMemoryCache, gql } from "@apollo/client";
import { omit } from "lodash";


const apiUrl = 'https://my.api.com/v1/graphql';


const client = new ApolloClient({
  uri: apiUrl,
  headers: { "x-graphql-token": "YYY" },
  cache: new InMemoryCache(),
  defaultOptions: {
    watchQuery: {
      fetchPolicy: 'no-cache',
      errorPolicy: 'ignore',
    },
    query: {
      fetchPolicy: 'no-cache',
      errorPolicy: 'all',
    },
  }
});


const fields = {
  posts: "id title body author_id created_at",
  authors: "id name"
};


export const dataProvider = {
  getList: (resource, { sort, pagination, filter, signal }) => {
    const { field, order } = sort;
    const { page, perPage } = pagination;
    return client
      .query({
        query: gql`
            query ($limit: Int, $offset: Int, $order_by: [${resource}_order_by!], $where: ${resource}_bool_exp) {
                ${resource}(limit: $limit, offset: $offset, order_by: $order_by, where: $where) {
                    ${fields[resource]}
                }
                ${resource}_aggregate(where: $where) {
                    aggregate {
                        count
                    }
                }
            }`,
        variables: {
          limit: perPage,
          offset: (page - 1) * perPage,
          order_by: { [field]: order.toLowerCase() },
          where: Object.keys(filter).reduce(
            (prev, key) => ({
              ...prev,
              [key]: { _eq: filter[key] },
            }),
            {}
          ),
        },
        context: {
            fetchOptions: {
                signal,
            },
        },
      })
      .then((result) => ({ 
        data: result.data[resource],
        total: result.data[`${resource}_aggregate`].aggregate.count,
      }));
  },
  getOne: (resource, params) => {
    return client
      .query({
        query: gql`
            query ($id: Int!) {
                ${resource}_by_pk(id: $id) {
                    ${fields[resource]}
                }
            }`,
        variables: {
          id: params.id,
        },
        context: {
            fetchOptions: {
                signal: params.signal,
            },
        },
      })
      .then((result) => ({ data: result.data[`${resource}_by_pk`] }));
  },
  getMany: (resource, params) => {
    return client
      .query({
        query: gql`
            query ($where: ${resource}_bool_exp) {
                ${resource}(where: $where) {
                    ${fields[resource]}
                }
            }`,
        variables: {
          where: {
            id: { _in: params.ids },
          },
        },
        context: {

```

--------------------------------

### Get Input Name with getSource

Source: https://marmelab.com/ra-core/usesourcecontext

This example shows how to use the getSource function from useSourceContext to retrieve the fully qualified name of an input field within a form. This is essential when you need to reference an input programmatically, especially within dynamic contexts like arrays.

```jsx
export function MyCustomInput({ source }: MyCustomInputProps) {
    const sourceContext = useSourceContext();
    const name = sourceContext.getSource(source);


    return /* ... */;
}


export type MyCustomInputProps = {
    source: string;
};

```

--------------------------------

### useDelete Usage Example

Source: https://marmelab.com/ra-core/usedelete

Demonstrates how to use the useDelete hook, showing two common patterns: setting parameters when calling the hook, and setting parameters when calling the delete callback.

```APIDOC
## Usage Examples

### Example 1: Set params when calling the hook
```javascript
import { useDelete, useRecordContext } from 'ra-core';

const DeleteButton = () => {
    const record = useRecordContext();
    const [deleteOne, { isPending, error }] = useDelete(
        'likes',
        { id: record.id, previousData: record }
    );

    const handleClick = () => {
        deleteOne();
    }

    if (error) { return <p>ERROR</p>; }
    return <button disabled={isPending} onClick={handleClick}>Delete</button>;
};
```

### Example 2: Set params when calling the deleteOne callback
```javascript
import { useDelete, useRecordContext } from 'ra-core';

const DeleteButton = () => {
    const record = useRecordContext();
    const [deleteOne, { isPending, error }] = useDelete();

    const handleClick = () => {
        deleteOne(
            'likes',
            { id: record.id , previousData: record }
        );
    }

    if (error) { return <p>ERROR</p>; }
    return <button disabled={isPending} onClick={handleClick}>Delete</button>;
};
```
```

--------------------------------

### Per-Field Validation Example

Source: https://marmelab.com/ra-core/features

Demonstrates per-field validation using various built-in validators like required, minLength, maxLength, number, minValue, maxValue, regex, email, and choices. This setup is ideal for enforcing specific data constraints on individual form fields.

```javascript
import {
    CreateBase,
    Form,
    required,
    minLength,
    maxLength,
    minValue,
    maxValue,
    number,
    regex,
    email,
    choices
} from 'ra-core';
import { TextInput, SelectInput } from './Inputs';


const validateFirstName = [required(), minLength(2), maxLength(15)];
const validateEmail = email();
const validateAge = [number(), minValue(18)];
const validateZipCode = regex(/^\d{5}$/, 'Must be a valid Zip Code');
const validateGender = choices(['m', 'f', 'nc'], 'Please choose one of the values');


export const UserCreate = () => (
    <CreateBase>
        <Form>
            <TextInput label="First Name" source="firstName" validate={validateFirstName} />
            <TextInput label="Email" source="email" validate={validateEmail} />
            <TextInput label="Age" source="age" validate={validateAge}/>
            <TextInput label="Zip Code" source="zip" validate={validateZipCode}/>
            <SelectInput label="Gender" source="gender" choices={[ 
                { id: 'm', name: 'Male' },
                { id: 'f', name: 'Female' },
                { id: 'nc', name: 'Prefer not say' },
            ]} validate={validateGender}/>
        </Form>
    </CreateBase>
);
```

--------------------------------

### Using onSettled for Logging in RA-Core

Source: https://marmelab.com/ra-core/actions

Shows how to use the onSettled callback with useGetOne to log the data and error status of a query, regardless of its success or failure. This is useful for monitoring data provider calls.

```javascript
import { useGetOne, useRecordContext } from 'ra-core';


const Loading = () => <div>Loading...</div>;


const UserProfile = () => {
    const record = useRecordContext();
    const { data, isPending, error } = useGetOne(
        'users',
        { id: record.id },
        { onSettled: (data, error) => console.log(data, error) }
    );
    if (isPending) { return <Loading />; }
    if (error) { return <p>ERROR</p>; }
    return <div>User {data.username}</div>;
};
```

--------------------------------

### Supabase Realtime DataProvider Setup

Source: https://marmelab.com/ra-core/realtimefeatures

Augments a base dataProvider with real-time methods using Supabase. Requires Supabase URL, API key, and a Supabase client.

```javascript
import {
    addRealTimeMethodsBasedOnSupabase,
    ListLiveUpdate,
} from '@react-admin/ra-core-ee';
import { supabaseDataProvider } from 'ra-supabase';
import { createClient } from '@supabase/supabase-js';
import { CoreAdmin, Resource, ListBase } from 'ra-core';


const supabaseClient = createClient(
    process.env.SUPABASE_URL,
    process.env.SUPABASE_ANON_KEY,
);


const dataProvider = supabaseDataProvider({
    instanceUrl: process.env.SUPABASE_URL,
    apiKey: process.env.SUPABASE_ANON_KEY,
    supabaseClient,
});


const realTimeDataProvider = addRealTimeMethodsBasedOnSupabase({
    dataProvider,
    supabaseClient,
});


export const App = () => {
    return (
        <CoreAdmin dataProvider={realTimeDataProvider}>
            <Resource name="sales" list={SaleList} />
        </CoreAdmin>
    );
};


const SaleList = () => (
    <List>
        {/* List view */}
        <ListLiveUpdate />
    </List>
);

```

--------------------------------

### Basic Filter Object Example

Source: https://marmelab.com/ra-core/filteringtutorial

An example of a simple filter object for equality checks.

```json
{
  commentable: true,
  q: "lorem "
}
```

--------------------------------

### Defining Routes with Resource and CustomRoutes

Source: https://marmelab.com/ra-core/architecture

This example demonstrates how to set up routes in a Ra-core application using `<Resource>` for CRUD operations and `<CustomRoutes>` for custom paths. It requires importing necessary components from 'ra-core' and 'react-router-dom'.

```jsx
import { CoreAdmin, Resource, CustomRoutes } from 'ra-core';
import { Route } from 'react-router-dom';


export const App = () => (
    <CoreAdmin dataProvider={dataProvider}>
        <Resource name="labels" list={LabelList} edit={LabelEdit} show={LabelShow} />
        <Resource label="genres" list={GenreList} />
        <Resource name="artists" list={ArtistList} edit={ArtistDetail} create={ArtistCreate}>
            <Route path=":id/songs" element={<SongList />} />
            <Route path=":id/songs/:songId" element={<SongDetail />} />
        </Resource>
        <CustomRoutes>
            <Route path="/profile" element={<Profile />} />
            <Route path="/organization" element={<Organization />} />
        </CustomRoutes>
    </CoreAdmin>
);
```

--------------------------------

### Setting up ReferenceInputBase with Custom Selector

Source: https://marmelab.com/ra-core/usechoicescontext

This example demonstrates how to set up `ReferenceInputBase` to use a custom selector component like `CompanySelector`. It shows the basic structure for creating a form with a reference input.

```javascript
import {
    CreateBase,
    ReferenceInputBase,
    Form,
    TextInput,
} from 'ra-core';
import { CompanySelector } from './CompanySelector';


export const EmployeeCreate = () => (
    <CreateBase>
        <Form>
            <ReferenceInputBase source="company_id" reference="companies">
                <CompanySelector />
            </ReferenceInputBase>
            <TextInput source="body" />
        </Form>
    </CreateBase>
)
```

--------------------------------

### HTTP Cache Example Response

Source: https://marmelab.com/ra-core/caching

An example of an HTTP response with cache headers that Ra-core can utilize.

```http
HTTP/1.1 200 OK
Content-Type: application/json;charset=utf-8
Cache-Control: max-age=120
Age: 0
{
    "id": 123,
    "title": "Hello, world"
}
```

--------------------------------

### GET Request for Single Item

Source: https://marmelab.com/ra-core/dataproviderwriting

Illustrates the GET request for retrieving a single resource by its ID.

```http
GET http://path.to.my.api/posts/123


HTTP/1.1 200 OK
Content-Type: application/json
{ "id": 123, "title": "hello, world", "author_id": 12 }
```
Tokens:
Raw