How can I use Drizzle Studio with Cloudflare D1 in local environment (connect to D1 local instance)

[JH365]

I am using Drizzle and Cloudflare D1 in my project and I like Drizzle a lot. And while I was trying Drizzle Studio, I found it connected to live database instead of local dev environment. I'd like to know if there is a way to connect to D1 local instance?

[rusintez]

Gm @JH365,

please check this excerpt of drizzle-kit code for hints :P

// src/orm-extenstions/d1-driver/wrangler-client.ts
var wrangler_client_exports = {};
__export(wrangler_client_exports, {
  execute: () => execute
});
async function execute(query, configPath, dbName) {
  try {
    const response = await $`NO_D1_WARNING=true wrangler d1 execute ${dbName} --config=${configPath} --command=${query} --json`;
    return { results: JSON.parse(response.stdout)[0].results };
  } catch (e) {
    try {
      await $`NO_D1_WARNING=true wrangler d1 execute ${dbName} --config=${configPath} --command=${query}`;
    } catch (e1) {
      throw new Error(e1.stdout);
    }
    throw e;
  }
}

[jwhits]

I am having the same issue, and I still don't get how I can pass the --local flag

[ProximaB]

I have the same problem.
We should probably address this by enabling the passing of additional options to the Drizzle-Kit Studio cli.
drizzle-kit studio --local
This adjustment could have a broader impact and would create some assumptions on how to develop similar features. But to postpone that, without going outside d1-driver context we could just extend d1 config definition. Till you decide if/how you want to handle this kind of cases.

{
    driver: "d1";
    dbCredentials: {
        wranglerConfigPath: string;
        dbName: string;
        local:bool
    };
}

[flexchar]

Looking at this code snippet, one could simply append dbName with --local

[OJFord]

Code injection as a feature, nice 😅

[flexchar]

Is there a clear consensus on how this should be addressed now? :)

[ProximaB]

Unfortunately drizzle-kit is not open sourced. I wasn't aware of that.
There is already posted similar issue with workaround from November last year.

const localConfig = {
  schema: "./schema/db/index.ts",
  driver: "better-sqlite",
  dbCredentials: {
    url: process.env.DB_URL!,
  },
} satisfies Config;

export default process.env.NODE_ENV === "production" ? cloudflareConfig : localConfig;

drizzle-team/drizzle-kit-mirror#242

[flexchar]

Have you experienced Mapping SQL input into an array of statements error bubbling from Wrangler when trying to use Drizzle Studio?

[ajzbc]

Came up with a similar temp solution

{
  "scripts": {
    "db:studio": "cross-env LOCAL_DB_PATH=$(find .wrangler/state/v3/d1/miniflare-D1DatabaseObject -type f -name '*.sqlite' -print -quit) drizzle-kit studio"
  }
}

Instead of specifying the sqlite file path, just grabbing the path of the *.sqlite file in .wrangler/state/v3/d1/miniflare-D1DatabaseObject

import type { Config } from 'drizzle-kit';

export default process.env.LOCAL_DB_PATH
	? ({
			schema: './src/db/schema.ts',
			driver: 'better-sqlite',
			dbCredentials: {
				url: process.env.LOCAL_DB_PATH!
			}
		} satisfies Config)
	: ({
			schema: './src/db/schema.ts',
			out: './drizzle',
			driver: 'd1',
			dbCredentials: {
				wranglerConfigPath: 'wrangler.toml',
				dbName: 'NAME'
			}
		} satisfies Config);

Haven't been able to get it working with the remote D1 db though drizzle-team/drizzle-kit-mirror#289

[predaytor]

it doesn't seem to pick up the latest version of the database? this worked for me (select file by last modified date):

cross-env LOCAL_DB_PATH=$(find .wrangler/state/v3/d1/miniflare-D1DatabaseObject -type f -name '*.sqlite' -print0 | xargs -0 ls -t | head -1) drizzle-kit studio

[clibequilibrium]

Joining the thread to get it working on Windows.

Create start-studio.ps1 with this content

$env:DB_URL=(Get-ChildItem .wrangler\state\v3\d1\miniflare-D1DatabaseObject\*.sqlite).FullName
drizzle-kit studio

drizzle.config.ts

export default {
	schema: './src/lib/server/schema.ts',
	out: './migrations',
	driver: 'better-sqlite',
	dbCredentials: {
		url: process.env.DB_URL!
	}
} satisfies Config;

package.json

  "scripts": {
    "db:studio": "powershell -ExecutionPolicy Bypass -File start-studio.ps1",
  },

Repeat the same steps for unix environment or use cross-env

[carloslato]

Thanks, work for me in windows but with a little modification to prevent duplication of string db route

$env:LOCAL_DB_PATH = ((Get-ChildItem .wrangler\state\v3\d1\miniflare-D1DatabaseObject*.sqlite | Select-Object -First 1).FullName)

[third774]

Thanks for sharing the tips, y'all! Here's the solution I came up with piecing everything together. I'm overall pretty happy with it since I can use Drizzle Studio with my local db, the preview db (for pages previews), and the prod db.

https://kevinkipp.com/blog/going-full-stack-on-astro-with-cloudflare-d1-and-drizzle/

[third774]

@chiubaca I don't have a .env file! Everything is in the wrangler.toml file and auth is handled by wrangler.

[chiubaca]

ah i see... gotcha. Thanks for the clarification!

[third774]

Looks like Drizzle just released support for D1 via the http API! Haven't had time to play with this yet, but sounds like this is the blessed path going forward!
https://github.com/drizzle-team/drizzle-kit-mirror/releases/tag/v0.21.3

[Akkuma]

That isn't local, just remote.

[tsteckenborn]

Somebody has a proper setup with the new http based api he could share?

[AlexBlokh]

This is now available in both Drizzle Studio for local development and with our Chrome Extension 🎉

[tsteckenborn]

Is there already a guide on how to properly set it up for local / preview / prod?

[chiubaca]

@AlexBlokh I'm not sure the chrome extension addresses this specific question around being able to use drizzle studio against the local d1 sqlite instance that wrangler creates for local development. 🤔

[bosconian-dynamics]

@AlexBlokh @chiubaca's on the money. It's totally awesome that Drizzle Studio can connect to our remote D1 instances now, and that will 100% come in handy. But it doesn't address the issue of connecting to Drizzle Studio to the local Sqlite files which Wrangler/Miniflare uses for local development.

It's maybe a bit of a larger problem than it should be because D1 doesn't presently support using bindings for remote databases in local development environments. So, sadly, while Studio can now interact with remote D1 databases, our local project code using the d1 driver cannot itself interact with those same databases; and to the best of my knowledge, Wrangler/Miniflare does not provide a local REST API which d1-http could be used against.

As others have explored, using the better-sqlite3 driver in addition to the d1 driver and manually swapping Drizzle Kit configurations and specifying the path to the local sqlite file totally works... But all of the presented work-arounds are fragile and incur a technical debt on projects - they will fail and require adjustments if Cloudflare changes some of the Miniflare internals. Or in the case of the solutions which select the first available SQLite file, when multiple D1 bindings are in use.

There's just a bit of a counter-intuitive disparity between ORM and Studio when it comes to D1 - drizzle-orm/d1 relies on a single binding/configuration and executes against the local sqlite databases or the D1 instances depending on the environment just fine, but Studio currently requires a separate driver and configuration unique from our Kit driver and configuration in order to support the same environments.

[Narixius]

Great news!
Thank you.

Just the link you mentioned [Chrome Extension] isn't working because it's missing "https://", so it's getting mixed up with the current page's URL. I think the link to the extension is:

https://driz.link/extension

Thanks.