Public
Edited
Sep 26, 2024
Insert cell
Insert cell
nanoqueryContext = nanoquery.nanoquery({
fetcher: n => fetch(`https://api.hnpwa.com/v0/news/${n}.json`).then(r => r.json()),
cacheLifetime: 10000,
})
Insert cell
viewof page = Inputs.number([1, 10], {
label: 'Page #',
value: 1,
})
Insert cell
fetcherStore = nanoqueryContext[0]([pageIdxStore])
Insert cell
{
if (currentPage.data) {
return html`Page ${pageIdx}: <ol>${currentPage.data.map(x => html`<li><a href="https://news.ycombinator.com/item?id=${x.id}" target="_blank">${x.title}</a> <small>${x.points}p</small></li>`)}</ol>`
}
if (currentPage.loading) {
return html`<h1>Loading</h1>`
}
if (currentPage.error) {
return html`<div style="color: #c00"><strong>Error</strong>: ${currentPage.error}</div>`
}
return html`?`
}
Insert cell
Insert cell
pageIdxStore = {
// bind to observable
const store = nanostores.atom(1)
function handler() {
store.set(viewof page.value)
}
viewof page.addEventListener('input', handler)
invalidation.then(() => viewof page.removeEventListener('input', handler))
return store
}
Insert cell
pageIdx = storeToAsyncIter(pageIdxStore)
Insert cell
currentPage = storeToAsyncIter(fetcherStore)
Insert cell
function storeToAsyncIter(store) {
return Generators.observe(store.subscribe)
}
Insert cell
Insert cell
nanostores = import('https://esm.sh/nanostores')
Insert cell
nanoquery = import('https://esm.sh/@nanostores/query')
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more