JAMstackのデモアプリ

    "axios": "^0.27.2",
    "qs": "^6.11.0",

<script>
	import { onMount } from 'svelte';
	import axios from 'axios';
	import * as qs from 'qs';
	import { env } from '../vars/env.js';
	//import '../vars/app.css';

	let stateLoading = true;
	let stateProducts = null;
	let stateMeta = null;
	let stateCurrentPageNumber = 1;
	let stateCurrentPageSize = 5;
	let cardCount = 0;

	async function getProducts(pageNumber, pageSize) {
		const query = qs.stringify(
			{
				populate: '*',
			},
			{
				encodeValuesOnly: true
			}
		);
		const res = await axios.get(`${env.apiUrl}/products?${query}`);
		return {
			products: res.data.data,
			meta: res.data.meta
		};
	}

	async function updateProductsByPage(pageNumber) {
		stateLoading = true;
		stateCurrentPageNumber = pageNumber;
		const { products, meta } = await getProducts(stateCurrentPageNumber, stateCurrentPageSize);
		stateProducts = products;
		stateMeta = meta;
		stateLoading = false;
	}

	onMount(async () => {
		await updateProductsByPage(stateCurrentPageNumber);
	});

	export let products;
</script>

<div class="product-grid">
	{#if stateLoading}
		<p>読込中...</p>
	{:else}
	<!--<p>全商品数 ({stateMeta.pagination.total})</p>-->
		{#each stateProducts as product}
			<section>
				<div class="product-card">
					<div class="product-card-frame">
						<div class="prodimg">
							<a href="products/{product.id}">
							<img src="{env.siteUrl}{product.attributes.image.data.attributes.formats.thumbnail.url}" alt="">
							</a>
						</div>
					
						<div class="product-card-text">
							<h3 class="product-card-title">{product.attributes.title}</h3>
							<p class="product-card-description">{product.attributes.description.substring(0, 40) + '...'}</p> 
						</div>
						<a href="/products/{product.id}"><button>... &gt;</button></a>
					</div>
				</div>
			</section>
		{/each}
	{/if}
</div>