T
TanStack•12mo ago
graceful-blue

Wait for multiple queries to succeed

I'm looking for a way to wait for all queries to have the success status, is there some build in equivalent like this example below? 
export const combineQueries = <T extends Record<string, UseQueryResult>>(queries: T) => {
  if (Object.values(queries).every((query) => query.status === 'success')) {
    return { status: 'success', queries };
  }

  if (Object.values(queries).some((query) => query.status === 'error')) {
    return { status: 'error', queries };
  }

  return { status: 'pending', queries };
};
export const combineQueries = <T extends Record<string, UseQueryResult>>(queries: T) => {
  if (Object.values(queries).every((query) => query.status === 'success')) {
    return { status: 'success', queries };
  }

  if (Object.values(queries).some((query) => query.status === 'error')) {
    return { status: 'error', queries };
  }

  return { status: 'pending', queries };
};
  const teamsFind = useTeamsFind({ id: teamId });
  const teamUsersPaginate = useTeamUsersPaginate({ teamId });

  const query = combineQueries({
    team: teamsFind,
    users: teamUsersPaginate,
  });

  return match(query)
    .with({ status: 'pending' }, () => null)
    .with({ status: 'error' }, () => null)
    .with({ status: 'success' }, ({ queries: { team, users } }) => (
      // ...
    })
    .exaustive();
  const teamsFind = useTeamsFind({ id: teamId });
  const teamUsersPaginate = useTeamUsersPaginate({ teamId });

  const query = combineQueries({
    team: teamsFind,
    users: teamUsersPaginate,
  });

  return match(query)
    .with({ status: 'pending' }, () => null)
    .with({ status: 'error' }, () => null)
    .with({ status: 'success' }, ({ queries: { team, users } }) => (
      // ...
    })
    .exaustive();
3 Replies
extended-salmon
extended-salmon•12mo ago
https://tanstack.com/query/latest/docs/framework/react/reference/useQueries
useQueries | TanStack Query React Docs
The useQueries hook can be used to fetch a variable number of queries: tsx const ids = [1, 2, 3] const results = useQueries({ queries: ids.map((id) = ({ queryKey: ['post', id], queryFn: () = fetchPost...
graceful-blue
graceful-blueOP•12mo ago
But what is useTeamsFind and useTeamUsersPaginate are already wrappers on the useQuery hook?
extended-salmon
extended-salmon•12mo ago
I would convert them to queryOptions You can have both queryOptions and hook versions of teams and use them as necessary. 
export const teamsQuery = queryOptions({
  ...
})

const export useTeamsQuery = useQuery(teamsQuery)
export const teamsQuery = queryOptions({
  ...
})

const export useTeamsQuery = useQuery(teamsQuery)
Then you can useQueries with teamsQuery where it's useful, use the useTeamsQuery hook where that's useful, etc.

Did you find this page helpful?