use wrangler-proxy for vite dev scenario

.gitignore

@@ -8,3 +8,5 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+.wrangler/
+.vscode/

README.md

@@ -1,5 +1,8 @@
 #  Example: SvelteKit + Cloudflare D1
 
+## This is solved better with Miniflare
+https://github.com/gerhardcit/svelte-cf-bindings-poc
+
 **Note**: 🧪 This is a example application and is not officially supported by Cloudflare.
 
 An example SvelteKit project on Cloudflare Pages (https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-site/) that connects to a [D1 database](https://developers.cloudflare.com/d1/).

package.json

@@ -17,7 +17,8 @@
 		"svelte-check": "^3.0.1",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
-		"vite": "^4.3.0"
+		"vite": "^4.3.0",
+		"wrangler-proxy": "^2.2.1"
 	},
 	"type": "module"
 }

src/hooks.server.ts

@@ -0,0 +1,24 @@
+import { connectD1, waitUntil } from 'wrangler-proxy';
+import { dev } from '$app/environment';
+
+export const handle = async ({ event, resolve }) => {
+    // in dev mode you have to use a proxy to connect to your database
+    // this is if you want to use wrangler dev with vite dev as the source.
+    // https://www.npmjs.com/package/wrangler-proxy
+    if (dev) {
+        event.platform = {
+            ...event.platform,
+            env: {
+                DB: connectD1('DB'),
+            },
+            context: {
+                waitUntil: waitUntil,
+            },
+            // not sure what to to with caches when using proxy.
+            // caches: 
+        }
+        // TODO: add other env vars here
+    }
+
+    return resolve(event);
+};

src/routes/api/users/+server.ts

@@ -1,8 +1,22 @@
 import type { RequestHandler } from "@sveltejs/kit";
 
 export const GET: RequestHandler = async function({ request, platform }) {
-  let result = await platform.env.DB.prepare(
-    "SELECT * FROM users LIMIT 5"
-  ).run();
-  return new Response(JSON.stringify(result));
+  // double check this, in production of course this should be set
+  if (!platform) {
+    return new Response("No platform found", { status: 500, statusText: "No platform found" });
+  }
+
+  const db = platform.env.DB;
+  try {
+    // make sure you have a users table created in your database
+    let result = await db.prepare(
+      "SELECT * FROM users LIMIT 5"
+      ).run();
+      // console.log('result', result);
+      return new Response(JSON.stringify(result.results));
+    }
+    catch (e) {
+      console.log(e);
+      return new Response("Error", { status: 500, statusText: "Error" });
+    }
 }

wrangler.toml

@@ -0,0 +1,8 @@
+name = "worker"
+compatibility_date = "2023-07-02"
+
+[[d1_databases]]
+binding = "DB"
+database_name = "DB"
+# you need a db id for prod here of course.
+database_id = "55444"