TanStackT
TanStack2mo ago
9 replies
popular-magenta

useSuspenseQuery + skipToken = how?

can't get clearer than this.
how to achieve that?

goal is to feed multiple queries created from search params into useSuspenseQueries. think as:

async function loader() {
  const userId = searchParams.get('userId')
  const teamId = searchParams.get('teamId')

  const userQueryOptions = queryOptions({
    queryKey: ['user', userId],
    queryFn: userId ? fetch() : skipToken
  })

  const teamQueryOptions = queryOptions({
    queryKey: ['team', teamId],
    queryFn: teamId ? fetch() : skipToken
  })

  await queryClient.ensureQueryData(userQueryOptions)
  await queryClient.ensureQueryData(teamQueryOptions)

  return { userQueryOptions, teamQueryOptions }
}

function RouteComponent() {
  const { userQueryOptions, teamQueryOptions } = Route.useLoaderData()
  const [user, team] = useSuspenseQueries({ queries: [userQueryOptions, teamQueryOptions] })
}


1. i can't really do a for loop because of the type aggregation if so.
2. i could use useQueries which would work in the context of tanstack router, but how without?
3. skipToken doesn't work with suspenses :/

Please advice
Was this page helpful?