In my code I want to execute a query conditionally and then check its loading variable inside the template, but only if the query is executed and don't want to have any TypeScript errors in my file. How do I check this variable which might or might not exist in its context?
I am using Apollo GraphQL.
if( executeMyQuery )
{
const {
data, loading: loadingQuery
} = useQuery( MyQuery );
}
return (
<View>
{ /* ... some code ... */ }
{ executeMyQuery && loadingQuery ?
<Text>Query is loading...</Text>
{ /* ... some code ... */ }
: null }
</View>
);
TypeScript says: Cannot find name 'loadingQuery'.
Take a look at dependent queries
const {
data, loading: loadingQuery
} = useQuery( MyQuery, {
// The query will not execute until the userId exists
enabled: executeMyQuery,
}
);
return (
<View>
{ /* ... some code ... */ }
{ executeMyQuery && loadingQuery ?
<Text>Query is loading...</Text>
{ /* ... some code ... */ }
: null }
</View>
);
Fixed it using the skip parameter by changing
if( executeMyQuery )
{
const {
data, loading: loadingQuery
} = useQuery( MyQuery );
}
To
const {
data, loading: loadingQuery
} = useQuery( MyQuery, {
skip: executeMyQuery,
} );