[Database] Using Hub Database with Nuxt 3 Layers issues

[serhii-chernenko]

Describe the bug

Prehistory

I have a demo application that uses Hub/Cloudflare KV storage to display just a list with up to 5 items:

• Web: https://nuxthub-issue.pages.dev/
• Repo: https://github.com/serhii-chernenko/nuxthub-issue

The app architecture is pretty similar to a real app I'm developing. I've already decided I'm ready going forward with a real database.

First of all, I asked about supporting of multiple DBs and found out it's not ready yet #488.

After conversation with @RihanArfan I'm fine for now to have the only DB. I'm just tracking this opened issue #179. But I strictly need the layers architecture.

Progress

I followed the documentation and prepared changes for migration. Sadly, but nothing works.

• Web: https://0fc1cd6a.nuxthub-issue.pages.dev/
• PR: https://github.com/serhii-chernenko/nuxthub-issue/pull/1/files

Issues

[Solved] D1_ERROR

The issue was similar to this one #486.
But it happened because I have remote: true option but I didn't have any DBs in Cloudflare.
The issue has solved by:

npx nuxthub deploy --preview src/apps/app

When the _hub_migration DB is created remotely, the issue was gone.

Items are not loaded without any errors

When I run my app

npm run dev:app

I don't have any errors in my Terminal or in Console and Network tabs of DevTools but I just see a message:

Something went wrong...

Related files:

• https://github.com/serhii-chernenko/nuxthub-issue/pull/1/files#diff-40e390e118884e559ca1ef6167d5c82f87d80998ac868f4c6758f7dce670bc5bR20
• https://github.com/serhii-chernenko/nuxthub-issue/pull/1/files#diff-5b99beb4ff614c61b67e652f2fa38e5e2a46cde517e63e33360cf20bb391985fR2

Seed task

I read in the docs the the seed task is optional but I guessed that issue that the items DB is not created yet, I have to seed it.

I prepared a task file:
https://github.com/serhii-chernenko/nuxthub-issue/pull/1/files#diff-d646e716751b7f6342a89af5575e4814cdc6c2c8d447eb1c77a64fdc63f86f00

But when I run it, I have just:

Internal server error

Stack trace:

{
  "url": "/_nitro/tasks/seed",
  "statusCode": 500,
  "statusMessage": "",
  "message": "internal server error",
  "stack": "<pre><span class=\"stack internal\">at createError (/Users/inevix/dev/main/nuxthub-issue/node_modules/h3/dist/index.mjs:72:15)</span>\n<span class=\"stack internal\">at handleProxyError$1 (/Users/inevix/dev/main/nuxthub-issue/node_modules/@nuxthub/core/dist/runtime/database/server/utils/database.js:88:9)</span>\n<span class=\"stack internal\">at process.processTicksAndRejections (node:internal/process/task_queues:95:5)</span>\n<span class=\"stack internal\">at D1PreparedQuery.get (/Users/inevix/dev/main/nuxthub-issue/node_modules/src/d1/session.ts:223:16)</span>\n<span class=\"stack\">at insert (/Users/inevix/dev/main/nuxthub-issue/src/layers/core/data/server/utils/items.ts:32:1)</span>\n<span class=\"stack\">at Object.run (/Users/inevix/dev/main/nuxthub-issue/src/layers/core/data/server/tasks/seed.ts:13:1)</span>\n<span class=\"stack internal\">at runTask (/Users/inevix/dev/main/nuxthub-issue/node_modules/nitropack/dist/runtime/internal/task.mjs:37:17)</span>\n<span class=\"stack internal\">at Object.handler (/Users/inevix/dev/main/nuxthub-issue/node_modules/nitropack/dist/presets/_nitro/runtime/nitro-dev.mjs:70:12)</span>\n<span class=\"stack internal\">at async /Users/inevix/dev/main/nuxthub-issue/node_modules/h3/dist/index.mjs:1988:19</span>\n<span class=\"stack internal\">at async Object.callAsync (/Users/inevix/dev/main/nuxthub-issue/node_modules/unctx/dist/index.mjs:72:16)</span></pre>"
}

Steps to reproduce

1. Clone the repo with the branch feature/drizzle:
   https://github.com/serhii-chernenko/nuxthub-issue/tree/feature/drizzle

git clone [email protected]:serhii-chernenko/nuxthub-issue.git
cd $_
git checkout feature/drizzle

2. Install NPM packages

npm run install

3. Go to NuxtHub Dashboard and create a new empty project:
   https://admin.hub.nuxt.com/username/new/project
4. Go back to the terminal and link the created project

npx nuxthub link

5. NuxtHub CLI doesn't support link apps, so, just move a created .env file manually:

mv .env src/apps/app/

6. Make sure that D1 is enabled in your Cloudflare account:
   https://dash.cloudflare.com/account-id/workers/d1
7. Deploy the app.

npx nuxthub deploy src/apps/app

8. Wait a few minutes after to allow Cloudflare and NuxtHub setup all DNS records and services.
   https://admin.hub.nuxt.com/username/project-name/settings/domains. When the https://project-name.nuxt.dev/ domain will be ready, then Database has to be available:
   https://admin.hub.nuxt.com/username/project-name/production/storage/database
9. Run app

npm run dev:app

10. Open http://localhost:3000/
11. Check that the app doesn't have any errors but items are not fetched
12. Run the seed task in the Nuxt DevTools
13. Stop the app, run

npm run db:generate

and run the app again
14. Open the file

src/layers/core/data/nuxt.config.ts

and comment the line

remote: true

re-run the app

npm run dev:app

15. Run the seed task again, get error

D1_ERROR: no such table: items: SQLITE_ERROR

I hope this detailed instruction help you to deeply understand the root cause of issues I have.

Expected behavior

I'm fine with waiting for supporting of multiple DBs. But this integration totally blocks my work and can't move forward with my project. I don't want to change my solution and ecosystem. But please, provide me detailed instructions how to solve those issues to proceed. I appreciate any help.