我从 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 问题。
谢谢。
您正在导出函数结果而不是函数本身。
代替:
export default startApolloServer();
做:
export default startApolloServer;