The query we have just made is hardcoded to get data for a specific repository. In this section, we'll define variables in the query, which essentially allow parameters to be passed into it:

1. We can add query variables in parentheses after the query keyword, separated by commas. Each parameter is defined by declaring its name with its type after a semicolon. This is similar to defining parameters in a TypeScript function with type annotations. The variable names need to be prefixed with $. The ! after the type signifies that this is required. So, in our case, both variables are required in order for the query to be executed. The variables can then be referenced within the query, which, in our case, is where we request the repository object:

query ($org: String!, $repo: String!) { 
  repository (owner:$org, name:$repo) {
    ...
  }
}

2. Before we execute the query, we need to specify the variable values. We do this in the Query Variables pane in the bottom-left corner in a JSON object:

{
  "org": "facebook",
  "repo": "react"
}

3. If we execute the query, we get the results for the repository we asked for:

We are now getting comfortable with reading data from a GraphQL server. But how can we create new data items or update data? We'll find out in the next section.