Fix sapper preloading by adding server api-route

package.json

@@ -32,6 +32,7 @@
  },
  "dependencies": {
  "compression": "^1.7.1",
+ "node-fetch": "^2.6.0",
  "polka": "next",
  "sapper-environment": "^1.0.1",
  "sirv": "^0.4.0"

src/routes/store/index.json.js

@@ -0,0 +1,12 @@
+import request from '@/utils/request';
+import fetch from 'node-fetch';
+
+export async function get(req, res, next) {
+ const result = await request(fetch, '/products?limit=24');
+ if (result) {
+ res.setHeader('Content-Type', 'application/json');
+ res.end(JSON.stringify(result));
+ } else {
+ next();
+ }
+}

src/routes/store.svelte → src/routes/store/index.svelte

@@ -1,8 +1,7 @@
 <script context="module">
- import request from '@/utils/request';
  export async function preload() {
- const res = await request(this.fetch, '/products');
- return {items: res};
+ const res = await this.fetch('/store.json');
+ return {items: await res.json()};
  }
 </script>
 

src/store/item.js

@@ -118,24 +118,24 @@ export const createProduct = async () => {
  const product = get(item);
  let varieties = [];
  product.varieties.forEach(variety => {
- let color = variety.color.replace(/[^0-9a-f]/gi, '');
+ let color = variety.color ? variety.color.replace(/[^0-9a-f]/gi, '') : null;
  let imgs = variety.images.map(img => img.url);
 
  if (product.inSizes) {
  for (let size in variety.sizes) {
  if (variety.sizes[size] > 0) {
  varieties.push({
- color: color,
+ size,
+ color,
  images: imgs,
  amount: variety.sizes[size],
- size,
  });
  }
  }
  } else {
  varieties.push({
- color: variety.color.replace(/[^0-9a-f]/gi, ''),
- images: variety.images.map(img => img.url),
+ color,
+ images: imgs,
  amount: variety.quantity,
  size: null,
  });

src/utils/request.js

@@ -12,9 +12,11 @@ export default async (fetchType = fetch, url = '', method = 'GET', body = {}, is
  if (isForm) options.body = body;
  else if (Object.entries(body).length) options.body = JSON.stringify(body);
 
- let headers = new Headers();
- if (!isForm && Object.entries(body).length) headers.append('Content-Type', 'application/json');
- options.headers = headers;
+ if (!isForm && Object.entries(body).length) {
+ options.headers = {
+ 'Content-Type': 'application/json',
+ };
+ }
 
  return await fetchType(API_HOST + url, options).then(res => {
  if (res.status === 204) return true;