javascript - How to pass query parameters to next.js api handler when calling from inside of getStaticProps - Stack Overflow

admin管理员组

文章数量:1323495

I am under the impression that you can import api request handlers and call them directly inside of your getStaticProps function because of the documentation where it says:

Note: You should not use fetch() to call an API route in your application. Instead, directly import the API route and call its function yourself. You may need to slightly refactor your code for this approach.

I have an api route at /api/user/[id].js and the implementation looks something like this:

export default function user(req, res) {
  const userId = req.query.id;
  const user = getUserById(userId);
  res.json(user);
}

If I want to use this handler in the getStaticProps of another page in the front-end such as /admin/user/[id].js how would I pass the id query to the request handler? Calling it without any parameters doesn't work and throws an error saying that req.query.id is undefined.

import userHandler from "../../api/user/[id].js";

export async getStaticProps(){
    // This is where the api handler is getting called
    const user = await userHandler();
    return { props: { user } }
}

I am under the impression that you can import api request handlers and call them directly inside of your getStaticProps function because of the documentation where it says:

Note: You should not use fetch() to call an API route in your application. Instead, directly import the API route and call its function yourself. You may need to slightly refactor your code for this approach.

I have an api route at /api/user/[id].js and the implementation looks something like this:

export default function user(req, res) {
  const userId = req.query.id;
  const user = getUserById(userId);
  res.json(user);
}

If I want to use this handler in the getStaticProps of another page in the front-end such as /admin/user/[id].js how would I pass the id query to the request handler? Calling it without any parameters doesn't work and throws an error saying that req.query.id is undefined.

import userHandler from "../../api/user/[id].js";

export async getStaticProps(){
    // This is where the api handler is getting called
    const user = await userHandler();
    return { props: { user } }
}

• javascript
• node.js
• next.js

Share Follow edited Dec 3, 2020 at 5:51 Abir Taheer asked Dec 2, 2020 at 20:51 Abir TaheerAbir Taheer 2,79333 gold badges1313 silver badges3838 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Here is what I would suggest to do in order to make stuff work:

1. you do not need "dynamic" name for the file with your api calls handlers (instead of /api/user/[id].js you can create /api/user.js);
2. you need specify a page (file) for user details view. It should be created in /pages/user/[id].js and paste getStaticProps function there. Now once you change url in browser to http://localhost:3000/user/whatever getStaticProps will be called with ({ params: {id: 'whatever'}})

getStaticProps - gets context argument which consists of several properties. All the dynamic URL parts will be stored under params property, taking into account above part this should work:

export async getStaticProps({ params }){
    const user = await user(params.id);
    return { props: { user } }
}

If you need some additional explanation you are wele to ask

You shouldn't call the API endpoint internally on the server. The user() handler in your API requires the Request and Response objects to be passed as arguments and there's no point in faking a HTTP request/response.

Instead, export the function your API uses to get the user data: getUserById(userId). Then, import and call it in getStaticProps().

本文标签：