> ## Documentation Index
> Fetch the complete documentation index at: https://tyk.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Developer Portal GraphQL

> How to publish GraphQL APIs to your Tyk Developer Portal

> [!WARNING]
>
> **Legacy: Tyk Classic Portal**
>
> You're viewing documentation for the **Tyk Classic Portal**, which is no longer actively maintained.
>
> If you're looking for the latest API documentation for the **new Tyk Developer Portal**, please refer to the
> [Postman collection](https://tyk.io/docs/product-stack/tyk-enterprise-developer-portal/api-documentation/tyk-edp-api.md) or visit the
> [Tyk Developer Portal](https://tyk.io/docs/portal/overview/intro.md) section.
>
> The Classic Portal is in maintenance mode and will be deprecated soon. For questions or support, contact us at
> [support@tyk.io](<mailto:support@tyk.io?subject=Tyk classic developer portal>).

As of Tyk v3.0.0, you can now publish GraphQL APIs, including [Universal Data Graph](https://tyk.io/docs/api-management/data-graph.md#overview) APIs(UDG) to the Tyk Developer Portal.

When you do that, your API consumers can navigate through a GraphQL Playground, with an IDE complete with Intellisense.

![Portal GraphQL Playground](https://mintcdn.com/tyk/RMh3iOJIGf2eKkTO/img/portal/portal-graphql.png?fit=max\&auto=format\&n=RMh3iOJIGf2eKkTO\&q=85\&s=ee78979e87b28e4db16cc0ff92c68142)

## Video Walkthrough

We have a YouTube walkthrough of how to publish a GraphQL API to your Developer Portal:

[https://www.youtube.com/embed/A2Hn9ub2mNg](https://www.youtube.com/embed/A2Hn9ub2mNg)

## How To Set Up

Simply create a GraphQL or Universal Data Graph API, create a Policy which protects it, and then publish it to the Developer Portal Catalog.

In the "Create a Catalog" section, at the bottom, make sure you enable the "Display Playground"

![Portal GraphQL Playground Setup](https://mintcdn.com/tyk/RMh3iOJIGf2eKkTO/img/portal/portal-graphql-setup.png?fit=max\&auto=format\&n=RMh3iOJIGf2eKkTO\&q=85\&s=25aec41e414090bd275ae0f1327908a8)

And then, when your API consumers are on the Developer Portal Catalog and click on View Documentation, they will be taken to the GraphQL Playground.

![Portal GraphQL Playground View Docs](https://mintcdn.com/tyk/RMh3iOJIGf2eKkTO/img/portal/portal-graphql-playground-viewdocs.png?fit=max\&auto=format\&n=RMh3iOJIGf2eKkTO\&q=85\&s=0fb9f8a37ce00c40dc48536994c06b6e)

## Protected GraphQL Catalog

If you have a protected API, your users won't be able to inspect the GraphQL schema or make API calls until they add their API Key to the Headers section:

![Portal GraphQL Playground Header Injection](https://mintcdn.com/tyk/RMh3iOJIGf2eKkTO/img/portal/portal-graphql-header-injection.png?fit=max\&auto=format\&n=RMh3iOJIGf2eKkTO\&q=85\&s=27cbcb51c581cdef017a066509c519ba)

## CORS

You may have to enable the following CORS settings in the "Advanced Options" of the API Designer to allow your consumers to access the GraphQL Playground:

![Portal GraphQL Playground CORS](https://mintcdn.com/tyk/RMh3iOJIGf2eKkTO/img/portal/portal-graphql-cors.png?fit=max\&auto=format\&n=RMh3iOJIGf2eKkTO\&q=85\&s=d92df79d5d2ce856bf96ee314589b145)