Xata•5mo ago

Get one record

I am trying to add an onClick event handler on the button Delete and creating a separate file for the xata client, which I will import. How can I go about it? https://track-trip-dashboard-with-xata-next.vercel.app/dashboard/note/rec_com0uagjjap6athudr6g

// filter.js
"use server";

import { getXataClient } from "@/src/xata";

const xata = getXataClient();

export async function filter(id) {
  await xata.db.notes.read(id);
}

// filter.js
"use server";

import { getXataClient } from "@/src/xata";

const xata = getXataClient();

export async function filter(id) {
  await xata.db.notes.read(id);
}

"use client"

export default function NoteDetail({ params }) {
  return (
    <>
      <Header name={"Note Detail"} />
      <div className='flex mb-4'>
        <Link
          href={"#"}
          className='px-7 py-2 bg-gray-300 rounded mr-4 hover:bg-gray-200'>
          Edit
        </Link>
        <button className='px-7 py-2 bg-red-300 rounded hover:bg-red-200 hover:cursor-pointer'>
          Delete
        </button>
      </div>
    </>
  );
}

"use client"

export default function NoteDetail({ params }) {
  return (
    <>
      <Header name={"Note Detail"} />
      <div className='flex mb-4'>
        <Link
          href={"#"}
          className='px-7 py-2 bg-gray-300 rounded mr-4 hover:bg-gray-200'>
          Edit
        </Link>
        <button className='px-7 py-2 bg-red-300 rounded hover:bg-red-200 hover:cursor-pointer'>
          Delete
        </button>
      </div>
    </>
  );
}

Track your travel

Keep track of all your adventures, never forget the amazing memories

9 Replies

tsg•5mo ago

hey, if I understand the question right, I think you need a server action, see https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations So a similar approach to the filter function, you need it defined under use server

Data Fetching: Server Actions and Mutations | Next.js

Learn how to handle form submissions and data mutations with Next.js.

teri•5mo ago

Yes, you're correct. I am finding it difficult to make it work.

tsg•5mo ago

If you post what you have tried, I can review it

teri•5mo ago

here it is @tsg https://github.com/Terieyenike/track-trip-dashboard-with-xata-next/blob/main/app/(custom)/dashboard/note/%5Bid%5D/page.js https://github.com/Terieyenike/track-trip-dashboard-with-xata-next/blob/main/utils/filter.js

GitHub

track-trip-dashboard-with-xata-next/app/(custom)/dashboard/note/[id...

Keep track of all your adventures, never forget the amazing memories. - Terieyenike/track-trip-dashboard-with-xata-next

GitHub

track-trip-dashboard-with-xata-next/utils/filter.js at main · Terie...

Keep track of all your adventures, never forget the amazing memories. - Terieyenike/track-trip-dashboard-with-xata-next

tsg•5mo ago

hey Teri, sorry for the delay, looking now

tsg•5mo ago

looking around, I think we have an example for what you want here: https://xata.io/blog/server-actions-data-handling

Server Actions, databases, and the future of data handling

Check out how Xata is improving data handling in modern apps using React advancements

tsg•5mo ago

it looks like you can't use simply onClick, but you have to create a form with a hidden input if that doesn't work, you can always create an API route btw, it would be good if you'd do a xata schema dump > schema.json and commit it in the repo. Then I could run your project for myself as well

teri•5mo ago

I have done it.

tsg•5mo ago

nice

Gaming

Programming

Get one record