GraphQL Variables Builder

GraphQL variables are dynamic values passed separately from the query string at runtime. Instead of hardcoding values like query GetUser { user(id: "abc") }, you write query GetUser($id: ID!) { user(id: $id) } and pass { "id": "abc" } as the variables JSON. This prevents injection attacks, enables query reuse, and makes caching more effective.

The exclamation mark (!) marks a type as non-null — it means the field is required and the server guarantees it will never be null. For example, $id: ID! means the id variable must always be provided. Without !, the variable is optional and can be omitted or set to null.

Use list type syntax like [String!] and check the 'List' option in this tool. In the variables JSON, provide a JSON array: { "tags": ["news", "tech"] }. The type [String!] means a nullable list of non-null strings. [String!]! would mean a required list of non-null strings.

ID is a built-in scalar type used for unique identifiers. It is serialized as a string in JSON but can represent string or integer IDs. Clients should treat it as opaque — don't perform arithmetic on it. Use ID for database primary keys, UUIDs, or any field used to uniquely identify an object.

Most GraphQL clients (Apollo, urql, fetch) accept variables separately from the query. With fetch: fetch('/graphql', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query: '...', variables: { id: '123' } }) }). With Apollo useQuery: useQuery(MY_QUERY, { variables: { id: '123' } }).

The variable syntax is the same for all three operation types. Variables are declared in the operation signature ($name: Type) and used in field arguments. The operation type (query/mutation/subscription) describes what the operation does — read, write, or real-time stream — but the variable mechanism works identically.