I want to run Graphql Apollo query with as many ids as possible

Question

Using react ,apollo.
I want to execute useUserQuery for the number of ids stored in the state. currently, it is only executed once because ids[0] is written in variables. Also, I can only get the data for ids[0].
I would like to execute useUserQuery as many times as there are ids in the state.

   const [ids, setIds] = React.useState<string[]>([]);

  const {data: {userData = null} = {}} = useUserQuery({
    variables: {id: ids[0]},
    skip: !ids,
  });

Answer 1

Not sure what you mean by useUserQuery, let me assume it is a custom hook made using the original useQuery

A possible solution is to use useLazyQuery which is triggered manually, otherwise you can do it like this:

  let fetchId = useRef(0);
  
  const {data: {userData = null} = {}, refetch} = useUserQuery({
     variables: {id: ids[0]},
     skip: !ids,
     onComplete: () => {
         if (++fetchId.current < ids.length)
             refetch({id: fetchId.current})
     }
   });

In this case you can also use useState which will auto-refetch when changed.