3. Adding Show Page
Show page is the page where you can see the record. In this tutorial, we will create the show page for the blog_posts
resource.
Creating Show Page
First, let's create our file under the src/pages/blog-posts
folder. We will name it show.tsx
. Then, we will copy the show page code generated by Inferencer and paste it into the file.
To copy the code and paste it into the file, follow the steps below:
Navigate to the localhost:3000/blog-posts in your browser.
To open the show page, click any "Show" button in the "Actions" column of the table.
On the show page, click on the "Show Code" button in the bottom right corner of the page.
You can see the show page code generated by Inferencer. Click on the "Copy" button to copy the code.
Paste the code into the you created,
show.tsx
file.
You can see the show page code generated by Inferencer below:
Instead of coding the show page component from scratch, Inferencer created the required code base on API response, so that we can customize.
Understanding the Show Component
We will go through the list page hooks one by one.
useShow
is a refine hook that is used to get single record data by using theid
in the URL. It sends the parameters to thedataProvider
'sgetOne
function and returns the result.useNavigation
is a refine hook that is used to navigate between pages. In this case, we are using it to navigate to theedit
andlist
pages when the user clicks on the "Edit" and "Blog Posts List" buttons.Refer to the
useNavigation
documentation for more information →useResource
is a refine hook that is used to get current resource information andresources
that are defined on the<Refine/>
.Refer to the
useResource
documentation for more information →
Handling Relationships
In the show page, we have a single record. The record may have relationships with other resources.
For example, the blog_posts
resource has a relationship with the categories
resource. In this case, we can use the useOne
hook provided by refine. This hook allows us to fetch single record data by using the id
and resource
parameters.
Refer to the useOne
documentation for more information →
In the auto-generated show page code, Inferencer used the useOne
hook to fetch the category data of the blog post record.
const { data: categoryData, isLoading: categoryIsLoading } = useOne({
resource: "categories",
id: record?.category?.id || "",
});
To ensure that the related data is only fetched after the blog post record has been successfully retrieved, we can use the queryOptions
object. By setting the enabled
property to true
only if the record variable is truthy, we can control when the related data is fetched like below:
const { data: categoryData, isLoading: categoryIsLoading } = useOne({
resource: "categories",
id: record?.category?.id || "",
queryOptions: {
enabled: !!record,
},
});
Adding the Show Page to the App
Now that we have created the show page, we need to add it to the App.tsx
file.
Open
src/App.tsx
file on your editor.Import the created
BlogPostShow
component.Replace the
HeadlessInferencer
component with theBlogPostShow
component.
import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";
import { HeadlessInferencer } from "@pankod/refine-inferencer/headless";
import { BlogPostList } from "pages/blog-posts/list";
import { BlogPostEdit } from "pages/blog-posts/edit";
import { BlogPostShow } from "pages/blog-posts/show";
const App = () => {
return (
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
resources={[
{
name: "blog_posts",
list: BlogPostList,
edit: BlogPostEdit,
show: BlogPostShow,
create: HeadlessInferencer,
},
]}
/>
);
};
export default App;
Now, we can see the show page in the browser at localhost:3000/blog-posts/show/123