GraphQL Developer Portal

The GraphQL Developer Portal allows you to setup a portal for your GraphQL API, brand it and allow your consumers to create API-Keys to request your API. You will be able to see the usage of your consumers and in the future we'll work on features like monetization, documentation, ...

This feature is in Public Beta, we guarantee for stability but might make breaking interface changes in the future.

Getting started

To get your GraphQL developer portal setup all you need to do is go to the config and add the devPortal key.

stellate.ts →

import { Config } from 'stellate'

const config: Config = {
  config: {
    name: 'my-app',
    devPortal: {
      enabled: true,
      auth: false,
    },
  },
}
export default config

When you are ready to enforce the api-keys on your stellate endpoint you can flip auth to true, afterwards no people without using a valid Stellate-Api-Token header will be let through.

You can now visit your dev-portal at https://<service-name>.stellate.sh, consumers are allowed to login/register here and request their own API-Token. You'll be able to see how consumers are requesting your API in the Dashboard.

Customizing the developer-portal

You can customize the way we visualize the portal for you by means of a few keys, all of these are optional.

  • auth, this will enforce the usage of api-tokens on your endpoint.
  • title, this will be the name we use to present your portal to consumers.
  • description, a short description about the API you are offering for people.
  • brandcolor, the color used as the primary color for your developer-portal.
  • readme, you can provide us with markdown content that will be rendered for your consumer, you can use this to educate people on your API.
  • urls
    • website, this will be used for a link to your homepage.
    • favicon, this link will be used to render the favicon of your page.
    • logo, the location we can use to show a logo of you on your developer portal.
    • support, the URL we can link visitors to that need support.
    • terms, the location where we can find your terms of service.
    • privacy. the location where we can find your privacy terms.

Here is a sample configuration file with a full developer portal configuration present

stellate.ts →

import { Config } from 'stellate'

const config: Config = {
  config: {
    name: 'my-app',
    devPortal: {
      enabled: true,
      auth: true,
      title: 'Public MyApp API',
      description: 'All you ever needed to integrate with MyApp!',
      brandcolor: '#4287f5',
      // it's important to not have leading spaces in the markdown, as this otherwise would be rendered as code
      readme: `# MyApp

Here's a sample query to help you get started using the MyApp API

\`\`\`graphiql
query {
  myQuery {
    app {
      name
      id
    }
  }
}
\`\`\`
      `,
      urls: {
        logo: 'https://my.app/assets/logo.svg',
        favicon: 'https://my.app/favicon.ico',
        website: 'https://my.app/',
        terms: 'https://my.app/terms',
        privacy: 'https://my.app/privacy',
      },
    },
  },
}
export default config

Consumer Metrics

As an API-Provider you will be able to use your Stellate Dashboard to view metrics about the consumers of your API, when you navigate to the metrics page you can leverage the filters in the top-right to scope down the metrics to specific groups of consumers.

Future features

  • Billing your API Consumers
  • Organizational grouping of API Consumers

Reading on