使用 GraphQL Playground 覆盖默认的 GraphQL 沙箱答案

【问题标题】：Overiding the default GraphQL sandbox with GraphQL Playground使用 GraphQL Playground 覆盖默认的 GraphQL 沙箱
【发布时间】：2021-10-22 07:17:21
【问题描述】：

每当我使用ApolloServer 和express 创建graphQL 服务器时，当我导航到http//:localhost:4000/graphql 时，它会打开一个沙箱，如下所示：

我真正想做的是打开一个看起来像这样的graphql游乐场

我想要这个游乐场的原因是因为它让我可以非常轻松地使用cookies。我想在我的 chrome 浏览器上安装这个 exextion 会有所帮助。不幸的是，它没有用。这是我的 ApolloSever 的实例，代码中带有 express：

 const apolloServer = new ApolloServer({
    schema: await buildSchema({
      resolvers: [HelloResolver, TodoResolver, AuthResolver],
      validate: false,
    }),
  });
  await apolloServer.start();
  apolloServer.applyMiddleware({ app });

如果您知道我在哪里缺少帮助，请提供帮助。坐在这里已经好几个小时了，没有任何效果

【问题讨论】：

标签： express graphql apollo-server graphql-playground

【解决方案1】：

哇！几个小时后，我意识到我在错误的地方寻找答案。我开始逐行阅读文档，只是发现我想要的功能是 Apollo Server 2，而我正在使用 Apollo Server 3。所以为了解决这个问题，我不得不去我的 ApolloServer 实例并在插件选项下添加以下内容：

...
import { ApolloServerPluginLandingPageGraphQLPlayground } from "apollo-server-core";
...
  const apolloServer = new ApolloServer({
    ....
    plugins: [ApolloServerPluginLandingPageGraphQLPlayground({})],
  });

【讨论】：

注意：我还必须显式安装 apollo-server-core 以使插件在 node_modules 中可用。它似乎不包含在某些捆绑包中，例如，apollo-server-express