Custom Playground Scripts for GraphQL | Cosmo by WunderGraph - WunderGraph
Automate authentication and workflows in the Cosmo Playground
Run JavaScript before and after GraphQL operations. Pre-flight scripts handle OAuth globally. Post-operation scripts validate responses inline. No tool-switching required.
Environment variables stay browser-local. They are never saved into scripts or shared links.
The problem
Testing authenticated APIs is repetitive
Token expiry, response validation, and secure secret storage are unsolved problems in a standard GraphQL playground.
Manual token management kills flow
Bearer tokens expire. Every expiry means leaving the playground, fetching a new token, pasting it into the headers panel, and resuming. The interruption compounds across a team.
Response validation requires tool-switching
Checking that a response contains expected fields means copying the JSON into a separate script, a REST client, or a test file. There is no way to validate inline.
Secrets end up hardcoded in headers
Client IDs and secrets stored directly in header fields are visible in session history and accidentally shared. Teams need a safe place to store them.
Our solution
Programmable request lifecycle
Custom Scripts add a JavaScript execution layer at three points in the request lifecycle. Pre-flight handles auth globally. Pre-operation and post-operation scripts give each tab its own setup and validation logic.
Request lifecycle with scripts
- Pre-flight scripts run first, globally across all playground tabs. Use them for authentication — fetch a token, store it with playground.env.set, and inject it via the {{token}} header syntax.
- Pre-operation scripts run per tab, after the pre-flight but before the request. Use them for tab-specific header injection or variable setup.
- Post-operation scripts run per tab after the response arrives. Use them to validate that expected fields are present or to transform data.
- Scripts access the playground API object: playground.env.get and set for environment variables, playground.request.body for the request, playground.response.body for the response.
- The built-in CryptoJS library is available for encryption, decryption, and HMAC token handling.
- External fetch is supported, so scripts can call OAuth endpoints or any REST API accessible from the browser.
Authenticate once. Test without interruption.
Custom scripts
Before & After
| Before Cosmo | With Cosmo |
|---|---|
| Manually copy/paste tokens when they expire | Pre-flight script fetches a fresh token on every request |
| Switch to external tools to validate responses | Post-operation script checks the response inline |
| Secrets hardcoded in header fields | Secrets stored in browser-local environment variables |
| Complex workflows require multiple tools | Complete workflows run inside the playground |
Playground API
Available APIs in scripts
playground.env.get / set: Read and write browser-local environment variables.
playground.request.body: Inspect the outgoing request.
playground.response.body: Inspect the response after execution.
playground.CryptoJS: Encryption, HMAC, and token operations.
fetch: Call external OAuth endpoints or any browser-accessible API.
How custom scripts run in the playground
- Global auth for all tabs.
Pre-flight
A global script runs before any request in any tab. Authenticate here: call the OAuth endpoint, receive a token, and store it in an environment variable. All tabs share the result.
- Per-tab setup before the request.
Pre-operation
A per-tab script runs after pre-flight and before the request. Set tab-specific headers or variables using values from the environment.
- Headers injected safely.
Execute
The request runs with headers injected via the {{variable}} syntax. Environment variables keep secrets out of the header panel.
- Validation and transformation inline.
Post-operation
A per-tab script runs after the response. Validate that expected fields exist in playground.response.body, transform data, or log results to the console.
Capabilities
What custom scripts provide
- Automated authentication: Pre-flight scripts fetch tokens and store them in environment variables. The
{{token}}header syntax injects the current value into every request. - Inline response validation: Post-operation scripts check that required fields exist in the response and log failures to the console. No external test runner required.
- Secure secret management: Environment variables are stored in the browser locally, not inside scripts, and are not shared in playground links. When you reference one in a header with {{key}}, the playground substitutes the value and sends it to the router with the request.
- CryptoJS and external fetch: The built-in CryptoJS library supports HMAC, encryption, and decryption. The browser fetch API lets scripts call OAuth providers or any accessible REST endpoint.
Stop managing tokens manually
Write a pre-flight script once. Token refresh happens automatically on every request across all tabs.
FAQ
Custom Playground Scripts on Cosmo
What script types are available?
How do I inject a token into request headers?
Where are environment variables stored?
What APIs are available inside scripts?
Can scripts call external APIs?
Is CryptoJS available for token handling?
Are scripts shared across the organization?
Full reference in the custom scripts documentation.