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

Question

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

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

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

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

如果您知道我遗漏了什么，请帮忙。坐在这里已经好几个小时了，什么都没用

Answer 1

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

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

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

Overiding the default GraphQL sandbox with GraphQL Playground

express

graphql

apollo-server

graphql-playground