gatsbyでページを作ると、生成処理に時間がかるので。fetch apiでjsonを取得して表示する方法を取る。はじめに本日のjsonを取得して表示。ページにカレンダーを入れて日付をクリックすると日付に応じたページを表示する。そのために日付にonClickDayに応じた処理を追加する。jsonを読み込みページを更新する。
<Calendar
value={value}
onClickDay={(e) => setValue(e)}
/>
fetch apiでjson取得、クライアントからjsonを取得して表示する。
fetch("https://kyukyunyorituryo.github.io/new_epub/json/20250101j.json")
.then((res) => res.json())
.then((json) => console.log(json))
.catch(() => alert("error"));
描画されてからfetch apiで取得して描画するので、子要素にあるstateが更新されない。 useEffectでデータフェッチすると起こる問題
// Client-side Runtime Data Fetching
const [starsCount, setStarsCount] = useState(0)
useEffect(() => {
// get data from GitHub api
fetch(`https://api.github.com/repos/gatsbyjs/gatsby`)
.then(response => response.json()) // parse JSON from request
.then(resultData => {
setStarsCount(resultData.stargazers_count)
}) // set data for the number of stars
}, [])
ajax
Reactで配列データが空
【React】useEffectを使った非同期通信処理を理解しよう qiita.com
アダルトカテゴリーを初回表示時に除去、アダルトカテゴリークリックすると表示
const removeadult = book.filter((post) => {
//console.log(post.Category)
const cate =post.Category.split(',')
return [...cate].filter(item => !cate.includes('アダルト') && !category.includes('写真集')).length > 0
//return book.Category === category
});
setShowPosts(removeadult);
graphqlに今日の日付を入れたかったのだが、やり方が分からなかったので。ただ、このやり方ではだめかなという感じがした。 tomiko0404.hatenablog.com
query MyQuery($slug: Date!) {
allJson(filter: {Day: {eq: $slug}}) {
edges {
node {
Asin
Booktype
Category
Contributor
Day(formatString: "")
ImageURL
Points
Price
Publisher
Title
URL
}
}
}
}
variables
{
"slug": "20250101"
}
クエリ文字列の取得
