如何将Next.js应用连接到GraphQL Studio并打开Apollo Studio Explorer

实用解决步骤 #

• 云端Apollo Studio调试：打开Apollo Studio网页，在界面中添加你的本地GraphQL端点 http://localhost:5555/graphql，即可通过云端Explorer调试本地服务。
• 配置本地Apollo Server启用内嵌Explorer：检查你的Apollo Server初始化代码，确保开启内省并添加本地着陆页插件：

  import { ApolloServer } from '@apollo/server';
  import { startServerAndCreateNextHandler } from '@as-integrations/next';
  import { ApolloServerPluginLandingPageLocalDefault } from '@apollo/server/plugin/landingPage/default';
  
  const server = new ApolloServer({
    typeDefs, // 你的GraphQL类型定义
    resolvers, // 你的解析器逻辑
    // 开发环境开启内省，生产环境可按需关闭
    introspection: process.env.NODE_ENV !== 'production',
    plugins: [
      // 启用本地着陆页，内嵌Explorer界面
      ApolloServerPluginLandingPageLocalDefault({ embed: true }),
    ],
  });
  
  export default startServerAndCreateNextHandler(server);
  

• 重启服务验证：修改配置后重启本地开发服务，再次访问 http://localhost:5555/graphql，应该就能直接看到Apollo Studio Explorer界面，而非“GET query missing.”提示。
• 检查API路由配置：如果GraphQL服务挂载在Next.js的API路由下（比如 /api/graphql），确保路由代码没有拦截GET请求，避免影响Explorer页面加载。

内容的提问来源于stack exchange，提问作者Mel