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 !

7 Replies

nexxel•16mo ago

you can't call a hook conditionally that breaks the rules of react

How What•16mo ago

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

nexxel•16mo ago

easiest solution is to just make the query a mutation or use the enabled property in react query

How What•16mo ago

Oh okay thanks

nexxel•16mo ago

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•16mo ago

syntax will be a bit different but you get the idea

How What•16mo ago

thanks i'll try this

Gaming

Programming

Rule of hooks error