Invalid hook call using useQuery

Hello, I am trying to implement a common component that accepts a function props that will fetch data from the server. For example, see the code below:

export const UsersTable = () => {
  return (
    <CommonComponent
      fetchData={async (pageIndex, pageSize) => {
        const { data } = api.users.list.useQuery({ pageIndex: 0, pageSize: 10 }); // api is created in another file which `api = createTRPCReact<x>();`
      }}
    />
  )
}

export const UsersTable = () => {
  return (
    <CommonComponent
      fetchData={async (pageIndex, pageSize) => {
        const { data } = api.users.list.useQuery({ pageIndex: 0, pageSize: 10 }); // api is created in another file which `api = createTRPCReact<x>();`
      }}
    />
  )
}

The reason that I want to do this is so that I can reuse the <CommonComponent><CommonComponent> in other files where I need to only replace the query with another query to fetch different data from the server. I know this violates the rules of hook, but just wondering if there is any other way to fetch the data from the server which is not a hook (using trpc)? I have tried using refetchrefetch but seems like it is not allowing me to take in a new input, for example I want to update the pageIndex and pageSizepageIndex and pageSize, refetchrefetch doesn't allow me to input the new values.

Thanks in advance!

tRPC•2y ago•

4 replies

Jei

Invalid hook call using useQuery

Hello, I am trying to implement a common component that accepts a function props that will fetch data from the server. For example, see the code below:

export const UsersTable = () => {
  return (
    <CommonComponent
      fetchData={async (pageIndex, pageSize) => {
        const { data } = api.users.list.useQuery({ pageIndex: 0, pageSize: 10 }); // api is created in another file which `api = createTRPCReact<x>();`
      }}
    />
  )
}

export const UsersTable = () => {
  return (
    <CommonComponent
      fetchData={async (pageIndex, pageSize) => {
        const { data } = api.users.list.useQuery({ pageIndex: 0, pageSize: 10 }); // api is created in another file which `api = createTRPCReact<x>();`
      }}
    />
  )
}

Continue the conversation

Join the Discord to ask follow-up questions and connect with the community

tRPC

Move Fast & Break Nothing. End-to-end typesafe APIs made easy.

4,951 Members

Join

Invalid hook call using useQuery

Invalid hook call using useQuery

Continue the conversation

tRPC

Continue the conversation

tRPC

Similar Threads