How do I make graphql calls in series? react-apollo - apollo

Question

I am composing 2 queries in a hoc with react-apollo. Here is my code:
let queries = compose(
graphql(gql`
query getUnitSubcategories($input: UnitSubcategorySearchInput) {
allUnitSubcategories(input:$input) {
edges {
node {
unitSubcategoryId
}
}
}
}
`, {
name: 'subcategories',
options: {
variables: {
input: {
activeFlag: true,
}
}
}
}),
graphql(gql`
query getFinancialTransactions($input: FinancialTransactionLineSearchInput) {
allFinancialTransactionLines(input: $input) {
pageInfo {
total
}
edges {
node {
financialTransaction {
financialTransactionId
}
}
}
}
}
`, {
name: 'financialTransactions',
options: {
variables: {
input: {
unitSubcategories: [
....
]
}
}
}
})
);
You can see that I am getting the unitSubcategories in the first query and they need to be passed to the second query. So I don't want to kick off the second query until I have a result from my first query. What is the best way to do this?

Answer 1

You'll want to use the skip config. See https://www.apollographql.com/docs/react/basics/queries.html#graphql-skip
In your example, you might want to define the skip config in the second query something like this:
{
name: 'financialTransactions',
skip: ({ unitSubcategories }) => !unitSubcategories,
options: ({ unitSubcategories }) => ({
variables: {
input: {
unitSubcategories
}
}
})
}
where you only want the second query to run after you've received the result from the first query. And then use options as a function so you can compute them from props.