Skip to content

Commit

Permalink
Merge pull request #9779 from marmelab/update-rasearch-doc
Browse files Browse the repository at this point in the history 
[Doc] Update `ra-search` doc for `<Search>` and `<SearchWithResult>` to introduce `queryOptions`
  • Loading branch information
@fzaninotto
fzaninotto authored Apr 16, 2024
2 parents a7f4ca4 + e362c3e commit aa00a69
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 14 deletions.
27 changes: 20 additions & 7 deletions docs/Search.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,13 +161,14 @@ export const App = () => (

The `<Search>` component accepts the following props:

| Prop | Required | Type | Default | Description |
| ------------- | -------- | --------- | ---------------------- | -------------------------------------------------------------------------------------------------- |
| `children` | Optional | `Element` | `<SearchResultsPanel>` | A component that will display the results. |
| `color` | Optional | `string` | `light` | The color mode for the input, applying light or dark backgrounds. Accept either `light` or `dark`. |
| `historySize` | Optional | `number` | 5 | The number of past queries to keep in history. |
| `options` | Optional | `Object` | - | An object containing options to apply to the search. |
| `wait` | Optional | `number` | 500 | The delay of debounce for the search to launch after typing in ms. |
| Prop | Required | Type | Default | Description |
| -------------- | -------- | --------------------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------- |
| `children` | Optional | `Element` | `<SearchResultsPanel>` | A component that will display the results. |
| `color` | Optional | `string` | `light` | The color mode for the input, applying light or dark backgrounds. Accept either `light` or `dark`. |
| `historySize` | Optional | `number` | 5 | The number of past queries to keep in history. |
| `options` | Optional | `Object` | - | An object containing options to apply to the search. |
| `queryOptions` | Optional | [`UseQuery Options`](https://tanstack.com/query/v3/docs/react/reference/useQuery) | - | `react-query` options for the search query |
| `wait` | Optional | `number` | 500 | The delay of debounce for the search to launch after typing in ms. |

Additional props are passed down to the Material UI [`<TextField>`](https://mui.com/material-ui/react-text-field/) component.

Expand Down Expand Up @@ -238,6 +239,18 @@ An object containing options to apply to the search:
```
{% endraw %}

## `queryOptions`

`<Search>` accepts a [`queryOptions` prop](https://tanstack.com/query/v3/docs/framework/react/reference/useQuery) to pass options to the react-query client.
This can be useful e.g. to override the default side effects such as `onSuccess` or `onError`.


{% raw %}
```tsx
<Search queryOptions={{ onSuccess: data => console.log(data) }} />
```
{% endraw %}

## `wait`

The number of milliseconds to wait before processing the search request, immediately after the user enters their last character.
Expand Down
27 changes: 20 additions & 7 deletions docs/SearchWithResult.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,13 +102,14 @@ Check [the `ra-search` documentation](https://react-admin-ee.marmelab.com/docume

## Props

| Prop | Required | Type | Default | Description |
| ------------ | -------- | ---------- | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| `children` | Optional | `Element` | `<SearchResultsPanel>` | A component that will display the results. |
| `color` | Optional | `string` | The opposite of theme mode. If mode is `light` default is `dark` and vice versa | The color mode for the input, applying light or dark backgrounds. Accept either `light` or `dark`. |
| `onNavigate` | Optional | `function` | `() => undefined` | A callback function to run when the user navigate to a result. |
| `options` | Optional | `Object` | - | An object containing options to apply to the search. |
| `wait` | Optional | `number` | 500 | The delay of debounce for the search to launch after typing in ms. |
| Prop | Required | Type | Default | Description |
| ------------ | -------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| `children` | Optional | `Element` | `<SearchResultsPanel>` | A component that will display the results. |
| `color` | Optional | `string` | The opposite of theme mode. If mode is `light` default is `dark` and vice versa | The color mode for the input, applying light or dark backgrounds. Accept either `light` or `dark`. |
| `onNavigate` | Optional | `function` | `() => undefined` | A callback function to run when the user navigate to a result. |
| `options` | Optional | `Object` | - | An object containing options to apply to the search. |
| `queryOptions` | Optional | [`UseQuery Options`](https://tanstack.com/query/v3/docs/react/reference/useQuery) | - | `react-query` options for the search query |
| `wait` | Optional | `number` | 500 | The delay of debounce for the search to launch after typing in ms. |

## `children`

Expand Down Expand Up @@ -187,6 +188,18 @@ An object containing options to apply to the search:
```
{% endraw %}

## `queryOptions`

`<SearchWithResult>` accepts a [`queryOptions` prop](https://tanstack.com/query/v3/docs/framework/react/reference/useQuery) to pass options to the react-query client.
This can be useful e.g. to override the default side effects such as `onSuccess` or `onError`.


{% raw %}
```tsx
<SearchWithResult queryOptions={{ onSuccess: data => console.log(data) }} />
```
{% endraw %}

## `wait`

The number of milliseconds to wait before processing the search request, immediately after the user enters their last character.
Expand Down

0 comments on commit aa00a69

Please sign in to comment.