getting a unepxcted error
Answered
Japanese Bobtail posted this in #help-forum
Japanese BobtailOP
I was trying to fetch some data on my next app I added the below code on my component and got error.
here is the whole code
"next": "13.0.6", /**
* FETCH DOWNLOAD LIST
**/
useQuery({
queryKey: ['download-list'],
queryFn: fetchList
});here is the whole code
async function fetchList() {
try {
const response = await Api.get(`/downloads`);
return {
data: response?.body?.data,
};
} catch (err: any) {
throw new Error(err);
}
}
const DownloadDropdown = () => {
const {t} = useTranslation('header');
const router = useRouter();
const currentRoute = router?.asPath.replace('/downloads/', '');
const pathName = router.pathname;
/**
* FETCH DOWNLOAD LIST
**/
useQuery({
queryKey: ['download-list'],
queryFn: fetchList
});
const isTopicsActive =
/national|provincial|ward|caste-ethnicity|urban-rural|post-enumeration-report-survey|census-in-nepal|household-results/.test(
pathName,
);
const downloadList = [
{value: 'national', label: 'national report', isActive: currentRoute === 'national'},
{
value: 'provincial',
label: 'provincial/ district/ local report',
isActive: currentRoute === 'provincial',
},
{value: 'ward', label: 'ward report', isActive: currentRoute === 'ward'}
];
function handleRoute(routeUrl: string) {
if (routeUrl === 'provincial') {
router.push(`/downloads/${routeUrl}/1`);
} else {
router.push(`/downloads/${routeUrl}`);
}
}
return (
<>
<DesktopDownload t={t}
downloadList={downloadList}
isTopicsActive={isTopicsActive}
handleRoute={handleRoute}/>
</>
);
}
export default DownloadDropdown30 Replies
let me see
@Japanese Bobtail can you send screenshot of console?
Japanese BobtailOP
I think some other thing causing error. not sure but maybe next js server thing
can you change your return statement to this?
return (
<>
{console.log(<DesktopDownload t={t}
downloadList={downloadList}
isTopicsActive={isTopicsActive}
handleRoute={handleRoute}/>)}
Hello World
</>
);
}and send console, its most likely due to that element
Japanese BobtailOP
no.
if i remove the usequery code. the error goes away
i get the error on
return (
<>
dadf
</>
); too@Japanese Bobtail i get the error on
return (
<>
dadf
</>
);
too
where do you use
DownloadDropdown?oh good questio for him, forgotted about it.
Japanese BobtailOP
on header.
using that header on layout component here
using that layout on the
app component.@Japanese Bobtail i get the error on
return (
<>
dadf
</>
);
too
you still get error with this in
DownloadDropdown? return (
<>
dadf
</>
);Japanese BobtailOP
@Ray yes.
adding
useQuery({
queryKey: ['download-list'],
queryFn: fetchList
});cause the error
do you get error if you change
<DownloadDropdown /> to <div>download</div> in headerdoes this render fine without useQuery?
return (
<>
dadf
</>
);Japanese BobtailOP
if i remove user query line. it works fine.
oh ok
where do you import
useQueryJapanese BobtailOP
hey @Ray @Anay-208 it started working normally
Japanese BobtailOP
I restarted the server and the error goes awa
Answer
Japanese BobtailOP
away
sorry guys ! feel so bad.
after installing a package, its best practice to restart the server to prevent errors. Now, mark that message as a solution!
Japanese BobtailOP
no . I did not insalled it now. I did it long ago.
@Anay-208 @Ray appreciate your help.