是否可以为 Apollo Server 附带的 GraphQL Playground 定义 HTTP 标头？

Question

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

"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 在重新加载页面时不再恢复所有带有查询的选项卡，这非常有用。我认为一旦您定义了选项卡，就会删除一些自动选项卡管理。我很高兴为新选项卡创建定义了默认标头，如果这些标头暴露给客户端就可以了。

我的应用程序已经定义了标题，因此，我可以区分应用程序和查询它的任何其他内容，但我想区分我的应用程序、游乐场和其他任何内容（后一组应该是空的）。

Answer 1

更新：

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

直接使用GraphQL Playground Express 中间件[...] 这将允许您利用Express中间件req对象，并相应地设置标头。

这是一个工作示例：

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”选项卡，将标头添加为 JSON：

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

对于前端的情况下，游乐场，你可以通过tabs使用headers属性<Playground/>：

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

对于后端，您也可以使用headers：

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

你也可以

将来自 Playground 的请求与来自实际应用程序的请求区分开来

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