如何通过 fetch() 将对象发送到 Next.js 中的动态 api 路由

Question

我无法将对象发送到 Next 中的动态 api 路由。发送常规字符串工作正常，我可以毫无问题地更新我的 MongoDB。通过请求数据发送对象时仅显示为 [object Object].

这是当前的代码片段：

客户端

let bookData = {
  title: data[i].title,
  author: data[i].author,
  date: data[i].date,
  isbn: data[i].isbn,
  description: data[i].description,
  image: data[i].image
}

fetch(`/api/db/saveBook/${bookData}`);

API 路线：/pages/api/db/saveBook/[book].js

import { MongoClient } from "mongodb";

export default async function handler(req, res) {

    const book = req.query;

    const client = await MongoClient.connect(process.env.MONGODB_URI);
    const db = client.db();
    const collection = db.collection('books');
    
    const addBook = await collection.insertOne(book);
    client.close();

    res.json(addBook);
}

Answer 1

考虑2个步骤首先通过post请求发送数据，然后通过fetch请求指定内容类型。看例子：

      const req = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        email: formData.get("email"),
        password: formData.get("password"),
      }),
    });

Answer 2

所以这是我误解了何时在 next 中使用动态 API 路由的情况。下面是我尝试做的事情的正确实现，这只是一个基本的 POST 使用 fetch 的请求，就像这里提到的其他人一样。

客户：

// Store book data to be sent to API route
let bookData = {
    title: data[i].title,
    author: data[i].author,
    date: data[i].date,
    isbn: data[i].isbn,
    description: data[i].description,
    image: data[i].image
}

// Send the book data to the backend API to be saved
fetch('/api/db/saveBook', 
    {
        method: 'POST',
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(bookData),
    }
);

API路线：

import { MongoClient } from "mongodb";

export default async function handler(req, res) {

    const book = req.body;

    const client = await MongoClient.connect(process.env.MONGODB_URI);
    const db = client.db();
    const collection = db.collection('books');
    
    const addBook = await collection.insertOne(book);
    client.close();

    res.json(addBook);
}

如何通过 fetch() 将对象发送到 Next.js 中的动态 api 路由

How to send an object via fetch() to a dynamic api route in Next.js

object

fetch

mongodb

next.js