How to use custom query hooks inside useQueries in react-query

Question

I created custom hooks for get requests from the server. Below is an example

const usePost = (id: string) => {
    return useQuery(['posts', id], () => getPost(id))
}
const usePosts = () => {
    return useQuery(['posts'], () => getPosts())
}

However, I sometimes need to call multiple queries in a single file, so I would like to use the useQueries hook along with the custom hooks. But when I try to use the custom hooks as the queryFn, React throws me an error saying I can't call a hook inside the function 'queryFn'.

const queries = useQueries([
    {
        queryKey: 'posts',
        queryFn: () => usePosts
    },
    {
        queryKey: ['post', id],
        queryFn: () => usePost(id)
    }
])
// Failed to compile, 'usePost' is called in function 'queryFn' that is neither a React component nor custom hook

How would we be able to use useQueries with custom query hooks?

I'm not sure how react-query works, but you're calling the usePost hook in the second object, which is not allowed in React outside of a component render function. Note that, in your code, the first queryFn is a 'function that returns a function', while the other queryFn is not. I think queryFn: () => () => usePost(id) might be what you want. — crizzis
– crizzis, Commented Jul 26, 2022 at 12:55
@crizzis thank you, but there is still an error. The hook cannot be called inside a callback. — Echo
– Echo, Commented Jul 26, 2022 at 13:29

zirkelc · Accepted Answer · 2022-07-26 15:00:21Z

This is simply a restriction by the Rule of Hooks in React, that hooks can only be called inside React function components and other React custom hooks.

There are two options to overcome this issue in my opinion:

combine usePost and usePosts in another custom hook

// useAllPosts.js
const useAllPosts = (id: string) => {
  const { data: post } = usePost(id);
  const { data: posts } = usePosts();

  return {
      post,
      posts
  }
}

put the fetcher functions outside of the custom hooks so you can re-use them in other components:

// usePost.js
export const fetchPost = (id: string) => getPost(id);
const usePost = (id: string) => {
  return useQuery(['posts', id], fetchPost)
}

// usePosts.js
export const fetchPosts = () => getPosts();
const usePosts = () => {
  return useQuery(['posts'], () => getPosts())
}

// SomeComponent.jsx
import { fetchPost } from 'usePost';
import { fetchPosts } from 'usePosts';
function SomeComponent() {
  const queries = useQueries([
    {
      queryKey: 'posts',
      queryFn: fetchPosts
    },
    {
      queryKey: ['post', id],
      queryFn: fetchPost
    }
  ]);
}

Collectives™ on Stack Overflow

How to use custom query hooks inside useQueries in react-query

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related