https://github.com/expo/koa-graphiql

Koa middleware to display GraphiQL, the interactive GraphQL UI
https://github.com/expo/koa-graphiql

Last synced: 25 days ago
JSON representation

Koa middleware to display GraphiQL, the interactive GraphQL UI

• Host: GitHub
• URL: https://github.com/expo/koa-graphiql
• Owner: expo
• License: mit
• Created: 2015-11-30T23:58:20.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-08-06T12:31:06.000Z (over 7 years ago)
• Last Synced: 2024-05-21T13:25:13.323Z (7 months ago)
• Language: JavaScript
• Size: 6.84 KB
• Stars: 27
• Watchers: 2
• Forks: 6
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-koa - koa-graphiql - Koa 中间件用于显示GraphiQL，一个交互式 GraphQL UI。   (仓库 / 中间件)

README

        
# koa-graphiql

Koa middleware to display [GraphiQL](https://github.com/graphql/graphiql). Designed for Koa 2.

## Usage

```sh

npm i --save koa-graphiql

```

Add it to your Koa app. You may want to use router middleware if your app serves more than GraphiQL.

```js

import graphiql from 'koa-graphiql';

router.get('/graphiql', graphiql(async (ctx) => {

  return {

    // String of the base URL of the GraphQL endpoint

    url: '/graphql',

    // String to display in the query panel

    query: 'query Demo($token: String) { viewer(token: $token) { id } }',

    // Object used to populate the "variables" panel

    variables: {

      token: 'eyJhbGciOiJIUzI1NiJ9.YWNjb3VudFtpZGVd.-w3FiHaq5jIFIOzHErgdEQGvXXG6wClBUDFDVgwUyx8'

    },

    // Object to display in the result panel

    result: {

      data: {

        viewer: { id: 'account[ide]' }

      }

    },

  };

}));

```

Typically, you will want to populate the `query`, `variables`, and `result` fields from data in the Koa context, such as the query parameters or request body. `koa-graphiql` will do this for you by default.