Блог

При извлечении данных с помощью getServerSideProps() в Next.js они рекомендуют напрямую импортировать конечную точку API вместо использования fetch() и запуска другого HTTP-запроса. Это имеет смысл, и я смог заставить его работать, пока не было реализовано промежуточное программное обеспечение для моего API (обратите внимание, я использую функцию API, встроенную в Next.js ). Теперь, когда реализовано промежуточное программное обеспечение, я не могу экспортировать функции, использующие промежуточное программное обеспечение, я должен экспортировать обработчик. Смотрите ниже:

 const handler = nextConnect();
handler.use(middleware);

handler.get(async (req, res) => {
    const post = await req.db.collection("posts").findOne();
    res.send({
        post: post,
    });
});

export default handler;
  

Какой рекомендуемый способ импортировать конечную точку моего API в getServerSideProps? Я хотел бы сделать что-то следующим образом, но getPost() функция больше не имеет доступа к промежуточному программному обеспечению базы данных:

 export const getPost = async () => {
    const post = await req.db.collection("posts").findOne();
    return post;
}

handler.get(async (req, res) => {
    res.send({
        post: getPost(),
    });
});
  

а затем в моем next.js страница:

 import { getPost } from './api/post';
...
export async function getServerSideProps(context) {
    return {
        props: {
            post: getPost(),
        }
    }
}
  

В любом случае вам придется передать объекты req и res функции. Но если вы сделаете следующее, post prop должен быть заполнен NextApiResponse экземпляром, который в своей основе является stream.Writable объектом, что, вероятно, не то, что вы хотите…

 import { getPost } from './api/post';
...
export async function getServerSideProps({req, res}) {
  return {
    props: {
      post: await getPost(req, res),
    }
  }
}
  

Вы могли бы попытаться прочитать поток, но это кажется более сложным, чем рефакторинг вашего кода, но если вы вызовете getPost(req, res).end() , я думаю, вы должны получить потоковые данные, но я не уверен, как они будут отформатированы. Вам нужно будет проверить.

Вы могли бы немного больше разделить свои функции..

 // In your api endpoint:
const handler = nextConnect();
handler.use(middleware);

export async function getPostMethod(db) {
  return await db.collection("posts").findOne();
}

handler.get(async (req, res) => {
  res.send({
    post: await getPostMethod(req, res, req.db)
  })
});

export default handler;

// In your page component:

export async function getServerSideProps({req, res}) {
  // Do what ever you have to do here to get your database connection
  const db = await whereIsMyDb()
  return {
    props: {
      post: await getPostMethod(db),
    }
  }
}