Dependant and parallel queries

[pmarxbraun]

Hi,

I'd like to call useQueries dependent on a previous one useQuery to finish before it can execute.
I'm calling the 1 st one as such :

  const {
    isLoading,
    isError,
    isSuccess,
    error,
    data: post,
  } = useQuery({
    queryKey: ["post", id],
    queryFn: fetchPost,
    cacheTime: 5 * 60 * 1000,
  })

It returns the response with following shape

{
title : ...,
name:...,
...,
categories : [numbers]
}

My goal is to then take response.categories and make parallel queries using useQueries.
Currently if fails as categoriesArr is called before postCats is received, and if I conditionally call useQueries it breaks the rules of Hooks.

const postCats = post?.categories
const categoriesArr = useQueries({
    queries: postCats.map(cat => {
      return {
         queryKey: ["postcategories", cat],
    queryFn: fetchPostCategories(cat),
      }
    })
  })

fetchPost and fetchPostCategories are basic fetch calls.
Is there a way to wait for fetchPost to respond before calling parallel useQueries ?

Right now i'm using this approach after fetchPost :

  // Then get the posts's categories data
  const { status, data: categories } = useQuery({
    queryKey: ["postcategories", postCats],
    queryFn: fetchPostCategories,
    enabled: !!postCats,
  })

fetchPostCategories being a for...loop iterating over postCats.
It works but I don't think I'm using it the right way and profit from the library benefits.
Thanks for your help 🙏

[TkDodo]

just pass in an empty array to useQueries if it's not ready yet:

const postCats = post?.categories ?? []
const categoriesArr = useQueries({
  queries: postCats.map(cat => {
    return {
      queryKey: ["postcategories", cat],
      queryFn: fetchPostCategories(cat),
    }
  })
})

[pmarxbraun]

@TkDodo thanks ! It seems to work.
I also needed to check that each call in the useQueries call is successfull

{categoriesArr.map(
                (cat) =>
                  cat.isSuccess && (
                    <p key={cat.data.id} className="categorie_tag">
                      {cat.data.name}
                    </p>
                  )
              )}

otherwise it throws a 'undefined'.
Could be great to have areLoading, areError, areSuccess as responses in useQueries.

[etler]

If you pass in an empty array wouldn't it not be possible to distinguish between an empty list and a list that isn't loaded yet? You could look at the load state of the providing query but if the result of the useQueries were passed to another context you would lose that information. I think it would be better if useQueries had some kind of enabled option at the top level, but to pass the information along it would need a wrapper of some kind, or return a different kind of value for the disabled state.

[adam-beck]

I have a similar use-case and can't figure out the TanStack/query idiomatic way. Basically, I fetch a resource that returns a set of IDs. In order for the data to have any meaning, I need to associate those IDs with actual resources. I want to maintain the cache so don't want to fetch any of this data outside of TanStack/query.

So I started with @TkDodo's suggestion of just using an empty array for queries.

const useQueryFamily = (parentId: number) => {
  const parent = useQuery({
    queryKey: ['parent', parentId],
    queryFn: fetchParent // returns an object containing { childrenIds: [1, 2, 3] }
  });

  // I can't return `parent` from this custom hook because it isn't complete yet
  const childrenIds = parent.data?.childrenIds ?? [];
  const children = useQueries({
    queries: childrenIds.map(childId => {
      return {
        queryKey: ['children', childId],
        queryFn: fetchChild,
        // enabled: this isn't really necessary because it's only going to run once there are childrenIds because otherwise childrenIds is an empty array
      }
    })
  });

  // Transform the data: add the Child *object* to the Parent
  let childrenCollection = {};
  if (children.length > 0 && children.every(query => query.isSuccess) {
    childrenCollection = children.reduce((collection, query) => {
      collection[query.data.id] = query.data;
      return collection;
    }, {});
  }
  const transformed = {
    ...parent.data,
    children: childrenCollection
  }
  // Not sure how to return from this custom query or *what* to return
  // The isLoading property is now "wrong" because it is done but the children hasn't been populated yet
  // It's not quite "done" in that sense
  // I could do something like:
  // isLoading: parent.isLoading || children.some(query => query.isLoading)
  //
  // but would I have to do that for all the different properties returned from query?
  return { ...parent, data: transformed }
}

[TkDodo]

your solution looks right (useQuery + useQueries). How you continue from there is up to you. To have a loading state that is only false when everything is finished loading, you'd do:

const isAnythingLoading = parent.isLoading || children.some(c => c.isLoading)

but would I have to do that for all the different properties returned from query?

it depends. Do you need all errors? Do you need the fetchStatus of each child query? Return what your ui wants to consume :)

[TkDodo]

yeah, that's because some on an empty array yields false. You can either check this explicitly, or use:

children.every(c => !c.isLoading)

"every child should not be loading". This will be true` for empty arrays.

[adam-beck]

First, thank you for your reply! Second, sorry I deleted my comment already because I didn't give it as much thought as I should have. I didn't mean to waste your time. I will continue with your suggestion above and see where it leads -- if you couldn't tell I'm still trying to grok some of this new shift in thinking.