Tobi
Tobi

Reputation: 93

Dependant Tanstack useQueries. How to chain them?

I've a functional react component like this, using Tanstack Query v4 and react 18:

const Userview = (props) => {
...
const userQueries = useQueries({
    queries: props.users.map((user) => {
        return {
            queryKey: ['users', user.id],
            queryFn: () => fetchUserById(user.id),
                {
                    enabled: props.users,
                },
                {
                    headers: {
                        'Content-Type': 'application/json',
                    }
                }),
        },
        {
            onSuccess: (v) => {
                console.log(v)
            },
            onError: (e) => {
                console.log(e)
            },
        }
    }),
})

useEffect(() => {
    if (props.users) {
        console.log(props.users);
    }
}, [props.users])
...
}

How do i execute the queries when props.users is no longer undefined? Now i'm getting the error because of props.users.map() is undefined on first mounting. Is there a correct way, or a "best practice" to do this? I've only found this case for a single useQuery in the docs.

Upvotes: 1

Views: 684

Answers (0)

Related Questions