`useGetMany`

This hook calls dataProvider.getMany() when the component mounts. It queries the data provider for several records, based on an array of ids.

Syntax

const { data, isPending, error, refetch } = useGetMany(
 resource,
 { ids, meta },
 options
);

Usage

import { useGetMany, useRecordContext } from 'react-admin';
const PostTags = () => {
 const record = useRecordContext();
 const { data, isPending, error } = useGetMany(
 'tags',
 { ids: record.tagIds }
 );
 if (isPending) { return <Loading />; }
 if (error) { return <p>ERROR</p>; }
 return (
 <ul>
 {data.map(tag => (
 <li key={tag.id}>{tag.name}</li>
 ))}
 </ul>
 );
};

useGetMany deduplicates and aggregates the calls made for a given resource during a render pass. This means that if a page makes several calls to useGetMany for a given resource, react-admin will only call the dataProvider.getMany() once.

// three calls to useGetMany on the same resource
useGetMany('tags', { ids: [1, 2, 3] });
useGetMany('tags', { ids: [3, 4, 5] });
useGetMany('tags', { ids: [5, 6, 7] });
// will result in a single call to the dataProvider
dataProvider.getMany('tags', { ids: [1, 2, 3, 4, 5, 6, 7] });

React-admin uses useGetMany in the <ReferenceField> component, to overcome the n+1 problem when using this component in a list.

TypeScript

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

import { useGetMany, useRecordContext } from 'react-admin';
type Post = {
 id: number;
 title: string;
 tagIds: number[];
};
type Tag = {
 id: number;
 name: string;
}
const PostTags = () => {
 const post = useRecordContext<Post>();
 const { data: tags, isPending, error } = useGetMany<Tag>(
 'tags',
 { ids: post.tagIds }
 );
 if (isPending) { return <Loading />; }
 if (error) { return <p>ERROR</p>; }
 return (
 <ul>
 {/* TypeScript knows that tags is of type Tag[] */}
 {tags.map(tag => (
 <li key={tag.id}>{tag.name}</li>
 ))}
 </ul>
 );
};