Nos complace anunciar el lanzamiento de ChiselStrike 0.15, que brinda a nuestros desarrolladores una API de cliente TypeScript para usar en aplicaciones web y programas Node.js. Siempre hemos tenido una API REST generada automáticamente derivada de su modelo de datos, y este cliente ahora hace que sea mucho más fácil trabajar con él, especialmente con aplicaciones de una sola página. Fue diseñado específicamente para trabajar con TanStack Query , una herramienta popular para administrar consultas y mejorar su rendimiento en sus aplicaciones web.

¿Cuál es el beneficio?

Las aplicaciones creadas en ChiselStrike suelen declarar una o más entidades para describir su modelo de datos. Las entidades son simplemente clases de TypeScript agregadas a modelsun directorio fuente especial, como esta:

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()

Cómo funciona

Para que el código del cliente tenga los tipos adecuados para la entidad BlogPost, debemos generar un código personalizado basado en la clase de entidad anterior. La CLI de ChiselStrike ahora puede hacer esto por usted. Primero, su servidor de desarrollo local debe estar ejecutándose en un 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)

Cómo usarlo

Digamos que tiene una aplicación React y generó los archivos anteriores en su src/chiseldirectorio. Ahora puede importarlos client.tsy models.tscomenzar a usarlos en el servidor de desarrollo local. Así es como se ve si desea consultar todas las instancias de BlogPost y colocarlas en una 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()

Por supuesto, la llamada a getAlldebe estar en un enlace, y la usaría en una plantilla JSX para completar un componente.

Cómo funciona con TanStack Query

Si aún no está utilizando TanStack Query, ¡debería hacerlo! Se ocupa de gran parte del trabajo pesado que hace que las consultas a la base de datos sean fáciles y eficientes. La API del cliente ChiselStrike funciona bien con él. Así es como se vería un componente de React usando tanto TanStack como 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>
  )
}

Otras cosas que debe saber

La API del cliente es totalmente compatible con los diversos métodos HTTP admitidos por ChiselStrike y los envuelve a todos en una API fácil de usar. También comprende cualquier relación de entidades que haya establecido en su modelo.

La API utiliza internamente la API de búsqueda web estándar para realizar solicitudes HTTP. Esto significa que el TypeScript generado también funciona en entornos Node.js donde está disponible la API de recuperación. Esto es excelente si está utilizando Node 18 para renderizar previamente su sitio, ya que puede usar el mismo código de cliente para consultar el contenido para renderizar.

Para obtener documentación completa y código de muestra, consulte la documentación de la API del cliente . Y si construyes algo con ChiselStrike, háznoslo saber en nuestro Discord o Twitter . ¡Feliz cincelado!