如何导出apolloServer处理程序作为默认函数

Question

我从 React/Next.js 项目继承了一些旧代码，其中大部分依赖项已被弃用，我正在尝试更新到最新版本（react 18.2.0、apollo-server-micro 3.13.0、micro 10.0 .1，微核0.0.1).

该应用程序使用apollo-server-micro，并具有以下代码：

import { ApolloServer } from 'apollo-server-micro';
import Cors from 'micro-cors';

import { typeDefs } from 'lib/datasource/schema';
import { resolvers } from 'lib/datasource/resolvers';
import { ComplianceMgrAPI } from 'lib/datasource/ComplianceMgrAPI';

const apolloServer = new ApolloServer({
  typeDefs,
  resolvers,
  context: () => {
    return {
      clientId: '5f2aa610a9188421b2811574',
    };
  },
  dataSources: () => {
    return {
      complianceMgrAPI: new ComplianceMgrAPI(),
    };
  },
});

const cors = Cors({
  allowMethods: ['POST', 'OPTIONS'],
});

apolloServer.start();

const handler = apolloServer.createHandler({ path: '/api/graphql' });

export const config = {
  api: {
    bodyParser: false,
  },
};

export default cors(handler);

更新上述代码后会出现错误，提示我无法在 apolloServer.start 之前调用 apolloServer.createhandler。

经过一番网络搜索后，我得出以下结论：

import Cors from 'micro-cors';
import { ApolloServer, gql } from 'apollo-server-micro';

import { typeDefs } from 'lib/datasource/schema';
import { resolvers } from 'lib/datasource/resolvers';
import { ComplianceMgrAPI } from 'lib/datasource/ComplianceMgrAPI';

// Create an Apollo Server instance
const apolloServer = new ApolloServer({ 
  typeDefs, 
  resolvers,
  context: () => {
    return {
      clientId: '5f2aa610a9188421b2811574',
    };
  },
  dataSources: () => {
    return {
      complianceMgrAPI: new ComplianceMgrAPI(),
    };
  }
});

const cors = Cors({
  allowMethods: ['POST', 'OPTIONS'],
});

// Start the server and create a handler
const startApolloServer = async () => {
  await apolloServer.start();

  const handler = apolloServer.createHandler({ path: '/api/graphql' });
  const corsHandler = cors()(handler);

  return ({handler}) => {
    return corsHandler(handler);
  };
};

export const config = {
  api: {
    bodyParser: false,
  },
};

export default startApolloServer();

我遇到的麻烦是，现在我收到一个错误，页面未导出默认函数。这是完整的错误堆栈跟踪：

Error: Page /api/graphql does not export a default function.
    at new U (E:\Projects\GooseHollow\oms-ems-web-feature-BuilderV2\node_modules\next\dist\compiled\next-server\pages-api.runtime.dev.js:21:3573)
    at eval (webpack-internal:///(api)/./node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?kind=PAGES_API&page=%2Fapi%2Fgraphql&preferredRegion=&absolutePagePath=.%2Fpages%5Capi%5Cgraphql.ts&middlewareConfigBase64=e30%3D!:22:21)
    at (api)/./node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?kind=PAGES_API&page=%2Fapi%2Fgraphql&preferredRegion=&absolutePagePath=.%2Fpages%5Capi%5Cgraphql.ts&middlewareConfigBase64=e30%3D! (E:\Projects\GooseHollow\oms-ems-web-feature-BuilderV2\.next\server\pages\api\graphql.js:62:1)
    at __webpack_require__ (E:\Projects\GooseHollow\oms-ems-web-feature-BuilderV2\.next\server\webpack-api-runtime.js:33:42)
    at __webpack_exec__ (E:\Projects\GooseHollow\oms-ems-web-feature-BuilderV2\.next\server\pages\api\graphql.js:112:39)
    at E:\Projects\GooseHollow\oms-ems-web-feature-BuilderV2\.next\server\pages\api\graphql.js:113:83
    at __webpack_require__.X (E:\Projects\GooseHollow\oms-ems-web-feature-BuilderV2\.next\server\webpack-api-runtime.js:116:21)
    at E:\Projects\GooseHollow\oms-ems-web-feature-BuilderV2\.next\server\pages\api\graphql.js:113:47
    at Object.<anonymous> (E:\Projects\GooseHollow\oms-ems-web-feature-BuilderV2\.next\server\pages\api\graphql.js:116:3)
    at Module._compile (node:internal/modules/cjs/loader:1369:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at Module.require (node:internal/modules/cjs/loader:1231:19)
    at mod.require (E:\Projects\GooseHollow\oms-ems-web-feature-BuilderV2\node_modules\next\dist\server\require-hook.js:65:28)
TypeError: Cannot read properties of undefined (reading 'setHeader')
    at E:\Projects\GooseHollow\oms-ems-web-feature-BuilderV2\node_modules\micro-cors\lib\index.js:31:11
    at startApolloServer (webpack-internal:///(api)/./pages/api/graphql.ts:47:31)
 ⨯ unhandledRejection: TypeError: Cannot read properties of undefined (reading 'setHeader')
    at E:\Projects\GooseHollow\oms-ems-web-feature-BuilderV2\node_modules\micro-cors\lib\index.js:31:11
    at startApolloServer (webpack-internal:///(api)/./pages/api/graphql.ts:47:31)
 ⨯ unhandledRejection: TypeError: Cannot read properties of undefined (reading 'setHeader')
    at E:\Projects\GooseHollow\oms-ems-web-feature-BuilderV2\node_modules\micro-cors\lib\index.js:31:11
    at startApolloServer (webpack-internal:///(api)/./pages/api/graphql.ts:47:31)

以上代码位于名为 graphql.ts 的文件中。调用代码如下：

import { HttpLink } from 'apollo-link-http';
import fetch from 'isomorphic-unfetch';
import { ApolloClient, InMemoryCache } from '@apollo/client';

export default function createApolloClient(initialState, ctx) {
    // The `ctx` (NextPageContext) will only be present on the server.
    // use it to extract auth headers (ctx.req) or similar.
    return new ApolloClient({
        ssrMode: Boolean(ctx),
        link: new HttpLink({
            uri: '/api/graphql', // Server URL (must be absolute)
            credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
            fetch,
        }),
        cache: new InMemoryCache(
            {
                typePolicies: {
                    Rule: {
                      keyFields: ["ruleId"],
                    },
                }
            }
        ).restore(initialState),
    });
}

您能否解释一下为什么默认功能未被识别和/或建议我如何解决 apolloServer.start 问题。

谢谢。

Answer 1

您正在导出函数结果而不是函数本身。

代替：

export default startApolloServer();

做：

export default startApolloServer;