#Handling routes in last version

44 messages · Page 1 of 1 (latest)

torpid cipher
#

Hello guys.

First of all, please apologize my english, I'm from France !

I found this bit of code because I need to create the route handlers.

=========================================

import { prisma } from "@/lib/prisma";
import { NextResponse } from "next/server";

export async function GET(
request: Request,
{ params }: { params: { id: string } }
) {
const id = params.id;
const user = await prisma.user.findUnique({
where: {
id,
},
});

if (!user) {
return new NextResponse("No user with ID found", { status: 404 });
}

return NextResponse.json(user);
}

============================

It's in Typescript and I'm learning it since few days only :

I don't understand the second parameter of the GET function :

{ params } : { params: { id: string }

I know that we need the ID of the user we want to get. But I don't know why we just simply put something like that :

{ params } : { id : string }

Can somebody help me to understand please 🙂

Thanks a lot everybody !

uneven sail
#

some file conventions not only have params but also searchParams

#

so to make it consistent, even though redundant, we name the property of the object with params

#

I hope that make sense 🙏

torpid cipher
#

So i just have to copy this code

uneven sail
#

depends on your route structure @torpid cipher

torpid cipher
#

I mean the bit of code in the params

#

a dynamic route handler should always be like this, with 2 params

#

the request AND the params

uneven sail
#

yes, depends on your route strucutre.
If you have /[id]
then you can use { params } : { params: { id: string } }

uneven sail
torpid cipher
#

I have some difficulties to understand the type of the params

#

I would write like this : { params: { id: string } }

uneven sail
# torpid cipher I have some difficulties to understand the type of the params

theres only two types, either
/[categoryId]/[itemId]

the second parameter would be
{ params: { categoryId: string, itemId: string } }

if you access
/abcd/1
{ params: { categoryId: 'abcd', itemId: '1' } }

Or catch all
/[...slugs]

the second parameter would be
{ params: { slugs: string[] }

if you access
/abcd/1
{ params: { slugs: ['abcd', '1'] }

uneven sail
torpid cipher
#

here I have this route : app/api/users/[id]/route.ts

uneven sail
#

yes

#

you can

uneven sail
torpid cipher
#

so I don't have to write like this : { params }: { params: { id: string }

#

I can write like this : { params: { id: string }

uneven sail
#

no that's not how typescript works

#

first curly bracket is to destructure the object,
second curly bracket is to tell TS what is the object gonna look like

#

if ure insisten to write LESS code,

either

query : { params: { id: string } }

you can access it as query.params.id

or just { params: { id } } : any

you can access it with id instantly

torpid cipher
#

I'm struggling with nested types

#

is "params" a type ?

uneven sail
#

{ params: { id: string }}
this is a type
string is a type

BUT

params is a property name
id is a property name

#

{ ... } is an object
so you know damn sure that your GET function will receive an Object on the second parameter.
That object will consist of

  • params property
    that params property will consist of
    • id property
      that id property will be a type of string
torpid cipher
#

I see, wow

uneven sail
#

The second parameter can be receieved using a variable
either name it myQuery or secondParameter

but both myQuery and secondParameter will be in the form of object, that is the type of { params: {id:string }}

#

BUT to access the id you will need to access its properties. So you write like this myQuery.params.id

#

You can use the "destructuring" feature of JavaScript's newest version using { propertyName }

#

that is why you have { params } : ObjectType

#

the left part of the semicolon : is to destructure the object so that you can DIRECTLY access its properrties

#

To simplify, im going to use ObjectType isntead as a replacement of { params: {id:string }} (it will be the same)

So instead of using myQuery : ObjectType and accessing id with myQuery.params.id

you destructure the myQuery object using { ... }
we know that ObjectType contains the params property, so we can use that property instead
so it will look like this { params } : ObjectType and you can access id with just params.id

#

now you replace ObjectType with what is previously written
and now you have

{ params } : { params: { id: string } }
voila 🎉

torpid cipher
#

thanks a lot !!!!!!!!!

uneven sail
#

To recap:
the left part of the semicolon : is to destructure the object
the right part of the seimcolon : is to tell what the object looks like

#

I hope that make sense

torpid cipher
#

I will study it deeper 🙂

#

this Discord Channel is worth its weight in gold

#

with contributors like you