Call useQuery that depends on data of other useQuery

[daniel-kocsis88]

Hi All,

I am trying to call a useQuery depending of the data of an other useQuery with custom hooks.

export const Article = () => {
    const { articleId } = useParams();
 
    const { data: article, isLoading: isArticleLoading } = useFetchSingleArticle(articleId);
    const { data: user, isLoading: isUserLoading } = useFetchUserInfo(article?.sellerId);

    return (
      <>
      ...        
      </>
    );
  }

the useFetchUserInfo looks as following:

const getUserInfo = async (userId: string) => {
  const { data } = await axios.get(`${ BASE_URL }/user`, {
    params: {
      userId,
      apiToken: API_KEY,
    },
  });
  return data as GetUserResponse;
};

export default function useFetchUserInfo(userId: string ) {
  return useQuery<GetUserResponse>([ 'user', userId ], () => getUserInfo(userId),
    {
      retry: 2,
    },
  );
}

When I am trying to call useFetchUserInfo I am getting the error :
Argument of type 'string | undefined' is not assignable to parameter of type 'string'

Can someone tell me a nice way of solving this? Or should modify the query and the axios call param to type string | undefined?

thanks

[daniel-kocsis88]

I solved it with merging the two custom query hooks into one as explained it here:
https://react-query.tanstack.com/guides/dependent-queries

export default function useFetchSingleArticleAndUser(articleId: string) {
  const articleQueryResult = useQuery<ArticleResponse>([ 'article', articleId ], () => getArticleDetails(articleId) );

  const userId = articleQueryResult?.data?.sellerId;
  
  const userQueryResult = useQuery<GetUserResponse>([ 'user', userId ], () => getUserInfo(userId),
    {
      enabled: !!userId,
    },
  );

  return [ articleQueryResult, userQueryResult ];
}

and I use it like this:

const [article, user] = useFetchSingleArticleAndUser(articleId);