[DX-2170] Graphql Playground Guide

[sharadregoti]

PR Type

Documentation

Jira: https://tyktech.atlassian.net/browse/DX-2170

---

Description

• Add GraphQL Playground setup guide

• Link guide in docs navigation

• Provide step-by-step configuration

• Include prerequisites and publishing steps

---

Diagram Walkthrough

flowchart LR
  docs["docs.json navigation"] -- "add Guides > graphql-playground" --> nav["Portal docs sidebar"]
  guide["graphql-playground.mdx"] -- "how-to steps" --> users["Portal users configure Playground"]

Loading

File Walkthrough

Relevant files

Documentation

docs.json Add GraphQL Playground guide to navigation                              docs.json Add new Guides group under Consuming APIs. Link tyk-developer-portal/graphql-playground page. Extend navigation to surface the Playground guide. +7/-1      graphql-playground.mdx New guide: Set up GraphQL Playground                                          tyk-developer-portal/graphql-playground.mdx New how-to guide for GraphQL Playground. Covers prerequisites and GQL API creation. Steps to attach schema, configure product, publish. Instructions to view embedded Playground. +77/-0

---

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Navigation Consistency Ensure the new "Guides" subgroup and the "tyk-developer-portal/graphql-playground" path conform to existing navigation structure and slug conventions so links render correctly in the sidebar. { "group": "Guides", "pages": [ "tyk-developer-portal/graphql-playground" ] } TODO Placeholders Replace TODO comments with finalized content (images, self-managed notes, key details guidance) or remove them to avoid publishing incomplete docs. {/* TODO: Add Some Info the Tyk Self Managed */} ## Instructions Follow these steps to set up the GraphQL Playground in the Tyk Developer Portal: ### 1. Create a GraphQL API 1. In the **Tyk Dashboard**, create a new **GraphQL API** by - Navigating to **APIs > Add New API** - In the next screen, click on **Try example** and select **Star Wars GQL API** from the list. - Click **Use Example** to create the API. {/* TODO: Should I Copy the Key details popped up? */} {/* TODO: Add Image */} 2. Now, go to the **Schema** tab and copy the schema text. Save it locally as a file with a **`.graphql`** extension. > This schema file will be uploaded to the Developer Portal in a later step. {/* TODO: Add Image */} Accuracy Of Steps Validate dashboard/portal UI labels and paths (e.g., tabs, section names, "Public catalogue") match current product versions; minor inconsistencies can mislead users. 1. Go to **Policies** in the Tyk Dashboard. 2. Create a new **Policy**. 3. In the **Add API Access Rights** section, add your **Star Wars GraphQL API** to the policy 4. In the **Policy Partitioning** section, ensure only `Enforce access rights` is selected. 5. In the **Configurations** tab - Add **Policy Name** (e.g., `Star Wars GraphQL API Access`). - Set key expiry to `key never expires`. 6. Save the policy. ### 3. Configure the API Product in the Developer Portal 1. Upload the GraphQL Schema 1. Open the **Developer Portal**. 2. Navigate to **API Products**. 3. Select the Product associated with your GraphQL API. (e.g Star Wars GraphQL API Access) 4. Go to the **Documentation** tab. 5. Upload the previously saved **`.graphql`** schema file. This attaches the schema so that the Portal can generate and display your API documentation and Playground. 2. Configure the GraphQL Server Schema 1. In the same **Documentation** tab, locate the **GraphQL Schema** section. 2. Select the uploaded schema from the dropdown. 1. In the same Product view, locate the **GraphQL Server** section. 2. Add your **GraphQL API endpoint URL** (as exposed from the Gateway). 3. Click **Save**. This endpoint will be used by the Playground to execute GraphQL queries from the Portal. 3. Now, publish the API Product by selecting the **Public catalogue** from the dropdown. ### 4. View the Playground 1. Open your **Live Portal**. 2. Go to **Product Catalogues** and locate your GraphQL Product. 3. Click **Docs**. 4. Select the API documentation for your GraphQL API. You should now see the **embedded GraphQL Playground**, ready for interactive query testing.

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Fix incorrect metadata keywords Update metadata keywords to match the page topic; current keywords are misleading and harm searchability. Include terms like GraphQL, Playground, Developer Portal to improve discovery. tyk-developer-portal/graphql-playground.mdx [4] -keywords: "Tyk Gateway, Release notes, changelog" +keywords: "GraphQL, Playground, Tyk Developer Portal, GraphQL API, API documentation" Suggestion importance[1-10]: 6 __ Why: The proposed keywords better reflect the page content about a GraphQL Playground, improving SEO relevance; it's accurate and low risk but not critical to functionality.	Low

[caroltyk]

LGTM ❤️

[buger]

/release to release-5.10

[github-actions]

✅ Cherry-pick successful. A PR was created and auto-merged (if allowed): #1023