GraphQL Playground Lite

CORS (Cross-Origin Resource Sharing) blocks browser requests to APIs that haven't whitelisted your origin. This is a browser security policy, not a GraphQL limitation. Solutions: (1) Configure your server to send Access-Control-Allow-Origin headers for your domain, (2) Use a proxy or tunnel like ngrok to forward requests, (3) Use a dedicated GraphQL client like Apollo Studio or Insomnia for APIs without CORS headers, or (4) Add a server-side proxy endpoint in your own backend.

GraphQL is a query language for APIs that lets clients request exactly the data they need, nothing more. Unlike REST where the server defines the shape of each endpoint's response, in GraphQL the client writes a query specifying which fields it wants. This eliminates over-fetching (getting too much data) and under-fetching (needing multiple requests). A single GraphQL endpoint handles all operations via POST requests.

Variables let you pass dynamic values into queries without string interpolation. Define a variable in your query with a $ prefix: query GetUser($id: ID!) { user(id: $id) { name } }. Then in the Variables panel, provide the values as JSON: { "id": "123" }. This is safer than building query strings and enables query reuse with different inputs.

Schema introspection sends a special __schema query to the GraphQL endpoint that returns the full type system — all available queries, mutations, subscriptions, types, and their fields. This is how GraphQL IDEs like GraphiQL auto-complete your queries. Use it to explore an unfamiliar API without needing external documentation.

Queries are read-only operations that fetch data. Mutations modify data (create, update, delete) and should be used for any operation with side effects. Both look syntactically similar, but the keyword at the start tells the server which type it is: query { ... } vs mutation { ... }. If you omit the keyword entirely, GraphQL treats it as a query by default.

Yes. Expand the Headers section and add an Authorization header with your token, for example: key = Authorization, value = Bearer your-token-here. The tool will include this header with every request. Make sure your API also has CORS configured to allow the Authorization header from browser origins.