How to get isLoading from React Query custom hook

Question

I am trying to get isLoading returned from a custom React Query hook.

Here is my hook:

async function getUserDiscussions(
  user: User | null
): Promise<Post[] | null> {
  const { data } = await axiosInstance.get(
    `/getUserPosts`,
  );
  return data;
}

export function usePosts(): Post[] {

  const fallback: Post[] = [];
  const { data: posts = fallback } = useQuery(
    [
      queryKeys.posts,
    ],
    () => getUserDiscussions(user),
  );
  return posts;
}

I am then calling the hook in a component like this:

const posts = usePosts()

I would like to then be able to access isLoading and update the UI accordingly.

How can I access isLoading from the query in the custom hook and use it in the component?

Just return the query itself and you can access it's methods! — Vahid Alimohamadi
– Vahid Alimohamadi, Commented Jan 21, 2023 at 12:51
Thanks @VahidAlimohamadi, can you give me an example of how I can do that please? — herbie
– herbie, Commented Jan 21, 2023 at 12:53
The first answer is showing how @sgrmhdk returning the isLoading method. Also you can return the whole query obj. return useQuery(...) instead of posts and isLoading. — Vahid Alimohamadi
– Vahid Alimohamadi, Commented Jan 21, 2023 at 12:57

sgrmhdk · Accepted Answer · 2023-01-21 12:54:00Z

1

You can get it from useQuery and return the same from your function.

export function usePosts(): Post[] {

  const fallback: Post[] = [];
  const { data: posts = fallback, isLoading } = useQuery(
    [
      queryKeys.posts,
    ],
    () => getUserDiscussions(user),
  );
  return {posts,isLoading};
}

answered Jan 21, 2023 at 12:54

sgrmhdk

2361 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sgrmhdk Over a year ago

tanstack.com/query/latest/docs/react/reference/… You can refer documentation here.

Vahid Alimohamadi Over a year ago

it seems there must be a type error because of you determined the function return type as an array.

herbie Over a year ago

Hi @VahidAlimohamadi, Yes it won't let me return posts as it isn't defined on the types.

Collectives™ on Stack Overflow

How to get isLoading from React Query custom hook

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related