Temos o prazer de anunciar o lançamento do ChiselStrike 0.15, trazendo aos nossos desenvolvedores uma API de cliente TypeScript para uso em aplicativos da Web e programas Node.js. Sempre tivemos uma API REST gerada automaticamente derivada de seu modelo de dados, e esse cliente agora facilita muito o trabalho, especialmente com aplicativos de página única. Ele foi projetado especificamente para funcionar com o TanStack Query , uma ferramenta popular para gerenciar consultas e melhorar seu desempenho em seus aplicativos da web.

Qual é o benefício?

Aplicativos construídos em ChiselStrike normalmente declaram uma ou mais entidades para descrever seu modelo de dados. As entidades são simplesmente classes TypeScript adicionadas ao modelsdiretório de origem especial, como este:

import { ChiselEntity } from "@chiselstrike/api"

export class BlogPost extends ChiselEntity {
    author: string = "Anonymous"
    content: string
    publishedAt: number
    hidden: boolean
}

import { BlogPost } from "../models/BlogPost"

export default BlogPost.crud()

Como funciona

Para que o código do cliente tenha tipos adequados para a entidade BlogPost, precisamos gerar algum código sob medida com base na classe de entidade acima. A CLI ChiselStrike agora pode fazer isso por você. Primeiro, seu servidor de desenvolvimento local deve estar sendo executado em um shell:

$ npm run dev

$ npm exec chisel generate [path/to/dir]

export type BlogPost = {
    id: string;
    author: string;
    content: string;
    publishedAt: number;
    hidden: boolean;
};

export function createChiselClient(config: ClientConfig)

Como usá-lo

Digamos que você tenha um aplicativo React e tenha gerado os arquivos acima em seu src/chiseldiretório. Agora você pode importar client.tse models.tscomeçar a usá-los no servidor de desenvolvimento local. Aqui está o que parece se você deseja consultar todas as instâncias do BlogPost e colocá-las em uma matriz:

import { Message } from "./chisel/models"
import { createChiselClient } from "./chisel/client"

const chiselClient = createChiselClient({
    serverUrl: "http://localhost:8080"
})

const posts: BlogPost[] = await chiselClient.posts.getAll()

Obviamente, a chamada para getAlldeve estar em um gancho e você a usaria em um modelo JSX para preencher um componente.

Como funciona com TanStack Query

Se você ainda não está usando o TanStack Query, deveria! Ele cuida de muito do trabalho pesado que torna as consultas de banco de dados fáceis e eficientes. A API do cliente ChiselStrike funciona bem com ela. Aqui está a aparência de um componente React usando TanStack e ChiselStrike de forma mínima:

function usePosts() {
  return useQuery(["posts"], () => {
     // Here we use the ChiselStrike API in the TanStack Query function
     return chiselClient.messages.getAll()
  })
}

function PostsComponent() {
  const { data, status, isLoading, error } = usePosts()
  if (isLoading) return <div>Loading</div>

  // data is now an array of BlogPost, or undefined
  return (
    <div>
      { data?.map(post => (
        <div key={ post.id }>
          <div>{ post.author }</div>
          <div>{ post.content }</div>
        <div/>
      ))}
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <QueryClientProvider client={queryClient}>
        <PostsComponent/>
      </QueryClientProvider>
    </div>
  )
}

Outras coisas para saber

A API do cliente tem suporte total para os vários métodos HTTP suportados pelo ChiselStrike e os agrupa em uma API fácil de usar. Ele também compreende qualquer relacionamento de entidade que você possa ter estabelecido em seu modelo.

A API usa internamente a API de busca da Web padrão para executar solicitações HTTP. Isso significa que o TypeScript gerado também funciona em ambientes Node.js onde a API de busca está disponível. Isso é ótimo se você estiver usando o Node 18 para pré-renderizar seu site, pois pode usar o mesmo código de cliente para consultar o conteúdo a ser renderizado.

Para documentação abrangente e código de amostra, confira a documentação da API do cliente . E se você construir algo com ChiselStrike, informe-nos em nosso Discord ou Twitter . Feliz cinzelamento!