Rule of hooks error

Hello,
I'm discovering T3 Stack and I'm struggling with the react rule of hooks.

I would like to call this query :

const onPlaylistClick = () => {
    const { data: songsList } = api.spotify.songsList.useQuery(
      "3rsOyZnnXMBOiyBVVvpacn",
    );
    console.log(songsList);
  };

const onPlaylistClick = () => {
    const { data: songsList } = api.spotify.songsList.useQuery(
      "3rsOyZnnXMBOiyBVVvpacn",
    );
    console.log(songsList);
  };

When I click on my button
Is there any way to call the query like a mutation ?
Thanks in advance !

nexxel•2/14/23, 4:38 PM

you can't call a hook conditionally

nexxel•2/14/23, 4:38 PM

that breaks the rules of react

How WhatOP•2/14/23, 4:38 PM

Yeah I see that but then how can I do it ?

nexxel•2/14/23, 4:38 PM

easiest solution is to just make the query a mutation

nexxel•2/14/23, 4:38 PM

nexxel•2/14/23, 4:39 PM

use the property in react query

How WhatOP•2/14/23, 4:39 PM

Oh okay thanks

nexxel•2/14/23, 4:40 PM

https://tanstack.com/query/v4/docs/react/guides/dependent-queries

Dependent Queries | TanStack Query Docs

Dependent (or serial) queries depend on previous ones to finish before they can execute. To achieve this, it's as easy as using the enabled option to tell a query when it is ready to run:

nexxel•2/14/23, 4:40 PM

syntax will be a bit different but you get the idea

How WhatOP•2/14/23, 4:42 PM

thanks i'll try this