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

일부 튜토리얼은 Supabase está funcionando corretamente e criaremos uma rota temporária que permitirá criar novos registros para testarmos as requisições로 API do Supabase está funcionando corretamente 및 criaremos uma rota temporária que permitirá criar novos registros para testarmos에서 튜토리얼 검증을 수행합니다.

arquivo app/index.tsx 편집

가장 중요한 순간에 확인되는 가장 강력한 연결 장치는 Supase está funcionando e para isto editaremos o arquivoroutes/index.tsx 응답으로 로타index da nossa aplicação입니다.

1) ImporteLoaderFunction euseLoaderData do Remix

import { LoaderFunction, useLoaderData } from 'remix'

O que é o métodoloader: LoaderFunction ?

Oloader는 서버측 실행 기능을 실행하지 않으며 Remix para obter dados externos, portanto a usaremos para obter os registros que virão do banco de dados.


케오훅useLoaderData ?

O useLoaderData é um hook provido pelo próprio Remix para que se possa ter acesso ao que é exportado pelo loader
2) Supabase의 클라이언트에서 가져오기

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

3) Crie o tipo PostsModel , que além de tipar as nossas variáveis, 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 informações 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 형식:

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 título Blog Remix com Supabase , pois não há nenhum registro inserido na base de dados.

Repare que foi criado um link insert logo abaixo do título Blog Remix com Supabase, se clicarmos nele agora seremos direcionados para uma página que não existe ainda e, inevitavelmente, receberemos um erro 404, mas isto será resolvido nos próximos passos.

Criando a Rota temporária 인서트

Para testar e ver se a nossa comunicação com Supabase está realmente funcionando e se nosso loader está trazendo as informações dos registros, faremos antes um insert para escrever alguns registros no Supabase, que poderão ser apagados posteriormente, então, mãos a .

Aditivo: Nesta parte muito código será duplicado, mas não se preocupe, por enquanto faremos funcionar pra depois deixar mais limpo.

1) Crie dentro da 파스타routes um arquivo com o nomeinsert.tsx e faça os mesmos imports que fizemos emindex , 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 método 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 título da sua aplicação',
      post_text: 'Uma coisa é certa: ninguém 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.. Não concordo nem discordo, muito pelo contrário. Em rio de piranhas, jacaré nada de costas. Um é pouco, dois é bom e três é ímpar. Um é pouco, dois é bom e três é ímpar. O sonho não acabou. E ainda temos pão 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 método loader para diferenciar os registros.

4) 크리오컴포넌트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 aplicação 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 emHome e irá ver que o nosso novo post foi listado, faça este processo algumas vezes pra ver que realmente um novo registro está sendo inserido.

Parte 05, iremos melhorar o código e criar um formulário para fazer esta inserção com dados que a gente definir. 테 베조 라! 😉