feat: list post (#102)

client/src/app.d.ts

@@ -1,7 +1,10 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 
-import type { CurrentUserFragmentFragment } from '$lib/graphql/schema';
+import type {
+  CurrentUserFragmentFragment,
+  PostEdge,
+} from '$lib/graphql/schema';
 
 declare global {
   namespace App {
@@ -11,6 +14,7 @@ declare global {
     interface PageData {
       accessToken?: string | null;
       user?: CurrentUserFragmentFragment | null;
+      posts?: PostEdge[] | null;
     }
 
     interface Locals {

client/src/lib/graphql/schema.ts

@@ -53,6 +53,19 @@ export type MutationRootUserRegisterArgs = {
   input: UserRegisterInput;
 };
 
+/** Information about pagination in a connection */
+export type PageInfo = {
+  __typename?: 'PageInfo';
+  /** When paginating forwards, the cursor to continue. */
+  endCursor?: Maybe<Scalars['String']['output']>;
+  /** When paginating forwards, are there more items? */
+  hasNextPage: Scalars['Boolean']['output'];
+  /** When paginating backwards, are there more items? */
+  hasPreviousPage: Scalars['Boolean']['output'];
+  /** When paginating backwards, the cursor to continue. */
+  startCursor?: Maybe<Scalars['String']['output']>;
+};
+
 export type Post = {
   __typename?: 'Post';
   authorId: Scalars['Pxid']['output'];
@@ -65,6 +78,16 @@ export type Post = {
   updatedAt: Scalars['DateTime']['output'];
 };
 
+export type PostConnection = {
+  __typename?: 'PostConnection';
+  /** A list of edges. */
+  edges: Array<PostEdge>;
+  /** A list of nodes. */
+  nodes: Array<Post>;
+  /** Information to aid in pagination. */
+  pageInfo: PageInfo;
+};
+
 export type PostCreate = {
   __typename?: 'PostCreate';
   error?: Maybe<PostError>;
@@ -77,6 +100,15 @@ export type PostCreateInput = {
   title: Scalars['String']['input'];
 };
 
+/** An edge in a connection. */
+export type PostEdge = {
+  __typename?: 'PostEdge';
+  /** A cursor for use in pagination */
+  cursor: Scalars['String']['output'];
+  /** The item at the end of the edge */
+  node: Post;
+};
+
 export type PostError = {
   __typename?: 'PostError';
   code: PostErrorCode;
@@ -92,6 +124,15 @@ export enum PostErrorCode {
 export type QueryRoot = {
   __typename?: 'QueryRoot';
   me: Me;
+  posts: PostConnection;
+};
+
+
+export type QueryRootPostsArgs = {
+  after?: InputMaybe<Scalars['Pxid']['input']>;
+  before?: InputMaybe<Scalars['Pxid']['input']>;
+  first?: InputMaybe<Scalars['Int']['input']>;
+  last?: InputMaybe<Scalars['Int']['input']>;
 };
 
 export type TokenCreate = {
@@ -146,6 +187,13 @@ export type GetCurrentUserQuery = { __typename?: 'QueryRoot', me: { __typename?:
 
 export type CurrentUserFragment = { __typename?: 'User', id: any, name: string, surname: string, email: string, username: string, createdAt: any, updatedAt: any };
 
+export type GetPostsQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetPostsQuery = { __typename?: 'QueryRoot', posts: { __typename?: 'PostConnection', edges: Array<{ __typename?: 'PostEdge', node: { __typename?: 'Post', id: any, authorId: any, parentId?: any | null, head: boolean, title: string, content: string, createdAt: any, updatedAt: any } }>, pageInfo: { __typename?: 'PageInfo', hasPreviousPage: boolean, hasNextPage: boolean, startCursor?: string | null, endCursor?: string | null }, nodes: Array<{ __typename?: 'Post', id: any, authorId: any, parentId?: any | null, head: boolean, title: string, content: string, createdAt: any, updatedAt: any }> } };
+
+export type CurrentPostFragment = { __typename?: 'Post', id: any, authorId: any, parentId?: any | null, head: boolean, title: string, content: string, createdAt: any, updatedAt: any };
+
 export type PostCreateMutationVariables = Exact<{
   input: PostCreateInput;
 }>;
@@ -179,6 +227,18 @@ export const CurrentUserFragmentDoc = gql`
   updatedAt
 }
     `;
+export const CurrentPostFragmentDoc = gql`
+    fragment CurrentPost on Post {
+  id
+  authorId
+  parentId
+  head
+  title
+  content
+  createdAt
+  updatedAt
+}
+    `;
 export const GetCurrentUserDocument = gql`
     query GetCurrentUser {
   me {
@@ -188,6 +248,26 @@ export const GetCurrentUserDocument = gql`
   }
 }
     ${CurrentUserFragmentDoc}`;
+export const GetPostsDocument = gql`
+    query GetPosts {
+  posts {
+    edges {
+      node {
+        ...CurrentPost
+      }
+    }
+    pageInfo {
+      hasPreviousPage
+      hasNextPage
+      startCursor
+      endCursor
+    }
+    nodes {
+      ...CurrentPost
+    }
+  }
+}
+    ${CurrentPostFragmentDoc}`;
 export const PostCreateDocument = gql`
     mutation PostCreate($input: PostCreateInput!) {
   postCreate(input: $input) {

client/src/routes/(app)/+page.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
   import { page } from '$app/stores';
+  import Post from './components/Post.svelte';
   import PostBox from './components/PostBox.svelte';
 </script>
 
 <div class="px-4 pt-6 space-y-6 sm:w-full lg:w-1/2">
   Welcome back {$page.data.user.name}!
   <PostBox />
+  {#each $page.data.posts || [] as { node: post }}
+    <Post {post} />
+  {/each}
 </div>

client/src/routes/(app)/+page.ts

@@ -0,0 +1,10 @@
+import type { PostEdge } from '$lib/graphql/schema.js';
+
+/** @type {import('./$types').PageLoad} */
+export async function load({ fetch }) {
+  const response = await fetch('/get-posts');
+  const data = await response.json();
+  return {
+    posts: data as PostEdge[],
+  };
+}

client/src/routes/(app)/components/Post.svelte

@@ -1,33 +1,22 @@
 <script lang="ts">
   import Card from '$lib/components/Card.svelte';
+  import type { Post } from '$lib/graphql/schema';
 
-  import Avatar from './Navbar/Avatar.svelte';
-  export let post: any = {
-    id: 1,
-    title: 'title',
-    content: 'body',
-    createdAt: '24/12/2023',
-    user: {
-      id: 1,
-      name: 'Michael',
-      surname: 'Liendo',
-      username: 'MichaelLiendo',
-    },
-  };
+  // import Avatar from './Navbar/Avatar.svelte';
+  export let post: Post;
 </script>
 
 <Card>
   <header class="flex items-center justify-start">
-    <Avatar user={post.user} size="md" />
+    <!-- <Avatar user={{ name: 'John', surname: 'Doe' }} size="md" /> -->
     <div class="flex flex-col px-2">
-      <strong class="text-gray-800">{post.user.username}</strong>
+      <h1 class="text-gray-800">{post.title}</h1>
       <span class="text-gray-400 text-sm"
         >{new Date(post.createdAt).toLocaleDateString()}</span
       >
     </div>
   </header>
   <main class="pt-4">
-    <h1 class="text-2xl font-bold">{post.title}</h1>
-    <p>{post.content}</p>
+    <p class="text-lg">{post.content}</p>
   </main>
 </Card>

client/src/routes/(app)/get-posts/+server.ts

@@ -0,0 +1,43 @@
+import { GetPostsDocument, type PostConnection } from '$lib/graphql/schema';
+import { Client, cacheExchange, createClient, fetchExchange } from '@urql/core';
+
+async function getPosts(urqlClient: Client) {
+  const response = await urqlClient
+    .query(GetPostsDocument, {}, { requestPolicy: 'network-only' })
+    .toPromise();
+
+  if (response?.error || response?.data?.posts?.error) {
+    if (response?.data?.posts?.error) {
+      const error = response?.data?.posts?.error;
+
+      throw new Error(error);
+    }
+
+    throw response?.error;
+  }
+
+  return (response?.data?.posts as PostConnection).edges;
+}
+
+export const GET = async ({ request }: { request: Request }) => {
+  try {
+    const urqlClient = createClient({
+      url: import.meta.env.VITE_GRAPHQL_URL,
+      exchanges: [cacheExchange, fetchExchange],
+    });
+
+    const posts = await getPosts(urqlClient);
+
+    return new Response(JSON.stringify(posts), { status: 200 });
+  } catch (err) {
+    console.log(err);
+
+    return new Response(
+      JSON.stringify({
+        message: 'Internal Server Error',
+        error: (err as { message: string })?.message,
+      }),
+      { status: 500 },
+    );
+  }
+};

client/src/routes/(app)/graphql/GetPosts.gql

@@ -0,0 +1,29 @@
+query GetPosts {
+  posts {
+    edges {
+      node {
+        ...CurrentPost
+      }
+    }
+    pageInfo {
+      hasPreviousPage
+      hasNextPage
+      startCursor
+      endCursor
+    }
+    nodes {
+      ...CurrentPost
+    }
+  }
+}
+
+fragment CurrentPost on Post {
+  id
+  authorId
+  parentId
+  head
+  title
+  content
+  createdAt
+  updatedAt
+}