我在 Next.js (应用程序路由器)项目的 apollo 客户端\服务器中绕过 graphql 时遇到问题。终端说 '.. pp pi\graphql 中没有导出 HTTP 方法 oute.ts'。为每个 HTTP 方法导出命名导出。我对这些技术堆栈很陌生。还想知道目录是否正确。我在同一文件夹 app/api/graphql 下有以下所有 4 个文件
以下是代码
ApolloClient.ts
import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc";
export const { getClient } = registerApolloClient(() => {
return new ApolloClient({
cache: new InMemoryCache(),
link: new HttpLink({
uri: "http://localhost:3000/api/graphql",
}),
});
});
typeDefs.ts
import { ApolloServer } from "@apollo/server";
import { gql } from "graphql-tag";
const typeDefs = gql`
type Query {
hello: String
}
`;
export default typeDefs;
resolver.ts
const resolvers = {
Query: {
hello: () => 'world',
},
};
export default resolvers;
graphql.ts
import { ApolloServer } from "@apollo/server";
import typeDefs from './typeDefs';
import resolvers from './resolvers';
import { startServerAndCreateNextHandler } from "@as-integrations/next";
const graphql = new ApolloServer({
resolvers,
typeDefs
});
export default startServerAndCreateNextHandler(graphql);
Here is the error it says on the browser
Unhandled Runtime Error
Error: Response not successful: Received status code 405
Call Stack
new ApolloError
(rsc)\node_modules\@apollo\client\errors\index.js (39:0)
eval
(rsc)\node_modules\@apollo\client\core\QueryManager.js (777:37)
both
(rsc)\node_modules\@apollo\client\utilities\observables\asyncMap.js (22:0)
eval
(rsc)\node_modules\@apollo\client\utilities\observables\asyncMap.js (11:56)
new Promise
<anonymous>
Object.then
(rsc)\node_modules\@apollo\client\utilities\observables\asyncMap.js (11:0)
Object.eval [as error]
(rsc)\node_modules\@apollo\client\utilities\observables\asyncMap.js (24:0)
notifySubscription
(rsc)\node_modules\zen-observable-ts\module.js (137:0)
onNotify
(rsc)\node_modules\zen-observable-ts\module.js (176:0)
SubscriptionObserver.error
(rsc)\node_modules\zen-observable-ts\module.js (229:0)
eval
(rsc)\node_modules\@apollo\client\utilities\observables\iteration.js (7:49)
Array.forEach
<anonymous>
iterateObserversSafely
(rsc)\node_modules\@apollo\client\utilities\observables\iteration.js (7:0)
Object.error
(rsc)\node_modules\@apollo\client\utilities\observables\Concast.js (76:42)
notifySubscription
(rsc)\node_modules\zen-observable-ts\module.js (137:0)
onNotify
(rsc)\node_modules\zen-observable-ts\module.js (176:0)
SubscriptionObserver.error
(rsc)\node_modules\zen-observable-ts\module.js (229:0)
handleError
(rsc)\node_modules\@apollo\client\link\http\parseAndCheckHttpResponse.js (170:0)
eval
(rsc)\node_modules\@apollo\client\link\http\createHttpLink.js (145:27)
process.processTicksAndRejections
node:internal/process/task_queues (95:5)
在 App Router 中,您需要将函数导出为 HTTP 方法名称,如下所示:
export const GET = (req: Request) => {
return Response.json({ posts: [] })
}
export const POST = (req: Request) => {
return Response.json({ posted: true })
}
export const DELETE = (req: Request) => {
return Response.json({ deleted: true })
}
export const PUT = (req: Request) => {
return Response.json({ updated: true })
}
现在,据我检查,
@as-integrations/next
尚未创建任何特殊功能,这是合理的,因为他们希望页面路由器也支持它。相反,他们建议here这样使用它:
const handler = startServerAndCreateNextHandler(server);
export { handler as GET, handler as POST };