Serverkomponenter och datahämtning med tRPC

import { appRouter } from '@/server/routers/_app';
import { createCallerFactory } from '@trpc/server';

// Create a tRPC caller that can be used on the server
const createCaller = createCallerFactory(appRouter);

export const serverClient = createCaller({});
// Context can be passed here, e.g., createCaller({ user: currentUser })

// app/page.tsx (Server Component)
import { serverClient } from '@/utils/trpc';

export default async function HomePage() {
  const posts = await serverClient.post.list(); // Call a tRPC query

  return (
    <div>
      <h1>Latest Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

// components/PostList.tsx (Client Component)
"use client";

interface Post {
  id: string;
  title: string;
}

export function PostList({ posts }: { posts: Post[] }) {
  // Client-side interactions can happen here
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

// app/page.tsx (Server Component, updated)
import { serverClient } from '@/utils/trpc';
import { PostList } from '@/components/PostList';

export default async function HomePage() {
  const posts = await serverClient.post.list();

  return (
    <div>
      <h1>Latest Posts</h1>
      <PostList posts={posts} /> {/* Pass data as props */}
    </div>
  );
}

// app/posts/[id]/page.tsx (Server Component)
import { serverClient } from '@/utils/trpc';

interface PostPageProps {
  params: { id: string };
}

export default async function PostPage({ params }: PostPageProps) {
  const { id } = params;
  const post = await serverClient.post.byId({ id }); // Pass 'id' as input

  if (!post) {
    return <div>Post not found!</div>;
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

// app/page.tsx (Server Component with error handling)
import { serverClient } from '@/utils/trpc';

export default async function HomePage() {
  let posts = [];
  let error = null;

  try {
    posts = await serverClient.post.list();
  } catch (e) {
    console.error("Failed to fetch posts:", e);
    error = "Could not load posts. Please try again.";
  }

  return (
    <div>
      <h1>Latest Posts</h1>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}