Questions about App Router's Route Handlers
Answered
Sphecid wasp posted this in #help-forum
Sphecid waspOP
Hi, am I right in assuming that you can use a library like React Query to hit an endpoint defined by a route handler or are they only accessible to pages?
Let's say I create an api folder in the app folder. Is the route to that endpoint going to be
Does anyone have any organization tips? Seems so weird to just have one route.ts file per folder.
Let's say I create an api folder in the app folder. Is the route to that endpoint going to be
/api/route-name using the appropriate HTTP verb?Does anyone have any organization tips? Seems so weird to just have one route.ts file per folder.
Answered by LuisLl
Exacly, you can inline your data fetching logic in Server Components. And for mutations (POST, PUT, DELETE) you don't even need to spin up Route Handlers, you can use Server Actions and takes away so much boilerplate, plus is fully type safe and can be called from Client Components. You can even pass the Server Action to React Query useMutation hook
10 Replies
You can export different async functions from that route.ts that will map to the corresponding HTTP method:
export async function GET(){}
export async function POST(){}
export async function PUT(){}
export async function DELETE(){}And yes you can hit these endpoints from anywhere in your app, especially in client components in a
To indicate the Method you wanna hit, you need to specify it in the config object passed to fetch:
fetch(“/api/my-enpoint/) and give it to React Query to handle the rest.To indicate the Method you wanna hit, you need to specify it in the config object passed to fetch:
fetch("/api/my-endpoint/", {
method: "POST", // PUT - DELETE ...
headers: {},
body: JSON.stringify({})
}Sphecid waspOP
And the general convention now is that from any server-rendered component, you just call some asynchronous function directly from the component, right?
So these routes generated by Route Handlers are for client components, generally speaking.
@Sphecid wasp And the general convention now is that from any server-rendered component, you just call some asynchronous function directly from the component, right?
Exacly, you can inline your data fetching logic in Server Components. And for mutations (POST, PUT, DELETE) you don't even need to spin up Route Handlers, you can use Server Actions and takes away so much boilerplate, plus is fully type safe and can be called from Client Components. You can even pass the Server Action to React Query useMutation hook
Answer
Sphecid waspOP
Sounds like a dream DX
@Sphecid wasp So these routes generated by Route Handlers are for client components, generally speaking.
If you use Server Components to fetch data, you can pass this data down to Client Components.
If you need to fetch data directly from the client, lets say with React Query then you will need to have Route Handlers exposing GET methods to be hit.
For the rest of methods and Server Actions abstract away the boilerplate and complexity (under the hood they become a POST endpoint that gets called automatically when you call the function), have in mind that Server Actions were made for Mutations, so don't do data fetching with them.
If you need to fetch data directly from the client, lets say with React Query then you will need to have Route Handlers exposing GET methods to be hit.
For the rest of methods and Server Actions abstract away the boilerplate and complexity (under the hood they become a POST endpoint that gets called automatically when you call the function), have in mind that Server Actions were made for Mutations, so don't do data fetching with them.
@Sphecid wasp Sounds like a dream DX
Yes it is! Unfortunately as for right now Next.js doesn't have a native typesafe way to do data fetching in a RPC-like way, only mutations.
Sphecid waspOP
Appreciate the help!
@Sphecid wasp Appreciate the help!
Of course, glad I could help!