Vercel Postgres Polling & Revalidation on Focus

[anaclumos]

Vercel Postgres Polling & Revalidation on Focus

[luismeyer]

I guess theoretically this would be possible but the problem with that is that you have to expose your Postgres connection string to your client, which you don't want because then any user can just do anything with your DB. Your connection string should be a secret and therefor has to live on the server.

If you don't want to bother writing a REST API you should just use server actions to query your database. As in my example these server action can also be used inside SWR.

[luismeyer]

hey @anaclumos,

you can use Vercel Postgres with SWR. If you are using Next.js you can just put the sql call into a route handler or a server action. Here is a quick example how I made it work.

In a page.tsx you can load the intial data since it's a server component:

import { loadTitles } from "./load-titles";
import { Titles } from "./titles";

export default async function Home() {
  const titles = await loadTitles();

  return (
    <main>
      <h1>Titles</h1>
      <Titles titles={titles} />
    </main>
  );
}

Then you can pass the data to a client component which calls useSWR with fallbackData and revalidateOnMount: false since we already fetched the data initially.

"use client";

import useSWR from "swr";
import { loadTitles } from "./load-titles";

export async function Titles({ titles }: { titles: { title: string }[] }) {
  const { data } = useSWR("titles", loadTitles, {
    fallbackData: titles,
    revalidateOnMount: false,
  });

  return (
    <div>
      {data.map((title, i) => (
        <div key={`${title} ${i}`}>
          {i} {title.title}
        </div>
      ))}
    </div>
  );
}

The loadTitles function is a server action which looks like this:

"use server";
import { sql } from "@vercel/postgres";

export async function loadTitles() {
  const titles = await sql<{ title: string }>`SELECT * FROM titles`;
  return titles.rows;
}

Does this work for you?

[anaclumos]

I see... but in this case we still need an API layer for SWR right? I was wanting to get rid of API altogether and only use sql from Vercel Postgres. I wanted to have some polling features in this case. Do you know if this is possible?

[luismeyer]

I assume you want to run the sql query inside a server component then, which is technically your API.
Server Components are not meant to maintain a connection to the client. So for this kind of polling or revalidating on focus you need to introduce some client side fetching.

This post points out some restriction which server components have: https://vercel.com/blog/understanding-react-server-components

[anaclumos]

I understand. Then is there a way to use useSWR directly to the sql query? (Without writing much more boilderplate code for REST APIs