useShow in nextjs is not extracting the id from the path
my path is /blog/[id/page.tsx and it looks liek this:
'use client';
import { useShow } from '@refinedev/core';
import { IPost } from '@/classes/types';
export default function PostShow() {
const { queryResult: { data, isLoading } } = useShow<IPost>();
const postData = data?.data;
return (
<div>
{isLoading && <p>Loading...</p>}
{!isLoading && (
<><h1>{postData?.fields.title}</h1><p>{postData?.fields.description}</p></>
)}
</div>
);
}
The error I keep getting is
[useShow]: resource: "blogPost", id: undefined
If you don't use the
setShowId
method to set the showId
, you should pass the id
prop to useShow
. Otherwise, useShow
will not be able to infer the id
from the current URL.
See https://refine.dev/docs/api-reference/core/hooks/show/useShow/#resource6 Replies
Hi @ziyad. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The
useShow
hook in refine is designed to infer the resource
and id
values from the current URL. However, it seems like there might be an issue with the way your route is structured.
In the examples provided in the extracts, the route structure for a show page is typically /resource/show/:id
, such as /posts/show/:id
or /categories/show/:id
.
Your route structure is /blog/[id]/page.tsx
, which is slightly different. The useShow
hook might not be able to correctly infer the id
from this structure.
You can try changing your route structure to match the examples, or you can explicitly pass the id
to the useShow
hook if it's available in your component.
Here's an example of how you might do this:
In this example, we're using Next.js's useRouter
hook to get the id
from the URL, and then we're passing it to the useShow
hook.
For more information, you can refer to the useShow documentation (https://refine.dev/docs/data/hooks/use-show) and the Next.js routing documentation (https://refine.dev/docs/routing/integrations/next-js).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@954404142510645268> kapa.ai is still learning and improving, please let us know how it did by reacting below
equal-aqua•7mo ago
@kapa.ai Thanks, looks like we're on the right path. now the issue is that next router was not mounted. Do I have to use next router? I thought that the refine router would handle that?
Let me check the knowledge base for you. One moment! :books:
----------------------
Refine is designed to be router-agnostic, meaning it can work with any router solution. However, it does require some router functions to create resource pages, navigation, and so on. It uses the
routerProvider
property to pass the router functions to Refine. This allows you to use any router library that you want.
In the case of Next.js, Refine provides a router binding package (@refinedev/nextjs-router
) that makes it easy to integrate Refine with Next.js. When using this package, you won't miss out on Next.js features such as Server Side Rendering (SSR) and Incremental Static Regeneration (ISR).
To use the Next.js router with Refine, you need to import the router integration of your choice and pass it to the <Refine />
's routerProvider
prop. Here's an example:
In this example, the routerProvider
prop of the Refine
component is set to the Next.js router provider. This allows Refine to use the Next.js router for routing.
If you're still encountering issues, it might be helpful to check that you've correctly installed and imported the @refinedev/nextjs-router
package, and that you're correctly passing it to the routerProvider
prop of the Refine
component.
For more information, you can refer to the Refine routing documentation (https://refine.dev/docs/guides-concepts/routing) and the Next.js router integration documentation (https://refine.dev/docs/routing/integrations/next-js).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@954404142510645268> kapa.ai is still learning and improving, please let us know how it did by reacting below
fascinating-indigo•7mo ago
/blog/[id/page.tsx
is it typo ? it should be like this: /blog/[id]/page.tsx
Also, in app router you should be use @next/navigation