feat(api): add react-query client generation and redesign api responses

This commit is contained in:
Dominik 2025-06-12 19:47:05 +02:00
parent 6c9569ae40
commit 3a0ce64c00
Signed by: dominik
GPG key ID: 06A4003FC5049644
12 changed files with 2026 additions and 119 deletions

2
.gitignore vendored
View file

@ -43,5 +43,5 @@ next-env.d.ts
# database
/prisma/*.db*
src/generated/prisma
src/generated/*
data

View file

@ -16,6 +16,8 @@ RUN corepack enable
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN yarn prisma:generate
RUN yarn swagger:generate
RUN yarn orval:generate
RUN yarn build
# ----- Runner -----

51
next-swagger-doc.json Normal file
View file

@ -0,0 +1,51 @@
{
"apiFolder": "src/app/api",
"definition": {
"openapi": "3.0.0",
"info": {
"title": "MeetUP API",
"version": "1.0"
},
"components": {
"schemas": {
"ErrorResponse": {
"type": "object",
"properties": {
"success": {
"type": "boolean",
"default": false
},
"message": {
"type": "string",
"description": "Error message"
}
}
},
"User": {
"type": "object",
"properties": {
"id": { "type": "string" },
"name": { "type": "string" },
"first_name": { "type": "string" },
"last_name": { "type": "string" },
"email": { "type": "string", "format": "email" },
"image": { "type": "string", "format": "uri" },
"timezone": { "type": "string", "description": "User timezone" }
}
},
"PublicUser": {
"type": "object",
"properties": {
"id": { "type": "string" },
"name": { "type": "string" },
"first_name": { "type": "string" },
"last_name": { "type": "string" },
"image": { "type": "string", "format": "uri" },
"timezone": { "type": "string", "description": "User timezone" }
}
}
}
},
"security": []
}
}

10
orval.config.js Normal file
View file

@ -0,0 +1,10 @@
module.exports = {
meetup: {
input: './src/generated/swagger.json',
output: {
mode: 'tags-split',
target: './src/generated/api/meetup.ts',
client: 'react-query',
},
},
};

View file

@ -13,7 +13,9 @@
"prisma:studio": "dotenv -e .env.local -- prisma studio",
"prisma:db:push": "dotenv -e .env.local -- prisma db push",
"prisma:migrate:reset": "dotenv -e .env.local -- prisma migrate reset",
"dev_container": "docker compose -f docker-compose.dev.yml up --watch --build"
"dev_container": "docker compose -f docker-compose.dev.yml up --watch --build",
"swagger:generate": "next-swagger-doc-cli next-swagger-doc.json --output src/generated/swagger.json",
"orval:generate": "orval"
},
"dependencies": {
"@auth/prisma-adapter": "^2.9.1",
@ -33,6 +35,7 @@
"@radix-ui/react-slot": "^1.2.2",
"@radix-ui/react-switch": "^1.2.4",
"@radix-ui/react-tabs": "^1.1.11",
"@tanstack/react-query": "^5.80.7",
"bcryptjs": "^3.0.2",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
@ -59,6 +62,7 @@
"eslint": "9.29.0",
"eslint-config-next": "15.3.4",
"eslint-config-prettier": "10.1.5",
"orval": "^7.10.0",
"postcss": "8.5.6",
"prettier": "3.5.3",
"prisma": "6.9.0",

View file

@ -20,7 +20,13 @@ import { prisma } from '@/prisma';
* content:
* application/json:
* schema:
* $ref: '#/components/schemas/PublicUser'
* type: 'object'
* properties:
* success:
* type: 'boolean'
* default: true
* user:
* $ref: '#/components/schemas/PublicUser'
* 401:
* description: User is not authenticated.
* content:
@ -29,7 +35,8 @@ import { prisma } from '@/prisma';
* $ref: '#/components/schemas/ErrorResponse'
* example:
* {
* message: 'Not authenticated'
* success: false,
* message: 'Not authenticated',
* }
* 404:
* description: User not found.
@ -39,34 +46,44 @@ import { prisma } from '@/prisma';
* $ref: '#/components/schemas/ErrorResponse'
* example:
* {
* success: false,
* message: 'User not found'
* }
*/
*/
export const GET = auth(async function GET(req, { params }) {
if (!req.auth)
return NextResponse.json({ message: 'Not authenticated' }, { status: 401 });
return NextResponse.json(
{ success: false, message: 'Not authenticated' },
{ status: 401 },
);
if (!req.auth.user || !req.auth.user.id)
return NextResponse.json({ message: 'User not found' }, { status: 404 });
return NextResponse.json(
{ success: false, message: 'User not found' },
{ status: 404 },
);
const requestedUser = (await params).user;
const dbUser = await prisma.user.findFirst({
where: {
OR: [
{ id: requestedUser },
{ name: requestedUser },
],
OR: [{ id: requestedUser }, { name: requestedUser }],
},
});
if (!dbUser)
return NextResponse.json({ message: 'User not found' }, { status: 404 });
return NextResponse.json(
{ success: false, message: 'User not found' },
{ status: 404 },
);
return NextResponse.json({
id: dbUser.id,
name: dbUser.name,
first_name: dbUser.first_name,
last_name: dbUser.last_name,
timezone: dbUser.timezone,
image: dbUser.image,
success: true,
user: {
id: dbUser.id,
name: dbUser.name,
first_name: dbUser.first_name,
last_name: dbUser.last_name,
timezone: dbUser.timezone,
image: dbUser.image,
},
});
});

View file

@ -20,7 +20,13 @@ import {
* content:
* application/json:
* schema:
* $ref: '#/components/schemas/User'
* type: object
* properties:
* success:
* type: boolean
* default: true
* user:
* $ref: '#/components/schemas/User'
* 401:
* description: User is not authenticated.
* content:
@ -29,6 +35,7 @@ import {
* $ref: '#/components/schemas/ErrorResponse'
* example:
* {
* success: false,
* message: 'Not authenticated'
* }
* 404:
@ -39,14 +46,21 @@ import {
* $ref: '#/components/schemas/ErrorResponse'
* example:
* {
* success: false,
* message: 'User not found'
* }
*/
export const GET = auth(async function GET(req) {
if (!req.auth)
return NextResponse.json({ message: 'Not authenticated' }, { status: 401 });
return NextResponse.json(
{ success: false, message: 'Not authenticated' },
{ status: 401 },
);
if (!req.auth.user || !req.auth.user.id)
return NextResponse.json({ message: 'User not found' }, { status: 404 });
return NextResponse.json(
{ success: false, message: 'User not found' },
{ status: 404 },
);
const dbUser = await prisma.user.findUnique({
where: {
@ -54,13 +68,19 @@ export const GET = auth(async function GET(req) {
},
});
if (!dbUser)
return NextResponse.json({ message: 'User not found' }, { status: 404 });
return NextResponse.json(
{ success: false, message: 'User not found' },
{ status: 404 },
);
return NextResponse.json(
{
...dbUser,
password_hash: undefined, // Exclude sensitive information
email_verified: undefined, // Exclude sensitive information
success: true,
user: {
...dbUser,
password_hash: undefined, // Exclude sensitive information
email_verified: undefined, // Exclude sensitive information
},
},
{ status: 200 },
);
@ -102,7 +122,13 @@ export const GET = auth(async function GET(req) {
* content:
* application/json:
* schema:
* $ref: '#/components/schemas/User'
* type: object
* properties:
* success:
* type: boolean
* default: true
* user:
* $ref: '#/components/schemas/User'
* 401:
* description: User is not authenticated.
* content:
@ -111,6 +137,7 @@ export const GET = auth(async function GET(req) {
* $ref: '#/components/schemas/ErrorResponse'
* example:
* {
* success: false,
* message: 'Not authenticated'
* }
* 404:
@ -121,6 +148,7 @@ export const GET = auth(async function GET(req) {
* $ref: '#/components/schemas/ErrorResponse'
* example:
* {
* success: false,
* message: 'User not found'
* }
* 400:
@ -131,20 +159,27 @@ export const GET = auth(async function GET(req) {
* $ref: '#/components/schemas/ErrorResponse'
* example:
* {
* success: false,
* message: 'No fields to update'
* }
*/
export const PUT = auth(async function PUT(req) {
if (!req.auth)
return NextResponse.json({ message: 'Not authenticated' }, { status: 401 });
return NextResponse.json(
{ success: false, message: 'Not authenticated' },
{ status: 401 },
);
if (!req.auth.user)
return NextResponse.json({ message: 'User not found' }, { status: 404 });
return NextResponse.json(
{ success: false, message: 'User not found' },
{ status: 404 },
);
const body = await req.json();
const { name, first_name, last_name, email, image, timezone } = body;
if (!name && !first_name && !last_name && !email && !image && !timezone)
return NextResponse.json(
{ message: 'No fields to update' },
{ success: false, message: 'No fields to update' },
{ status: 400 },
);
const updateData: Record<string, string> = {};
@ -152,7 +187,7 @@ export const PUT = auth(async function PUT(req) {
const nameValidation = userNameSchema.safeParse(name);
if (!nameValidation.success) {
return NextResponse.json(
{ message: nameValidation.error.errors[0].message },
{ success: false, message: nameValidation.error.errors[0].message },
{ status: 400 },
);
}
@ -160,9 +195,12 @@ export const PUT = auth(async function PUT(req) {
const existingUser = await prisma.user.findUnique({
where: { name },
});
if ((existingUser && existingUser.id !== req.auth.user.id) || disallowedUsernames.includes(name.toLowerCase())) {
if (
(existingUser && existingUser.id !== req.auth.user.id) ||
disallowedUsernames.includes(name.toLowerCase())
) {
return NextResponse.json(
{ message: 'Username in use by another account' },
{ success: false, message: 'Username in use by another account' },
{ status: 400 },
);
}
@ -172,7 +210,10 @@ export const PUT = auth(async function PUT(req) {
const firstNameValidation = userFirstNameSchema.safeParse(first_name);
if (!firstNameValidation.success) {
return NextResponse.json(
{ message: firstNameValidation.error.errors[0].message },
{
success: false,
message: firstNameValidation.error.errors[0].message,
},
{ status: 400 },
);
}
@ -182,7 +223,7 @@ export const PUT = auth(async function PUT(req) {
const lastNameValidation = userLastNameSchema.safeParse(last_name);
if (!lastNameValidation.success) {
return NextResponse.json(
{ message: lastNameValidation.error.errors[0].message },
{ success: false, message: lastNameValidation.error.errors[0].message },
{ status: 400 },
);
}
@ -192,7 +233,7 @@ export const PUT = auth(async function PUT(req) {
const emailValidation = userEmailSchema.safeParse(email);
if (!emailValidation.success) {
return NextResponse.json(
{ message: emailValidation.error.errors[0].message },
{ success: false, message: emailValidation.error.errors[0].message },
{ status: 400 },
);
}
@ -202,7 +243,7 @@ export const PUT = auth(async function PUT(req) {
});
if (existingUser && existingUser.id !== req.auth.user.id) {
return NextResponse.json(
{ message: 'Email in use by another account' },
{ success: false, message: 'Email in use by another account' },
{ status: 400 },
);
}
@ -221,12 +262,18 @@ export const PUT = auth(async function PUT(req) {
data: updateData,
});
if (!updatedUser)
return NextResponse.json({ message: 'User not found' }, { status: 404 });
return NextResponse.json(
{ success: false, message: 'User not found' },
{ status: 404 },
);
return NextResponse.json(
{
...updatedUser,
password_hash: undefined, // Exclude sensitive information
email_verified: undefined, // Exclude sensitive information
success: true,
user: {
...updatedUser,
password_hash: undefined, // Exclude sensitive information
email_verified: undefined, // Exclude sensitive information
},
},
{ status: 200 },
);

View file

@ -1,12 +1,17 @@
"use client";
import { RedirectButton } from '@/components/buttons/redirect-button';
import { ThemePicker } from '@/components/misc/theme-picker';
import { useGetApiUserMe } from '@/generated/api/default/default';
export default function Home() {
const { data, isLoading } = useGetApiUserMe();
return (
<div className='flex flex-col items-center justify-center h-screen'>
<div className='absolute top-4 right-4'>{<ThemePicker />}</div>
<div>
<h1>Home</h1>
<h1>Hello {isLoading ? 'Loading...' : data?.data.user?.name || 'Unknown User'}</h1>
<RedirectButton redirectUrl='/logout' buttonText='Logout' />
<RedirectButton redirectUrl='/settings' buttonText='Settings' />
</div>

View file

@ -2,6 +2,7 @@ import { ThemeProvider } from '@/components/wrappers/theme-provider';
import type { Metadata } from 'next';
import './globals.css';
import { QueryProvider } from '@/components/query-provider';
export const metadata: Metadata = {
title: 'MeetUp',
@ -55,7 +56,7 @@ export default function RootLayout({
enableSystem
disableTransitionOnChange
>
{children}
<QueryProvider>{children}</QueryProvider>
</ThemeProvider>
</body>
</html>

View file

@ -0,0 +1,12 @@
'use client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import * as React from 'react';
const queryClient = new QueryClient();
export function QueryProvider({ children }: { children: React.ReactNode }) {
return (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
);
}

View file

@ -1,61 +1,8 @@
import { createSwaggerSpec } from 'next-swagger-doc';
import swaggerConfig from '../../next-swagger-doc.json';
export const getApiDocs = async () => {
const spec = createSwaggerSpec({
apiFolder: 'src/app/api',
definition: {
openapi: '3.0.0',
info: {
title: 'MeetUP API',
version: '1.0',
},
// components: {
// securitySchemes: {
// BearerAuth: {
// type: "http",
// scheme: "bearer",
// bearerFormat: "JWT",
// },
// },
// },
components:{
schemas: {
ErrorResponse: {
type: 'object',
properties: {
message: {
type: 'string',
description: 'Error message',
},
},
},
User: {
type: 'object',
properties: {
id: { type: 'string' },
name: { type: 'string' },
first_name: { type: 'string' },
last_name: { type: 'string' },
email: { type: 'string', format: 'email' },
image: { type: 'string', format: 'uri' },
timezone: { type: 'string', description: 'User timezone' },
},
},
PublicUser: {
type: 'object',
properties: {
id: { type: 'string' },
name: { type: 'string' },
first_name: { type: 'string' },
last_name: { type: 'string' },
image: { type: 'string', format: 'uri' },
timezone: { type: 'string', description: 'User timezone' },
},
},
},
},
security: [],
},
});
const spec = createSwaggerSpec(swaggerConfig);
return spec;
};

1853
yarn.lock

File diff suppressed because it is too large Load diff