Можно ли определить заголовки HTTP для GraphQL Playground, поставляемого с Apollo Server? - PullRequest
Новая
       56

Можно ли определить заголовки HTTP для GraphQL Playground, поставляемого с Apollo Server?

3 голосов
/ 12 июля 2020

Я хочу определить несколько заголовков http для GraphQL Playground, которые будут включены по умолчанию и / или всегда. По сути, я хочу добавить: 

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

, чтобы иметь возможность отличать guish запросы от игровой площадки от любых других запросов в 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 больше не восстанавливает все вкладки со своими запросами при перезагрузке страницу, что очень полезно. Я думаю, что есть автоматическое c управление вкладками, которое удаляется, как только вы определяете вкладки. Я рад, что для создания новой вкладки определены заголовки по умолчанию, это нормально, если эти заголовки доступны клиенту.

Мое приложение уже определяет заголовок, поэтому я могу различать приложение и все остальное, что запрашивает это, но я хочу различать свое приложение, игровую площадку и все остальное (последняя группа должна быть пустой).

Ответы [ 2 ]

3 голосов
/ 29 июля 2020

Обновление:

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 . И каков ваш вариант использования.

Есть настольное приложение, веб-приложение, вы можете включить GraphQL Playground как модуль в свой интерфейс или как промежуточное ПО для своего внутреннего интерфейса.

В простейшем случае: перейдите на вкладку «ЗАГОЛОВКИ HTTP», добавьте заголовки как JSON: 

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

enter image description here

For the case of frontend Playground you can pass tabs with headers property to <Playground/>: 

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

Для бэкэнда вы также можете использовать headers: 

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

Вы также можете

различать guish запросов от игровой площадки из запросов от реальных приложений

, действуя наоборот: добавить дополнительные заголовки вам актуальные приложения.

0 голосов
/ 31 июля 2020

Apollo-server-plugin-http-headers

Позволяет вам легко устанавливать HTTP-заголовки и файлы cookie в ваших преобразователях. Это особенно полезно в apollo-server-lambda, потому что у вас нет других параметров для установки заголовков или файлов cookie.

Принцип работы прост: вы помещаете массив для файлов cookie и массив для заголовки в вашем контексте; затем вы можете получить к ним доступ в своих преобразователях (и, следовательно, добавить, изменить или удалить заголовки и файлы cookie). Перед отправкой вашего запроса клиенту этот плагин просматривает массивы и добавляет каждый элемент в ответ HTTP. Logi c очень прост, на самом деле документация намного длиннее, чем исходный код.

Использование - Заголовки

Установить заголовок в резолвере : 

context.setHeaders.push({ key: "headername", value: "headercontent" });

Полный пример: 

const resolvers = {
    Query: {
        hello: async (parent, args, context, info) => {
            context.setHeaders.push({ key: "X-TEST-ONE", value: "abc" });
            context.setHeaders.push({ key: "X-TEST-TWO", value: "def" });
            return "Hello world!";
        }
    }
};
...