Qwik City

// src/routes/index.tsx
import { component$ } from '@builder.io/qwik';
import { routeLoader$ } from '@builder.io/qwik-city';

export const useGetPosts = routeLoader$(async () => {
  const posts = await db.post.findMany();
  return posts;
});

export default component$(() => {
  const posts = useGetPosts();

  return (
    <div>
      <h1>المقالات</h1>
      <ul>
        {posts.value.map(post => (
          <li key={post.id}>
            <a href={`/posts/${post.id}`}>{post.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
});

// src/routes/posts/[id]/index.tsx
import { component$ } from '@builder.io/qwik';
import { routeLoader$, server$ } from '@builder.io/qwik-city';

export const useGetPost = routeLoader$(async ({ params }) => {
  const post = await db.post.findUnique({ 
    where: { id: params.id } 
  });
  return post;
});

export const updatePost = server$(async (id: string, data: any) => {
  await db.post.update({ where: { id }, data });
});

export default component$(() => {
  const post = useGetPost();

  return (
    <article>
      <h1>{post.value?.title}</h1>
      <p>{post.value?.content}</p>
    </article>
  );
});