unwilling-turquoise•2y ago

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/#resource

6 Replies

kapa.ai•2y ago

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:

import { useRouter } from 'next/router';
import { useShow } from '@refinedev/core';
import { IPost } from '@/classes/types';

export default function PostShow() {
    const router = useRouter();
    const { id } = router.query;

    const { queryResult: { data, isLoading } } = useShow<IPost>({ id });

    const postData = data?.data;

    return (
        <div>
            {isLoading && <p>Loading...</p>}
            {!isLoading && (
                <><h1>{postData?.fields.title}</h1><p>{postData?.fields.description}</p></>
            )}
        </div>
    );
}

import { useRouter } from 'next/router';
import { useShow } from '@refinedev/core';
import { IPost } from '@/classes/types';

export default function PostShow() {
    const router = useRouter();
    const { id } = router.query;

    const { queryResult: { data, isLoading } } = useShow<IPost>({ id });

    const postData = data?.data;

    return (
        <div>
            {isLoading && <p>Loading...</p>}
            {!isLoading && (
                <><h1>{postData?.fields.title}</h1><p>{postData?.fields.description}</p></>
            )}
        </div>
    );
}

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: ----------------------

kapa.ai•2y ago

<@954404142510645268> kapa.ai is still learning and improving, please let us know how it did by reacting below

unwilling-turquoiseOP•2y 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?

kapa.ai•2y ago

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:

import { Refine } from "@refinedev/core";  
import routerProvider from "@refinedev/nextjs-router/pages";  
  
export function MyApp({ Component, pageProps }) {  
 return (  
 <Refine  
 routerProvider={routerProvider}  
 >  
 <Component {...pageProps} />  
 </Refine>  
 );  
}

import { Refine } from "@refinedev/core";  
import routerProvider from "@refinedev/nextjs-router/pages";  
  
export function MyApp({ Component, pageProps }) {  
 return (  
 <Refine  
 routerProvider={routerProvider}  
 >  
 <Component {...pageProps} />  
 </Refine>  
 );  
}

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: ----------------------

kapa.ai•2y ago

<@954404142510645268> kapa.ai is still learning and improving, please let us know how it did by reacting below

absent-sapphire•2y 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

useShow in nextjs is not extracting the id from the path

Did you find this page helpful?