I need to execute my query multilple times with different variables. The only way I could find to make this work is pretty ugly -
ids.forEach((id) => {
query
.refetch(
caseId: id,
})
.then((res: { data: CaseOutput }) => {
<logic>
});
});
This is a pretty buggy approach and makes some of my queries stall / fail unexpectedly. Is there a cleaner way to do this?
1 Like
We achieve this in React using the useLazyQuery hook provided by Apollo Client. In the snippet below, invoking the useLazyQuery constructor on component mount returns a sendRequest method which we use later on down the app/component exectution. We invoke this method passing in new variables that override those set on mount.
const query_options = useMemo(() => ({
onCompleted: onResultCallback, fetchPolicy: fetch_policy, notifyOnNetworkStatusChange: true, returnPartialData: false, errorPolicy: "all", overwrite: false
}), [fetch_policy, onResultCallback]);
const [sendRequest, { error }] = useLazyQuery(gql`${query}`, { ...query_options, variables: { request: my_dynamic_request_object });
// later on in component execution - call sendRequest with new variables
sendRequest({ variables: my_dynamic_request_object });
Why does it fail?
Maybe you could try batching your request?
Or if you have too many to do, maybe you could just add a setTimeout after each request resolve in order to give it a delay?
Or maybe apply Promise.all()
on your array of requests?