- Update trpc-client.ts with auth token management - Create comprehensive tRPC hooks for all project operations - Store Clerk session token in localStorage for API auth - Clear token on sign out - Support integer IDs matching backend schema Hooks created: - Projects: useProjects, useProject, useCreateProject, useUpdateProject, useDeleteProject - Characters: useCharacters, useCharacter, useCreateCharacter, useUpdateCharacter, useDeleteCharacter - Relationships: useRelationships, useCharacterRelationships, useCreateRelationship, useUpdateRelationship, useDeleteRelationship - Scenes: useScenes, useScene, useCreateScene, useUpdateScene, useDeleteScene - Stats: useCharacterStats, useProjectCharacterStats All 34 backend tests passing.
40 lines
1020 B
TypeScript
40 lines
1020 B
TypeScript
import { createTRPCClient, httpBatchLink } from '@trpc/client';
|
|
import type { AppRouter } from '../../../server/trpc';
|
|
|
|
let cachedToken: string | null = null;
|
|
|
|
function getAuthToken(): string | null {
|
|
if (typeof window === 'undefined') return null;
|
|
if (cachedToken) return cachedToken;
|
|
cachedToken = localStorage.getItem('auth_token');
|
|
return cachedToken;
|
|
}
|
|
|
|
export function setAuthToken(token: string | null) {
|
|
cachedToken = token;
|
|
if (typeof window !== 'undefined') {
|
|
if (token) {
|
|
localStorage.setItem('auth_token', token);
|
|
} else {
|
|
localStorage.removeItem('auth_token');
|
|
}
|
|
}
|
|
}
|
|
|
|
// Create tRPC client with auth
|
|
export const trpc = createTRPCClient<AppRouter>({
|
|
links: [
|
|
httpBatchLink({
|
|
url: `${(import.meta as any).env?.VITE_API_URL || 'http://localhost:8080'}/trpc`,
|
|
headers: () => {
|
|
const token = getAuthToken();
|
|
return {
|
|
authorization: token ? `Bearer ${token}` : '',
|
|
};
|
|
},
|
|
}),
|
|
],
|
|
});
|
|
|
|
export type { AppRouter };
|