Next.js 混淆了 API 响应

问题描述

我正在尝试使用 Next.js 开发我的第一个应用程序，但发生了一些真正困扰我的事情。

我的应用在首次加载后发出 2 个请求，/api/me 和 /api/Feed

我的组件像这样获取数据：

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]);

我的问题是，有时当它重新加载时，响应会混淆。 /Feed 返回一个数组和 /me 一个对象。重新加载时，有时 /Feed 和 /me 都从 /me 接收对象，有时它们都从 /Feed 获取数组，有时它可以正常工作。我没有发现有人报告这样的错误，所以我假设这是我的某个地方的错误。

/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 }));

解决方法

我找到了解决方案。有同样的问题。我所做的是创建和导出模块而不是直接导出。这是我的代码

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;

那么你就可以这样使用了

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;

,

我发现了这个问题。我为不同的路由使用了相同的 next-connect 实例，这是不行的。

https://github.com/hoangvvo/next-connect/issues/106

解决方案是为每个页面导入 next-connect，并为该共享逻辑使用中间件