Siamo lieti di annunciare il rilascio di ChiselStrike 0.15, offrendo ai nostri sviluppatori un'API client TypeScript da utilizzare nelle applicazioni Web e nei programmi Node.js. Abbiamo sempre avuto un'API REST generata automaticamente derivata dal tuo modello di dati e questo client ora semplifica notevolmente il lavoro, in particolare con le app a pagina singola. È stato progettato specificamente per funzionare con TanStack Query , uno strumento popolare per la gestione delle query e il miglioramento delle loro prestazioni nelle applicazioni web.

Qual è il vantaggio?

Le applicazioni basate su ChiselStrike in genere dichiarano una o più entità per descrivere il proprio modello di dati. Le entità sono semplicemente classi TypeScript aggiunte a modelsuna directory di origine speciale, come questa:

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

Come funziona

Affinché il codice client abbia i tipi appropriati per l'entità BlogPost, dobbiamo generare del codice su misura basato sulla classe di entità sopra. La CLI di ChiselStrike ora può farlo per te. Innanzitutto il tuo server di sviluppo locale deve essere in esecuzione in una 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)

Come usarlo

Diciamo che hai un'app React e hai generato i file sopra nella sua src/chiseldirectory. Ora puoi importare client.tse models.tsiniziare a usarli sul server di sviluppo locale. Ecco come appare se desideri eseguire una query per tutte le istanze di BlogPost e inserirle in un array:

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

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

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

Ovviamente, la chiamata a getAlldovrebbe essere in un hook e la useresti in un modello JSX per popolare un componente.

Come funziona con TanStack Query

Se non stai ancora utilizzando TanStack Query, dovresti! Si occupa di gran parte del lavoro pesante che rende le query del database facili ed efficienti. L'API client ChiselStrike funziona bene con esso. Ecco come potrebbe apparire un componente React utilizzando TanStack e ChiselStrike in modo minimo:

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

Altre cose da sapere

L'API client ha il pieno supporto per i vari metodi HTTP supportati da ChiselStrike e li racchiude tutti in un'API di facile utilizzo. Comprende anche qualsiasi relazione di entità che potresti aver stabilito nel tuo modello.

L'API utilizza internamente l'API web fetch standard per eseguire le richieste HTTP. Ciò significa che il TypeScript generato funziona anche negli ambienti Node.js in cui è disponibile l'API di recupero. Questo è fantastico se stai utilizzando Node 18 per eseguire il prerendering del tuo sito, poiché puoi utilizzare lo stesso codice client per richiedere il rendering del contenuto.

Per la documentazione completa e il codice di esempio, consulta la documentazione dell'API client . E se costruisci qualcosa con ChiselStrike, faccelo sapere sul nostro Discord o Twitter . Buona cesellatura!