I'm wrapping the Apollo clients useLazyQuery function as the current function doesn't allow the skip functionality if its the first time you've performed the query.
I'm using
export function useQuery(query, options) {
const [ execQuery, result ] = useLazyQuery(query, options);
useEffect(() => {
if (options.skip !== true) {
execQuery();
}
}, [ execQuery, options.skip ]);
return result;
}
My codebase contains lots of calls like
const { loading, data: { getAccount: account = {} } = {} } = useQuery(GET_ACCOUNT, {
variables: { id: accountID },
skip: !accountID
fetchPolicy: 'cache-and-network'
});
I'm struggling to work out how to return the data and the loading bool from the useLazyQuery function that I've wrapped and store it in the above consts. Currently, it returns the data fine which gets stored in account but I can't get it to return and store the loading bool that useLazyQuery returns.
I've tried:
const [ loading, execQuery, result ] = useLazyQuery(query, options);
useEffect(() => {
if (options.skip !== true) {
execQuery();
}
}, [ execQuery, options.skip ]);
return [loading, result];
But the result then came back as undefined