
Qwik City Has a Free API That Most Developers Don't Know About
Qwik City is the full-stack meta-framework for Qwik that provides file-based routing, server-side data loading, and edge-ready deployment with zero JS by default. Routeloader (Server Data) // src/routes/posts/index.tsx import { routeLoader$ } from " @builder.io/qwik-city " ; export const usePosts = routeLoader $ ( async ({ query }) => { const page = parseInt ( query . get ( " page " ) || " 1 " ); const res = await fetch ( `https://api.example.com/posts?page= ${ page } ` ); return res . json (); }); export default component $ (() => { const posts = usePosts (); return ( < ul > { posts . value . map ( post => ( < li key = { post . id } > { post . title } < /li > ))} < /ul > ); }); RouteAction (Server Mutations) import { routeAction$ , zod$ , z } from " @builder.io/qwik-city " ; export const useCreatePost = routeAction $ ( async ( data , { redirect }) => { await db . post . create ({ data }); throw redirect ( 303 , " /posts " ); }, zod $ ({ title : z . string (). min ( 1 ), content : z .
Continue reading on Dev.to Webdev
Opens in a new tab

