Skip to main content

Frontend Data Access

ZenStack has a small core, and many of its functionalities are implemented as plugins. Generating a frontend data access library is an excellent example of such a plugin. For example, you can enable the generation of TanStack Query hooks (for React) as follows:

plugin hooks {
provider = "@zenstackhq/tanstack-query"
output = "./src/lib/hooks"
target = "react"

The generated hooks provide a set of APIs that closely mirror that of Prisma Client and call into the automatic CRUD API introduced in the previous section. Here're a few examples of using them:

import type { Post } from '@prisma/client';
import { useFindManyPost, useCreatePost } from '../lib/hooks';

// post list component
const Posts = ({ userId }: { userId: string }) => {
const create = useCreatePost();

// list all posts that're visible to the current user, together with their authors
const { data: posts } = useFindManyPost({
include: { author: true },
orderBy: { createdAt: 'desc' },

async function onCreatePost() {
data: {
title: 'My awesome post',
authorId: userId,

return (
<button onClick={onCreatePost}>Create</button>
{posts?.map((post) => (
<li key={}>
{post.title} by {}

ZenStack currently provides plugins for generating client hooks targeting TanStack Query (which supports React and Vue) and SWR (React only).