Theo's Typesafe Cult•16mo ago

Fetching real time data in Next 13 on the client side

Hey everyone, I am starting to familiarize myself with Next 13 and it's server components, and I ran into a little problem. My goal is to allow a user to write an entry into the db and see it in real time. Below the form, I have all of the entries being mapped onto the page. The goal is for the user to not have to refresh the page when they submit the form. The functionality I want is identical to tRPC's .invalidate(). Anyone know a solution to this? Thank you! Will send code below.

2 Replies

Splatte•16mo ago

function getEntries() {
  return prisma.guestbook.findMany({
    take: 100,
  });
}

async function createGuestBookEntry(data: FormData) {
  "use server";
  const user = await currentUser();

  const entry = data.get("entry")?.valueOf();

  if (!entry || typeof entry !== "string" || entry.length === 0) {
    throw new Error("Invalid entry");
  }

  await prisma.guestbook.create({
    data: {
      content: entry,
      name: user?.firstName + " " + user?.lastName,
    },
  });
}

function getEntries() {
  return prisma.guestbook.findMany({
    take: 100,
  });
}

async function createGuestBookEntry(data: FormData) {
  "use server";
  const user = await currentUser();

  const entry = data.get("entry")?.valueOf();

  if (!entry || typeof entry !== "string" || entry.length === 0) {
    throw new Error("Invalid entry");
  }

  await prisma.guestbook.create({
    data: {
      content: entry,
      name: user?.firstName + " " + user?.lastName,
    },
  });
}

<form
                action={createGuestBookEntry}
                className="mb-5 flex flex-col gap-2 max-w-[500px] text-sm"
              >
                <input
                  type="text"
                  name="entry"
                  placeholder="Your message..."
                  required
                  className="pl-4 pr-32 py-2 border rounded bg-transparent text-white"
                />
                <div className="flex gap-2 justify-start">
                  <button
                    type="submit"
                    className="text-white border p-2 rounded"
                  >
                    Sign Guestbook
                  </button>
                  <a className="text-white border p-2 rounded">
                    <SignOutButton>Sign Out</SignOutButton>
                  </a>
                </div>
              </form>

<form
                action={createGuestBookEntry}
                className="mb-5 flex flex-col gap-2 max-w-[500px] text-sm"
              >
                <input
                  type="text"
                  name="entry"
                  placeholder="Your message..."
                  required
                  className="pl-4 pr-32 py-2 border rounded bg-transparent text-white"
                />
                <div className="flex gap-2 justify-start">
                  <button
                    type="submit"
                    className="text-white border p-2 rounded"
                  >
                    Sign Guestbook
                  </button>
                  <a className="text-white border p-2 rounded">
                    <SignOutButton>Sign Out</SignOutButton>
                  </a>
                </div>
              </form>

Grifn•16mo ago

If you like the invalidation approach you can use react-query (which tRPC uses internally)

Gaming

Programming

Fetching real time data in Next 13 on the client side