Skip to content

Commit 563371b

Browse files
sharadregotisharadregoti
committed
docs: move HOW-TO to graphql-playground.mdx; add optional Star Wars step
- Restore tyk-developer-portal/graphql-playground.mdx with full HOW-TO content (replaces tutorial; retains old URL, no redirect needed) - Add step 1 (Optional): create Star Wars test API + download schema - Delete portal/api-products/graphql-products.mdx - Update docs.json: swap nav entry to tyk-developer-portal/graphql-playground under Publishing APIs; remove redirect
1 parent d3ec153 commit 563371b

2 files changed

Lines changed: 25 additions & 32 deletions

File tree

‎docs.json‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -532,7 +532,7 @@
532532
"group": "Publishing APIs",
533533
"pages": [
534534
"portal/api-products",
535-
"portal/api-products/graphql-products",
535+
"tyk-developer-portal/graphql-playground",
536536
"portal/api-plans",
537537
"tyk-stack/tyk-developer-portal/enterprise-developer-portal/managing-access/manage-catalogues"
538538
]
@@ -1013,10 +1013,6 @@
10131013
{
10141014
"source": "/basic-config-and-security/security/mutual-tls/client-mtls",
10151015
"destination": "/api-management/implement-tls"
1016-
},
1017-
{
1018-
"source": "/tyk-developer-portal/graphql-playground",
1019-
"destination": "/portal/api-products/graphql-products"
10201016
}
10211017
]
10221018
}

portal/api-products/graphql-products.mdx renamed to tyk-developer-portal/graphql-playground.mdx

Lines changed: 24 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: "Set Up GraphQL Documentation for API Products"
33
description: "How to add GraphQL SDL documentation and enable the interactive Playground for an API Product in the Tyk Developer Portal."
4-
sidebarTitle: "GraphQL Products"
4+
sidebarTitle: "GraphQL Playground"
55
keywords: "Developer Portal, GraphQL, SDL, GraphQL Playground, Universal Data Graph, UDG, API Product documentation, GraphQL schema"
66
---
77

@@ -28,60 +28,57 @@ You can add a GraphQL Schema Definition Language (SDL) file to an API Product to
2828

2929
## Add GraphQL Documentation to an API Product
3030

31-
<Tip>
32-
If you want to follow along with a ready-made example, use the **Star Wars GQL API** available from the Tyk Dashboard.
31+
1. **(Optional) Create a test GraphQL API**
3332

34-
Navigate to **APIs > Add New API**, click **Try example**, select **Star Wars GQL API**, and click **Use Example**.
33+
If you don't have an existing GraphQL API, use the built-in Star Wars example from the Tyk Dashboard:
34+
- Navigate to **APIs > Add New API**, click **Try example**, select **Star Wars GQL API**, and click **Use Example**
35+
- Copy the **Key ID** from the confirmation pop-up and save it — you will use this as the auth header when testing in the Playground
36+
- Go to the **Schema** tab of the newly created API and download the schema file — you will upload this as the SDL file in step 5
3537

36-
The Star Wars API uses [Auth Token](/api-management/authentication/bearer-token) authentication, copy the Key ID from the confirmation pop-up and use it as the `Authorization: Bearer <Key ID>` header when testing in the Playground.
37-
</Tip>
38+
<img src="/img/graphql-api-star-wars-schema.png" alt="GraphQL API Schema Tab" />
3839

39-
1. Navigate to **Developer Portal > API Products** and open the product you want to update, or [create a new API Product](/portal/api-products#creating-a-new-api-product).
40+
2. Navigate to **Developer Portal > API Products** and open the product you want to update, or [create a new API Product](/portal/api-products#creating-a-new-api-product).
4041

41-
2. On the **APIs** tab, select your GraphQL API:
42+
3. On the **APIs** tab, select your GraphQL API:
4243
- **Choose a provider**: select the Tyk Dashboard provider
4344
- **Choose authentication method**: match the authentication configured on your GraphQL API
4445
- **Select APIs**: check your GraphQL API from the list
4546

46-
3. Go to the **Documentation** tab and click **Add API specification**.
47+
4. Go to the **Documentation** tab and click **Add API specification**.
4748

48-
4. Set the specification type to **GraphQL SDL**, then upload your schema file.
49+
5. Set the specification type to **GraphQL SDL**, then upload your schema file.
4950

5051
Accepted formats: `.graphql`, `.graphqls`, `.gql`, `.json`. The maximum file size is set by `PORTAL_MAX_UPLOAD_SIZE` (up to 32 MB).
5152

5253
<img src="/img/graphql-docs-tab-playground-setup.png" alt="Documentation tab with GraphQL SDL upload and Server URL field" />
5354

54-
5. Set the **GraphQL Server URL** to the endpoint of your GraphQL API on the Gateway (for example, `http://gateway.example.com/my-graphql-api/`).
55+
6. Set the **GraphQL Server URL** to the endpoint of your GraphQL API on the Gateway (for example, `http://gateway.example.com/my-graphql-api/`).
5556

5657
From v1.16.0, this field is [auto-populated](#graphql-server-url-and-baseline-url) from your Provider's Baseline URL and the API's listen path. You can edit the value at any time.
5758

5859
<Note>
5960
The URL must end with a trailing slash. A missing trailing slash causes a 404 error in the Playground.
6061
</Note>
6162

62-
6. Click **Save Changes**.
63+
7. Click **Save Changes**.
6364

64-
7. Open your **Live Portal**, go to **Product Catalogues**, locate the product, and click **Docs** to see the GraphQL Playground.
65+
8. Open your **Live Portal**, go to **Product Catalogues**, locate the product, and click **Docs**.
6566

6667
<img src="/img/graphql-docs-live-portal.png" alt="GraphQL API Docs Live Portal" />
6768

68-
8. You should now see the **GraphQL Playground**, ready for interactive query testing.
69+
9. You should now see the **GraphQL Playground**, ready for interactive query testing.
6970

70-
<Note>
71-
72-
To test authenticated APIs, ensure you set the required authentication headers in the Playground according to your API's authentication settings.
73-
74-
For example, for the `Star Wars GQL API`, add the `Authorization` header with the value `Bearer <Key ID>` where `<Key ID>` is the token you saved earlier.
75-
76-
```json
77-
{
78-
"Authorization": "Bearer YOUR_KEY_ID"
79-
}
80-
```
81-
</Note>
71+
<Note>
72+
To test authenticated APIs, set the required authentication headers in the Playground. For example, for the Star Wars GQL API, add the `Authorization` header with the value `Bearer <Key ID>` where `<Key ID>` is the token you saved in step 1.
8273

74+
```json
75+
{
76+
"Authorization": "Bearer YOUR_KEY_ID"
77+
}
78+
```
79+
</Note>
8380

84-
<img src="/img/graphql-playground-portal.png" alt="GraphQL API Playground" />
81+
<img src="/img/graphql-playground-portal.png" alt="GraphQL API Playground" />
8582

8683
## GraphQL Server URL and Baseline URL
8784

0 commit comments

Comments
 (0)
⚡