How to make inputs more DRY in React Apollo? - apollo-client

Question

How can I reuse variable arguments in GQL Apollo React? e.g. in a situation where the inputs are the same but we need different data corresponding for a different situation.
Is there a way to define this inside or outside of this query call?
const REQUEST_1 = gql`
query QueryA(
$page: Int
$a: String
$b: Number
$etc: EtcFilter
) {
getData(
limit: 24
page: $page
a: $a
b: $b
etc: $etc
) {
total
result {
id
time
location
}
}
}
`
const REQUEST_2 = gql`
query QueryA(
$page: Int
$a: String
$b: Number
$etc: EtcFilter
) {
getData(
limit: 24
page: $page
a: $a
b: $b
etc: $etc
) {
total
result {
postContent
date
coordinates
id
}
}
}
`

Answer 1

Based on your Query example, the short/sad answer is you cannot do that.
According to the current GraphQL specs:
Variables must be defined at the top of an operation and are in scope throughout the execution of that operation.
That operation is referring to a query/mutation, in your example, REQUEST_1 and REQUEST_2 are two separate operations.
There is an open issue in the graphql-specs that could possible address this use case, but it is not anywhere near implementation.
Edit with one operation example (from comments)
You could combine both operations in one, in something like this:
const REQUEST = gql`
query QueryA(
$page: Int
$a: String
$b: Number
$etc: EtcFilter
) {
getData(
limit: 24
page: $page
a: $a
b: $b
etc: $etc
) {
total
result1: result {
id
time
location
}
result2: result {
postContent
date
coordinates
id
}
}
}
`
because you would be querying the same result object just with different fields, you will have to give an alias to it.
This will of course make the full query every time, but it will keep it cleaner of input parameters.