I’m doing fetch request to get my Youtube playlist. and in doing so i used getStaticProps()
, the problem I’m facing is that my playlist depends on my array of objects result.
export async function getStaticProps(){ const MY_PLAYLIST = process.env.YOUTUBE_PLAYLIST_ID; const API_KEY = process.env.YOUTUBE_API_KEY; //const REQUEST_URL = `https://youtube.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=${MY_PLAYLIST}&key=${API_KEY}`; const REQUEST_URL = `https://youtube.googleapis.com/youtube/v3/channelSections?part=snippet&channelId=${MY_PLAYLIST}&key=${API_KEY}`; const response = await fetch(REQUEST_URL); const result = await response.json(); return{ props:{result: result}, revalidate: 3600, } }
the array of objects structure is in my ./utils/playlists.js
file.
const Playlist = [ { id: 1, playlistId: '...first_playlist_id...', name: ' name ' }, { id: , playlistId: '...second_playlist_id...', name: ' name ' }, ... ] export default Playlist;
what i want to achieve is that instead of getting my const MY_PLAYLIST = process.env.YOUTUBE_PLAYLIST_ID;
from my .env.local
file to get it from ./utils.Playlist.js
file as const MY_PLAYLIST = selected_playlist
. in regular situation i use
{Playlist.map((list, index)=>{ return ( <Card list={list} key={index}/> ) })}
to map my arrays of objects. so what should i do in my static props function?
Advertisement
Answer
Solution with SWR
Add a new folder called ‘json’ and add a new file called ‘data.json’ inside. Then paste your data like below (without assignment to a variable)
[ { id: 1, playlistId: '...first_playlist_id...', name: ' name ' }, { id: , playlistId: '...second_playlist_id...', name: ' name ' }, ... ]
Add a new file inside your pages/api folder called ‘fetch.js’ and paste the code below
import path from 'path'; import { promises as fs } from 'fs'; export default async function handler(req, res) { const dataDirectory = path.join(process.cwd(), 'json'); const fileContents = await fs.readFile(dataDirectory + '/data.json', 'utf8'); res.status(200).json(fileContents); }
Install the swr library
npm install --save swr
Display the data using the swr library
import useSWR from 'swr'; const fetcher = (url) => fetch(url).then((res) => res.json()); export default function Index() { const { data, error } = useSWR('/api/fetch', fetcher); if (error) return <div>Error!</div>; if (!data) return <div>Loading..</div>; return ( <div> {data.map((item, index) => <Card list={item} key={index} />)} </div> ) }