apollo-server - 是否可以为 Apollo Server 附带的 GraphQL Playground 定义 HTTP header ？

Question

我想为 GraphQL Playground 定义一些 http header ，以默认和/或始终启用。基本上，我想补充一点:

"apollographql-client-name": "playground"
"apollographql-client-version": "yada-yada"

能够将来自 Playground 的请求与 Apollo Studio 上的任何其他请求区分开来。最好的方法是什么？
通过 GraphQL Playground 我指的是由 Apollo 运行的那个，这里记录的那个: https://www.apollographql.com/docs/apollo-server/testing/graphql-playground/
我当前的 ApolloServer 配置如下所示:

let apolloServerExpressConfig: ApolloServerExpressConfig = {
  schema: schema,
  playground: {
    settings: {
      "request.credentials": "include",
    },
  },
}

如果我向其添加选项卡以尝试定义标题，如下所示:

let apolloServerExpressConfig: ApolloServerExpressConfig = {
  schema: schema,
  playground: {
    settings: {
      "request.credentials": "include",
    },
    tabs: [{
      headers: {
        "apollographql-client-name": "playground",
        "apollographql-client-version": "yada-yada",
      },
    }],
  },
}

GraphQL playground 在重新加载页面时不再恢复所有带有查询的选项卡，这非常有用。我认为一旦您定义了选项卡，就会删除一些自动选项卡管理。我很高兴为新选项卡创建定义了默认 header ，如果这些 header 暴露给客户端就可以了。
我的应用程序已经定义了标题，因此，我可以区分应用程序和查询它的任何其他内容，但我想区分我的应用程序、游乐场和其他任何内容(后一组应该是空的)。

Answer 1

更新:
https://github.com/apollographql/apollo-server/issues/1982#issuecomment-511765175

use the GraphQL Playground Express middleware directly [...] This would allow you to leverage the Express middleware req object, and set headers accordingly.

这是一个工作示例:

const app                   = require('express')()
const { ApolloServer, gql } = require('apollo-server-express')

// use this directly
  const expressPlayground   = require('graphql-playground-middleware-express').default

// just some boilerplate to make it runnable
  const typeDefs = gql`type Book { title: String author: String } type Query { books: [Book] }`
  const books = [{ title: 'Harry Potter and the Chamber of Secrets', author: 'J.K. Rowling' }, { title: 'Jurassic Park', author: 'Michael Crichton' }]
  const resolvers = { Query: { books: () => books } }
  const server = new ApolloServer({ typeDefs, resolvers });

//
// the key part {
//
  const headers = JSON.stringify({
    "apollographql-client-name"   : "playground",
    "apollographql-client-version": "yada-yada" ,
  })
  app.get('/graphql', expressPlayground({
    endpoint: `/graphql?headers=${encodeURIComponent(headers)}`,
  }))
  server.applyMiddleware({ app })

//
// }
//

// just some boilerplate to make it runnable
app.listen({ port: 4000 }, () => console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`))

页面重新加载后，所有标签及其内容都将恢复。

对原问题的回答:
Apollo Server GraphQL Playground 的含义并不完全清楚。你的用例是什么。
有一个桌面应用程序，一个 Web 应用程序，您可以将 GraphQL Playground 作为模块包含在前端，或作为后端的中间件。
对于最简单的情况:切换到“HTTP HEADERS”选项卡，将 header 添加为 JSON:

{
  "apollographql-client-name": "playground",
  "apollographql-client-version": "yada-yada",
}

对于前端 Playground 的情况，您可以通过 tabs与 headers属性(property)到 <Playground/> :

<Playground
  ...
  tabs={[{
    name: 'Tab 1',
    headers: {
      "apollographql-client-name"   : "playground",
      "apollographql-client-version": "yada-yada" ,
    }
    ...
  }]}
/>,

对于后端，您可以使用 headers还有:

new ApolloServer({
  ...
  playground: {
    ...
    tabs: [{
      ...
      headers: ...
    }],
  },
})

你也可以

distinguish requests from the playground from requests from the actual apps

通过相反的方式:为您的实际应用程序添加额外的标题。