data returns undefined on Details Page api/snippets/[id].js

[PeetThesing]

Hello,
we are currently working on our Details View and have problems, maybe with useSWR and the right api route. Our data stays undefined.

Here you can find our current status, the branch is called feat/details-view.

The router.query in compontents/SnippetDetails.js returns the correct id, but the data is undefined.
We tried to get the data directly in pages/[id].js, but that didn't help. We tried to change the api route a lot.
We tried to use fetcher.
The console.log of useSWR shows get error and get isLoading in grey, only mutate is shown active.

We'd appreciate your help!

[willywdev]

Idea:
If you use useSWR in Details List also, than you can make the fetcher global.
In your component you're not using the fetcher function.

useSWR("URL", fetcher)

Make fetcher function Global: https://swr.vercel.app/docs/global-configuration

[NikRoe]

Yes, that is indeed one of the issues.

You can either make the fetcher global, following the link provided by Willy, or you can also add it in the SnippetDetails Component.

You also need to fetch a different route. It should be

 const { data, isLoading, error } = useSWR(`/api/snippets/${id}`, fetcher);

There is also another small bug: In your /pages/api/snippets/[id]/index.js you are currently checking for the request.methode. This should be request.method.

Hope this already helps

[PeetThesing]

Thank you, we tried all routes with and without fetcher before, but have never realized the typo, with correcting that it works .
But it doesn't seem to be good practice, because we already fetch the data for the list global in the _app.js, but it works now. 🤷🏻‍♀️ But we'll try to refactor.