real_witt Comments - Answer Overflow

real_witt

•Created by real_witt on 5/3/2024 in #pages-help

How to access a D1 binding from a next.js tsx file (NOT .ts)?

@GM note that my instructions are for accessing data from a Cloudflare D1 instance, if you're using an external DB from somewhere else then this prob won't help you too much

33 replies

CDCloudflare Developers

•Created by real_witt on 5/3/2024 in #pages-help

How to access a D1 binding from a next.js tsx file (NOT .ts)?

To start off, you'll need to set your env variables in your wrangler.toml file (as per the docs https://developers.cloudflare.com/pages/framework-guides/nextjs/deploy-a-nextjs-site/#use-bindings-in-your-nextjs-application)

./wranger.toml

#:schema node_modules/wrangler/config-schema.json
name = "gm-app"
compatibility_date = "2024-04-23"
compatibility_flags = ["nodejs_compat"]
pages_build_output_dir = ".vercel/output/static"
[[d1_databases]]
binding = "DB" # available in your Worker on env.DB
database_name = "prod-gm-app"
database_id = "4523423293842983" // this will be whatever your db id was when you created it
// ...

./wranger.toml

#:schema node_modules/wrangler/config-schema.json
name = "gm-app"
compatibility_date = "2024-04-23"
compatibility_flags = ["nodejs_compat"]
pages_build_output_dir = ".vercel/output/static"
[[d1_databases]]
binding = "DB" # available in your Worker on env.DB
database_name = "prod-gm-app"
database_id = "4523423293842983" // this will be whatever your db id was when you created it
// ...

Then if you're using .ts you generate the types using npm run build-cf-types (found that on https://blog.cloudflare.com/blazing-fast-development-with-full-stack-frameworks-and-cloudflare) Create your route: (taken from https://developers.cloudflare.com/pages/framework-guides/nextjs/deploy-a-nextjs-site/#access-bindings-in-the-application)

./src/app/api/something/route.ts 
// NOTE: the naming of this file seems to matter, I think it HAS to be route.ts

import { getRequestContext } from '@cloudflare/next-on-pages'
export const runtime = 'edge'

export async function GET() {
  const myDb = getRequestContext().env.DB;
  const data: any = await myDb.prepare('SELECT * FROM service').all();

  return await data.results;
}

./src/app/api/something/route.ts 
// NOTE: the naming of this file seems to matter, I think it HAS to be route.ts

import { getRequestContext } from '@cloudflare/next-on-pages'
export const runtime = 'edge'

export async function GET() {
  const myDb = getRequestContext().env.DB;
  const data: any = await myDb.prepare('SELECT * FROM service').all();

  return await data.results;
}

Then to avoid conflicts with mixing client/server component imports, create a getter file. After @thipperz helped me with this I remember reading something on about this pattern on either stackoverflow or the next.js docs but don't remember the link. Oh well.

./src/app/actions.ts

"use server" 
import { GET } from './api/all/route'
export async function getAction() {
    return await GET()
}

./src/app/actions.ts

"use server" 
import { GET } from './api/all/route'
export async function getAction() {
    return await GET()
}

Then FINALLY to be able to use the data inside your actual .tsx file with html markup:

./src/app/page.tsx

"use client"
import { useState, useEffect } from 'react';
import { getAction } from './actions'

export const runtime = 'edge'
export default function Home() {

  async function giveItToMeAlready() {
      const res = await getAction();
      console.log(res)
      setData(res);
  }

  return (
    <div className="ml-5">
      <p>testing data:</p>
      <button onClick={giveItToMeAlready}>click to console.log data</button>
    </div>
  );
}

./src/app/page.tsx

"use client"
import { useState, useEffect } from 'react';
import { getAction } from './actions'

export const runtime = 'edge'
export default function Home() {

  async function giveItToMeAlready() {
      const res = await getAction();
      console.log(res)
      setData(res);
  }

  return (
    <div className="ml-5">
      <p>testing data:</p>
      <button onClick={giveItToMeAlready}>click to console.log data</button>
    </div>
  );
}

The process of getting the data into your .tsx file was pretty poorly documented on the Cloudflare docs, but it could be assumed knowledge, and I'm pretty new to react and next.js so...

33 replies

CDCloudflare Developers

•Created by real_witt on 5/3/2024 in #pages-help

How to access a D1 binding from a next.js tsx file (NOT .ts)?

I’m boutta hit the hay for tonight but I’ll show my configs tomorrow morning in here and hopefully that will help

33 replies

CDCloudflare Developers

•Created by real_witt on 5/3/2024 in #pages-help

How to access a D1 binding from a next.js tsx file (NOT .ts)?

Which is weird considering how basic this is for making any kind of app

33 replies

CDCloudflare Developers