如何将Apollo Server默认GraphQL沙盒替换为GraphQL Playground

解决方案 #

针对 Apollo Server 3.x 版本（你当前使用的代码适配版本） #

Apollo Server 3 开始默认将内置的 GraphQL Playground 替换为 Apollo Sandbox，只需在实例化配置中手动开启 Playground 即可：

const apolloServer = new ApolloServer({
    schema: await buildSchema({
      resolvers: [HelloResolver, TodoResolver, AuthResolver],
      validate: false,
    }),
    // 新增两行配置
    introspection: true,
    playground: true,
  });
  await apolloServer.start();
  // 若需要Playground正常携带cookies请求，需补充CORS配置
  apolloServer.applyMiddleware({ 
    app,
    cors: {
      origin: "你的前端地址，例如http://localhost:3000",
      credentials: true
    }
  });

配置完成后重启服务，访问http://localhost:4000/graphql就会显示你需要的 GraphQL Playground 界面。

针对 Apollo Server 4.x 版本 #

4.x版本移除了内置的Playground配置项，需要单独安装官方插件启用：

1. 安装依赖
   npm install @apollo/server-plugin-landing-page-graphql-playground
2. 调整配置

import { ApolloServerPluginLandingPageGraphQLPlayground } from '@apollo/server-plugin-landing-page-graphql-playground';

const apolloServer = new ApolloServer({
    schema: await buildSchema({
      resolvers: [HelloResolver, TodoResolver, AuthResolver],
      validate: false,
    }),
    introspection: true,
    plugins: [ApolloServerPluginLandingPageGraphQLPlayground()]
  });

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