useShow hook allows you to fetch a single record. It uses getOne method as query function from the dataProvider.
Usage
import { useShow } from "@refinedev/core";
const { query, result, showId, setShowId } = useShow({
resource: "posts",
id: "1",
});
Props
Resource name for API data interactions.Default: Reads :resource from the URL
Data item ID for API data interactions.Default: Reads :id from the URL
Additional meta data to pass to the data provider’s getOne.
Target data provider name for API call to be made.Default: "default"
successNotification
OpenNotificationParams | false
Notification configuration for successful queries.
errorNotification
OpenNotificationParams | false
Notification configuration for failed queries.
liveMode
'auto' | 'manual' | 'off'
Whether to update data automatically or manually if a related live event is received.
onLiveEvent
(event: LiveEvent) => void
Callback to handle live events.
Additional params to pass to liveProvider’s subscribe method.
Loading overtime configuration.Interval in milliseconds.
overtimeOptions.onInterval
(elapsedTime: number) => void
Callback to handle interval events.
Return Values
query
QueryObserverResult<GetOneResponse<TData>, TError>
Result of the react-query’s useQuery.const { query } = useShow({ resource: "posts", id: "1" });
console.log(query.data?.data); // Post record
console.log(query.isLoading); // Loading state
console.log(query.isError); // Error state
Simplified data value from the query. Equivalent to query.data?.data.const { result } = useShow({ resource: "posts", id: "1" });
console.log(result?.title); // Direct access to post title
Current record id being shown.
setShowId
React.Dispatch<React.SetStateAction<BaseKey | undefined>>
A function to set the record id.const { showId, setShowId } = useShow({ resource: "posts" });
// Change the id being shown
setShowId("2");
Overtime loading information.Elapsed time in milliseconds.
Example
Basic Usage
import { useShow } from "@refinedev/core";
const PostShow = () => {
const { query, result } = useShow({
resource: "posts",
id: "1",
});
if (query.isLoading) {
return <div>Loading...</div>;
}
if (query.isError) {
return <div>Error loading post</div>;
}
return (
<div>
<h1>{result?.title}</h1>
<p>{result?.content}</p>
<p>Status: {result?.status}</p>
</div>
);
};
Reading ID from URL
import { useShow } from "@refinedev/core";
// URL: /posts/show/123
const PostShow = () => {
// id will be automatically read from URL
const { query, result, showId } = useShow({
resource: "posts",
});
console.log(showId); // "123"
if (query.isLoading) {
return <div>Loading...</div>;
}
return (
<div>
<h1>{result?.title}</h1>
<p>{result?.content}</p>
</div>
);
};
Changing ID Dynamically
import { useShow } from "@refinedev/core";
const PostShow = () => {
const { result, showId, setShowId, query } = useShow({
resource: "posts",
id: "1",
});
if (query.isLoading) {
return <div>Loading...</div>;
}
return (
<div>
<div>
<button onClick={() => setShowId("1")}>Show Post 1</button>
<button onClick={() => setShowId("2")}>Show Post 2</button>
<button onClick={() => setShowId("3")}>Show Post 3</button>
</div>
<h1>{result?.title}</h1>
<p>{result?.content}</p>
<p>Current ID: {showId}</p>
</div>
);
};
import { useShow } from "@refinedev/core";
const PostShow = () => {
const { result } = useShow({
resource: "posts",
id: "1",
meta: {
// Additional data to pass to dataProvider
fields: ["id", "title", "content", "author", "comments"],
},
});
return (
<div>
<h1>{result?.title}</h1>
<p>By {result?.author?.name}</p>
<p>{result?.content}</p>
<div>
<h2>Comments</h2>
{result?.comments?.map((comment) => (
<div key={comment.id}>{comment.text}</div>
))}
</div>
</div>
);
};