Z przyjemnością ogłaszamy wydanie ChiselStrike 0.15, które zapewnia naszym programistom interfejs API klienta TypeScript do użytku w aplikacjach internetowych i programach Node.js. Zawsze mieliśmy automatycznie generowany REST API pochodzący z twojego modelu danych, a ten klient znacznie ułatwia teraz pracę, zwłaszcza z aplikacjami jednostronicowymi. Został zaprojektowany specjalnie do współpracy z TanStack Query , popularnym narzędziem do zarządzania zapytaniami i poprawiania ich wydajności w aplikacjach internetowych.

Jaka jest korzyść?

Aplikacje zbudowane na ChiselStrike zazwyczaj deklarują jedną lub więcej jednostek, aby opisać swój model danych. Jednostki to po prostu klasy TypeScript dodawane do specjalnego modelskatalogu źródłowego, na przykład:

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

Jak to działa

Aby kod klienta miał odpowiednie typy dla encji BlogPost, musimy wygenerować kod na zamówienie w oparciu o powyższą klasę encji. ChiselStrike CLI może teraz zrobić to za Ciebie. Najpierw twój lokalny serwer deweloperski musi działać w powłoce:

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

Jak tego użyć

Załóżmy, że masz aplikację React i wygenerowałeś powyższe pliki w jej src/chiselkatalogu. Teraz możesz je zaimportować client.tsi models.tszacząć używać na lokalnym serwerze deweloperskim. Oto jak to wygląda, jeśli chcesz zapytać o wszystkie instancje BlogPost i umieścić je w tablicy:

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

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

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

Oczywiście wywołanie to getAllpowinno znajdować się w haku i użyłbyś go w szablonie JSX do wypełnienia komponentu.

Jak to działa z TanStack Query

Jeśli jeszcze nie używasz TanStack Query, powinieneś! Zajmuje się wieloma ciężkimi zadaniami, dzięki którym zapytania do bazy danych są łatwe i wydajne. Interfejs API klienta ChiselStrike działa z nim dobrze. Oto jak mógłby wyglądać komponent React, używając zarówno TanStack, jak i ChiselStrike w minimalny sposób:

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

Inne rzeczy, które warto wiedzieć

Interfejs API klienta w pełni obsługuje różne metody HTTP obsługiwane przez ChiselStrike i zawiera je wszystkie w łatwym w użyciu interfejsie API. Rozumie również wszelkie relacje encji, które mogłeś ustanowić w swoim modelu.

Interfejs API wewnętrznie używa standardowego interfejsu API pobierania z sieci Web do wykonywania żądań HTTP. Oznacza to, że wygenerowany TypeScript działa również w środowiskach Node.js, w których dostępne jest API pobierania. Jest to świetne, jeśli używasz Node 18 do wstępnego renderowania swojej witryny, ponieważ możesz użyć tego samego kodu klienta do zapytania o treść do renderowania.

Aby uzyskać obszerną dokumentację i przykładowy kod, zapoznaj się z dokumentacją interfejsu API klienta . A jeśli zbudujesz coś za pomocą ChiselStrike, daj nam znać na naszym Discordzie lub Twitterze . Miłego dłutowania!