Remix :: CRUD com Supabase - Parte 04 - Carregando e inserindo novos registros

Nesta parte do tutorial verificaremos se a nossa comunicao com API do Supabase est funcionando corretamente e criaremos uma rota temporria que permitir criar novos registros para testarmos as requisies.

Editando o arquivo app/index.tsx

Neste primeiro momento iremos verificar se a nossa conexo com o Supase est funcionando e para isto editaremos o arquivo routes/index.tsx responsvel por chamar a rota index da nossa aplicao.

1) Importe LoaderFunction e useLoaderData do Remix

import { LoaderFunction, useLoaderData } from 'remix'

O que o mtodo loader: LoaderFunction?

O loader uma funo executada em server-side e ela que usamos no Remix para obter dados externos, portanto a usaremos para obter os registros que viro do banco de dados.

Que o hook useLoaderData?

O useLoaderData um hook provido pelo prprio Remix para que se possa ter acesso ao que exportado pelo loader

2) Importe tambm o cliente do Supabase

import { supabase } from '~/utils/supabase-client.server'

3) Crie o tipo PostsModel, que alm de tipar as nossas variveis, vai nos ajudar muito no intelisense do VSCode.

type PostsModel = {  post_id: number  post_uuid: string  post_author: string  post_title: string  post_text: string  post_situation: string  post_created_at: string}

4) Agora, iremos dar um select no Supabase para carregar as informaes dos registros no loader:

export const loader: LoaderFunction = async () => {  const { data: posts } = await supabase    .from<PostsModel>('posts')    .select('*')    .order('post_id', { ascending: false })  return posts}

5) Deixe o componente Index desta forma:

export default function Index() {  const posts = useLoaderData<PostsModel[]>()  return (    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>      <h1>Blog Remix com Supabase</h1>      <p>        <a href='/insert'>Inserir</a>      </p>      <ul style={{ listStyle: 'none' }}>        {posts?.map(post => (          <li key={post.post_uuid}>            <h3>{post.post_title}</h3>            <small>{post.post_author}</small>            <blockquote>{post.post_text}</blockquote>          </li>        ))}      </ul>    </div>  )}

Para ver se tudo deu certo, rode o comando npm run dev e voc perceber que ir aparecer apenas o ttulo Blog Remix com Supabase, pois no h nenhum registro inserido na base de dados.

Repare que foi criado um link insert logo abaixo do ttulo Blog Remix com Supabase, se clicarmos nele agora seremos direcionados para uma pgina que no existe ainda e, inevitavelmente, receberemos um erro 404, mas isto ser resolvido nos prximos passos.

Criando a Rota temporria insert

Para testar e ver se a nossa comunicao com Supabase est realmente funcionando e se nosso loader est trazendo as informaes dos registros, faremos antes um insert para escrever alguns registros no Supabase, que podero ser apagados posteriormente, ento, mos a obra.

Aditivo: Nesta parte muito cdigo ser duplicado, mas no se preocupe, por enquanto faremos funcionar pra depois deixar mais limpo.

1) Crie dentro da pasta routes um arquivo com o nome insert.tsx e faa os mesmos imports que fizemos em index, ou seja:

import { LoaderFunction, useLoaderData } from 'remix'import { supabase } from '~/utils/supabase-client.server'

2) Da mesma forma que na index, crie o type PostsModel:

type PostsModel = {  post_id: number  post_uuid: string  post_author: string  post_title: string  post_text: string  post_situation: string  post_created_at: string}

3) Chame o mtodo loader, mas agora dando um insert no Supabase:

export const loader: LoaderFunction = async () => {  const { data } = await supabase.from('posts').insert([    {      post_author: 'Junior Martins',      post_title: 'O ttulo da sua aplicao',      post_text: 'Uma coisa  certa: ningum sai vivo dessa vida.. Por que "tudo junto" se escreve separado e "separado" se escreve tudo junto?. Se tamanho fosse documento o elefante era dono do circo.. No concordo nem discordo, muito pelo contrrio. Em rio de piranhas, jacar nada de costas. Um  pouco, dois  bom e trs  mpar. Um  pouco, dois  bom e trs  mpar. O sonho no acabou. E ainda temos po doce, maria-mole e queijadinha. Uma coisa  uma coisa, outra coisa  outra coisa.',    },  ])  return data?.[0]}

Aditivo: Voc pode alterar o valor de post_author, post_title e post_text dentro do mtodo loader para diferenciar os registros.

4) Crie o componente Insert:

export default function Insert() {  const post = useLoaderData<PostsModel>()  return (    <>      <h1>Novo registro inserido</h1>      <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>        <h3>{post.post_title}</h3>        <p>          <small>{post.post_author}</small>        </p>        <blockquote>{post.post_text}</blockquote>      </div>    </>  )}

Para finalizar, inicie sua aplicao e clique no link inserir voc ir visualizar uma mensagem informando que um novo registro foi inserido e logo abaixo os dados que foram inseridos. Clique agora em Home e ir ver que o nosso novo post foi listado, faa este processo algumas vezes pra ver que realmente um novo registro est sendo inserido.

Na parte 05, iremos melhorar o cdigo e criar um formulrio para fazer esta insero com dados que a gente definir. Te vejo l!