Como atualizar um painel administrativo automaticamente quando novos pedidos são criados.

Supabase Realtime: Atualizando Pedidos Sem F5

Em um sistema de pedidos, o administrador precisa visualizar novos registros rapidamente.

No início, o painel só mostrava um novo pedido depois que a página era atualizada manualmente.

Uma solução simples seria executar uma nova busca a cada poucos segundos. Porém, isso cria consultas mesmo quando nada mudou.

Com o Supabase Realtime, a aplicação pode escutar alterações diretamente na tabela.

O componente fica inscrito em eventos como:

INSERT
UPDATE
DELETE

Quando um novo pedido é criado, o evento é recebido e o estado da interface é atualizado.

const channel = supabase
  .channel("pedidos")
  .on(
    "postgres_changes",
    {
      event: "INSERT",
      schema: "public",
      table: "pedidos",
    },
    (payload) =&gt; {
      setPedidos((atuais) =&gt; [
        payload.new,
        ...atuais,
      ]);
    }
  )
  .subscribe();