fictionarchive-web/README.md

@@ -30,7 +30,7 @@ VITE_CODEGEN_TOKEN=your_api_token
 
 ## Project notes
 
-- `src/apolloClient.ts` configures the Apollo client with `InMemoryCache` and reads `VITE_GRAPHQL_URI`.
+- `src/apolloClient.ts` configures the Apollo client with `InMemoryCache`, reads `VITE_GRAPHQL_URI`, and attaches an `Authorization: Bearer` header when an OIDC user is present.
 - GraphQL code generation is configured via `codegen.ts` (loads `.env`/`.env.local` automatically); run `npm run codegen` to emit typed hooks to `src/__generated__/graphql.ts` (ignored by git) or rely on the `prebuild` hook.
 - Routing is handled in `src/App.tsx` with `react-router-dom`; `/` renders the novels listing and `/novels/:id` is stubbed for future detail pages.
 - Styles live primarily in `src/index.css` alongside the shared UI components.

fictionarchive-web/src/apolloClient.ts

@@ -1,8 +1,30 @@
 import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
+import {SetContextLink} from '@apollo/client/link/context'
+import { userManager } from './auth/oidcClient'
 
 const uri = import.meta.env.VITE_GRAPHQL_URI ?? 'https://localhost:5001/graphql'
 
+const httpLink = new HttpLink({ uri })
+
+const authLink = new SetContextLink(async ({ headers }, _) => {
+  if (!userManager) return { headers }
+  try {
+    const user = await userManager.getUser()
+    const token = user?.access_token
+    if (!token) return { headers }
+    return {
+      headers: {
+        ...headers,
+        Authorization: `Bearer ${token}`,
+      },
+    }
+  } catch (error) {
+    console.warn('Failed to load user for auth header', error)
+    return { headers }
+  }
+})
+
 export const apolloClient = new ApolloClient({
-  link: new HttpLink({ uri }),
+  link: authLink.concat(httpLink),
   cache: new InMemoryCache(),
 })

fictionarchive-web/src/pages/NovelsPage.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useMemo } from 'react'
 
 import { useNovelsQuery } from '../__generated__/graphql'
 import { NovelCard } from '../components/NovelCard'
@@ -8,9 +8,8 @@ import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card'
 const PAGE_SIZE = 12
 
 export function NovelsPage() {
-  const [after, setAfter] = useState<string | null>(null)
   const { data, loading, error, fetchMore } = useNovelsQuery({
-    variables: { first: PAGE_SIZE, after },
+    variables: { first: PAGE_SIZE, after: null },
     notifyOnNetworkStatusChange: true,
   })
 
@@ -26,7 +25,7 @@ export function NovelsPage() {
 
   async function handleLoadMore() {
     if (!hasNextPage || !endCursor) return
-    const result = await fetchMore({
+    await fetchMore({
       variables: { after: endCursor, first: PAGE_SIZE },
       updateQuery: (prev, { fetchMoreResult }) => {
         if (!fetchMoreResult?.novels?.edges) return prev
@@ -43,8 +42,6 @@ export function NovelsPage() {
         }
       },
     })
-
-    setAfter(result.data?.novels?.pageInfo?.endCursor ?? null)
   }
 
   return (
@@ -61,9 +58,9 @@ export function NovelsPage() {
       {loading && !data && (
         <Card>
           <CardContent>
-            <p className="py-4 text-sm text-muted-foreground">
+            <div className="flex items-center justify-center py-8">
-              Loading novels...
+              <div className="h-10 w-10 animate-spin rounded-full border-2 border-primary border-t-transparent" aria-label="Loading novels" />
-            </p>
+            </div>
           </CardContent>
         </Card>
       )}