Skip to main content

Variables and the @export Directive

The @export directive saves a field's value into a named variable you can reference in later actions of the same query.

Export Directive

Append @export(as: "name") to any field to capture its value into a named variable. The as argument sets the variable name. You can export as many variables as you need — each one is available to all actions that follow it in the same mutation.

To use a variable in a later action, reference it with ${variableName} syntax in any action parameter. BrowserQL substitutes the exported value at that point in the query. Use aliases to distinguish multiple calls to the same action at the same level.

mutation ExportMultipleValues {
goto(url: "https://news.ycombinator.com/") {
status
}
getTopLink: evaluate(content: "document.querySelector('.athing.submission .title a').href") {
value @export(as: "topStoryLink")
}
getTopTitle: evaluate(content: "document.querySelector('.athing.submission .title a').textContent") {
value @export(as: "topStoryTitle")
}
type(selector: "input[type=text]", text: "${topStoryTitle}") {
text
time
}
gotoTopLink: goto(url: "${topStoryLink}") {
url
status
}
}

Exports support only scalar values: strings and numbers. Complex objects and arrays cannot be exported. Exports are scoped to the mutation and are not available in other queries.

Undefined exports pass through as literal strings

If you reference a variable that hasn't been exported yet, BrowserQL passes the raw ${variableName} text through unchanged. No error is raised. Always export a variable before referencing it.

Next Steps