...slug.js undefined data

[sunilsingh2019]

Trying to fetch data from slug [...slug].js page but showing undefined.

slug page code here
import {GET_PAGES_URI} from '../queries/pages/get-pages';
import {isEmpty} from 'lodash';
import {GET_PAGE} from '../queries/pages/get-page';
import {useRouter} from 'next/router';
import client from '../apollo/client';
import Layout from '../components/layout';

const Page = ( {data} ) => {

console.log('data', data);

const router = useRouter();

// If the page is not yet generated, this will be displayed
// initially until getStaticProps() finishes running
if ( router.isFallback ) {
	return <div>Loading...</div>;
}

return (

	<>
	<Layout data={data}>
		{router?.query?.slug.join("/")}
	</Layout>
</>
	);

}

export default Page;

export async function getStaticProps( {params} ) {
const {data, loading, networkStatus} = await client.query( {
query: GET_PAGE,
variables: {
uri: params?.slug.join( '/' ),
},
} );

return {
	props: {
		data: {
			menus: {
					headerMenus: data?.headerMenus?.edges || [],
					footerMenus: data?.footerMenus?.edges || [],
			},
			page: data?.page ?? {},
			path: params?.slug.join("/"),
		}
	},
	revalidate: 1,
};

}

export async function getStaticPaths() {
const {data} = await client.query( {
query: GET_PAGES_URI
});

const pathsData = [];

data?.pages?.nodes && data?.pages?.nodes.map( page => {
	if ( ! isEmpty( page?.uri ) ) {
		const slugs = page?.uri?.split( '/' ).filter( pageSlug => pageSlug );
		pathsData.push( {params: {slug: slugs}} );
	}
} );

return {

	paths: pathsData,
	fallback: true
};

}