`useGetOne`

This hook calls dataProvider.getOne() when the component mounts. It queries the data provider for a single record, based on its id.

Syntax

const { data, isPending, error, refetch } = useGetOne(
 resource,
 { id, meta },
 options
);

The meta argument is optional. It can be anything you want to pass to the data provider, e.g. a list of fields to show in the result.

The options parameter is optional, and is passed to react-query’s useQuery hook. It may contain the following options:

cacheTime
enabled
initialData
initialDataUpdatedAt
isDataEqual
keepPreviousData
meta
notifyOnChangeProps
notifyOnChangePropsExclusions
onError
onSettled
onSuccess
placeholderData
queryKeyHashFn
refetchInterval
refetchIntervalInBackground
refetchOnMount
refetchOnReconnect
refetchOnWindowFocus
retry
retryOnMount
retryDelay
select
staleTime
structuralSharing
suspense
useErrorBoundary

Check react-query’s useQuery hook documentation for details on each of these options.

The react-query query key for this hook is [resource, 'getOne', { id: String(id), meta }].

Usage

Call useGetOne in a component to query the data provider for a single record, based on its id.

import { useGetOne, useRecordContext } from 'react-admin';
const UserProfile = () => {
 const record = useRecordContext();
 const { data: user, isPending, error } = useGetOne('users', { id: record.userId });
 if (isPending) { return <Loading />; }
 if (error) { return <p>ERROR</p>; }
 return <div>User {user.username}</div>;
};

Aggregating `getOne` Calls

[フレーム]

If you use useGetOne several times on a page for the same resource, replace the useGetOne call by useGetManyAggregate, as it de-duplicates and aggregates queries for a single record into one batch query for many records.

-import { useGetOne, useRecordContext } from 'react-admin';
+import { useGetManyAggregate, useRecordContext } from 'react-admin';

const UserProfile = () => {
 const record = useRecordContext();
- const { data: user, isPending, error } = useGetOne('users', { id: record.userId });
+ const { data: users, isPending, error } = useGetManyAggregate('users', { ids: [record.userId] });
 if (isPending) { return <Loading />; }
 if (error) { return <p>ERROR</p>; }
- return <div>User {user.username}</div>;
+ return <div>User {users[0].username}</div>;
};

This results in less calls to the dataProvider. For instance, if the <UserProfile> component above is rendered in a [<DataTable>](./DataTable.md], it will only make one call to dataProvider.getMany() for the entire list instead of one call to dataProvider.getOne() per row.

As useGetManyAggregate is often used to fetch references, react-admin exposes a useReference hook, which avoids doing the array conversion manually. It’s an application hook rather than a data provider hook, so its syntax is a bit different. Prefer useReference to useGetManyAggregate when you use useGetOne to fetch a reference.

-import { useGetOne, useRecordContext } from 'react-admin';
+import { useReference, useRecordContext } from 'react-admin';

const UserProfile = () => {
 const record = useRecordContext();
- const { data: user, isPending, error } = useGetOne('users', { id: record.userId });
+ const { referenceRecord: user, isPending, error } = useReference({ reference: 'users', id: record.userId });
 if (isPending) { return <Loading />; }
 if (error) { return <p>ERROR</p>; }
 return <div>User {user.username}</div>;
};

Refreshing the Record

If you want to refresh the record, use the refetch function returned by the hook.

import { useGetOne } from 'react-admin';
const UserProfile = ({ userId }) => {
 const { data, isPending, error, refetch } = useGetOne('users', { id: userId });
 if (isPending) { return <Loading />; }
 if (error) { return <p>ERROR</p>; }
 return (
 <>
 <div>User {data.username}</div>
 <button onClick={() => refetch()}>Refresh</button>
 </>
 );
};

Live Updates

If you want to subscribe to live updates on the record (topic: resource/[resource]/[id]), use the useGetOneLive hook instead.

-import { useGetOne, useRecordContext } from 'react-admin';
+import { useRecordContext } from 'react-admin';
+import { useGetOneLive } from '@react-admin/ra-realtime';

const UserProfile = () => {
 const record = useRecordContext();
- const { data, isPending, error } = useGetOne('users', { id: record.userId });
+ const { data, isPending, error } = useGetOneLive('users', { id: record.userId });
 if (isPending) {
 return <Loading />;
 }
 if (error) {
 return <p>ERROR</p>;
 }
 return <div>User {data.username}</div>;
};

TypeScript

The useGetOne hook accepts a generic parameter for the record type:

import { useGetOne, useRecordContext } from 'react-admin';
type Ticket = {
 id: number;
 userId: string;
 message: string;
};
type User = {
 id: number;
 username: string;
}
const UserProfile = () => {
 const ticket = useRecordContext<Ticket>();
 const { data: user, isPending, error } = useGetOne<User>('users', { id: ticket.userId });
 if (isPending) { return <Loading />; }
 if (error) { return <p>ERROR</p>; }
 // TypeScript knows that user is of type User
 return <div>User {user.username}</div>;
};

useGetOne