useQueries, but one by one?

[Toshinaki]

useQueries is used to do an array of parallel queries, but I'm currently having a use case, that the query uses an external API service and I want to limit the request rate.
Is there any way to query data sequentially?

The API takes an id as input, and there's a dynamic array of ids.

[samhirtarif]

Why not just call useQuery for each ID with throttling? 🤔

[Toshinaki]

I'm not sure how to implement that. Can you please show some code?

[samhirtarif]

It would help if you could share the code from your implementation and I can help you out with that.

[TamirCode]

Use the "enabled" option if a query depends on a previous one before executing. This will let you do sequential queries.

https://tanstack.com/query/latest/docs/react/guides/dependent-queries

[WouterrV]

If you just want to useQueries but execute all the queries in series, here's one approach to do it:

function Example() {
  // Store the generated queries in a ref
  // this way, we can access the queries produced in the previous rendering cycle, while creating useQueries
  // alternatives to this:
  // 1. use infiniteQuery
  // 2. store state for the success of our queries, using ref here feels like a hack
  // issues with this approach: if one query fails, queries stop
  const pokemonQueriesRef = React.useRef<UseQueryResult[]>([]);

  const pokemonQueries = useQueries({
    queries: [0, 1, 2, 3, 4, 5].map((page) => {
      // Try to look up the status of the previous query
      const previousQueryStatus = pokemonQueriesRef.current[page - 1]?.status;

      // If the previous query is successfull, only then do we enable the current query
      // always enable when our page is 0 (we dont have a previous query then)
      const enableThisQuery = previousQueryStatus === 'success' || page === 0;

      return {
        queryKey: [{ entity: 'pokemon', page }],
        enabled: enableThisQuery,
        queryFn: () => fetchPokemon(page),
      };
    }),
  });

  // Put most recent value of pokemonQueries in the ref so we can access pokemonQueries while creating it
  pokemonQueriesRef.current = pokemonQueries;

see https://stackblitz.com/edit/vitejs-usequeries-series

[WouterrV]

Same approach but extracted to a hook, used to replace useQueries. If someone could fix the typing to reuse useQueries' typing that'd be great.

type UseQueriesSeries = {
  queries: any[];
};

const useQueriesSeries = ({ queries }: UseQueriesSeries) => {
  const useQueriesResultRef = React.useRef<any[]>([]);

  const partiallyEnabledQueries = queries.map((query, index) => {
    // Out of bounds error doesn't exist in ts, enabling succinct syntax
    const prevQueryStatus = useQueriesResultRef.current[index - 1]?.status;

    return {
      ...query,
      // only enable when first query, or when previous query is done
      enabled: index === 0 ? true : prevQueryStatus === 'success',
    };
  });

  const useQueriesResult = useQueries({
    queries: partiallyEnabledQueries,
  });

  // Put useQueriesResult in the ref, so we access them next render cycle (triggered by useQueries changing state)
  useQueriesResultRef.current = useQueriesResult;

  return useQueriesResult;
};

Working example: https://stackblitz.com/edit/vitejs-usequeries-series-jqqmbu?file=src%2FApp.tsx

Maybe useInfiniteQuery would make more sense than writing a custom hook.

[awaisabir]

How would you use useInfiniteQuery for this use-case?