[英]Next.js getting mixed up API responses
I'm trying to develop my first application with Next.js, and there's something happening that is really bothering me.我正在尝试使用 Next.js 开发我的第一个应用程序,但发生了一些让我非常困扰的事情。
My app makes 2 requests after first loading, /api/me
and /api/feed
我的应用在第一次加载后发出 2 个请求,
/api/me
和/api/feed
My component fetches the data like this:我的组件像这样获取数据:
useEffect(() => {
async function loadData() {
const res = await fetch('/api/me');
try {
const body = await res.json();
if (body.error) {
return router.push('/login');
}
setUser(body.user);
} catch (e) {
router.push('/login');
}
}
loadData();
}, []);
useEffect(() => {
async function loadFeed() {
const res = await fetch('/api/feed');
const body = await res.json();
console.log('fetch', body.data);
setFeed(body.data);
}
if (user) {
loadFeed();
}
}, [user]);
My problem is, sometimes when it reloads, the responses get mixed up.我的问题是,有时当它重新加载时,响应会混淆。
/feed
returns an array and /me
an object. /feed
返回一个数组, /me
返回一个 object。 When reloading, there are times both /feed
and /me
receives the object from /me
, sometimes they both get the array from /feed
, sometimes it works correctly.重新加载时,
/feed
和/me
有时都会从/me
me 接收 object ,有时它们都从/feed
获取数组,有时它可以正常工作。 I didn't find anyone reporting a bug like this, so I'm assuming its a bug somewhere on my part.我没有找到任何人报告这样的错误,所以我假设它是我某处的错误。
/pages/feed/api.js
import handler from '../../helpers/routes/handler';
import auth from '../../middlewares/auth';
import * as feedController from '../../controllers/feed';
export default handler
.use(auth)
.get((req, res) => feedController.get(req, res));
handler.js
import nextConnect from 'next-connect';
import { getSession } from '../../config/passport/encrypt';
const handler = nextConnect()
.use(async (req, res, next) => {
const session = await getSession(req);
if (!session) {
return next();
}
...
next();
});
export default handler;
controllers/feed.js
import * as expertMarketerService from '../services/expert_marketer';
// eslint-disable-next-line import/prefer-default-export
export const get = async (req, res) => {
const data = await expertMarketerService.get(req.user);
return res.status(200).send({ data });
};
pages/api/me.js
import handler from '../../helpers/routes/handler';
import auth from '../../middlewares/auth';
export default handler
.use(auth)
.get((req, res) => res.status(200).send({ user: req.user }));
I Found a solution for this.我找到了解决方案。 Had the same issue.
有同样的问题。 What I did was created and exported module instead of direct export.
我所做的是创建和导出模块而不是直接导出。 here is my code
这是我的代码
import nc from 'next-connect';
import someCommonMiddleware from '..some-common-middlware-path';
module globalHandler {
const config = {
onError : (error, req, res) => {
// handle errors
}
};
export function handle() {
return nc(config)
.use(someCommonMiddleware);
}
}
export default globalHandler;
Then you can use it like this然后你可以像这样使用它
import { NextApiRequest, NextApiResponse } from 'next';
import globalHandler from '..your-global-handler-path';
const handler = globalHandler.handle()
.get(async (req: NextApiRequest, res: NextApiResponse) => {
// handle url api response here
});
export default handler;
I found the issue.我发现了这个问题。 I was using the same next-connect instance for different routes, and that's a no go.
我对不同的路由使用相同的下一个连接实例,这不是 go。
https://github.com/hoangvvo/next-connect/issues/106 https://github.com/hoangvvo/next-connect/issues/106
Solution is importing next-connect for every page, and using a middleware for that shared logic解决方案是为每个页面导入 next-connect,并为该共享逻辑使用中间件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.