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

refetch

refetch

but seems like it is not allowing me to take in a new input, for example I want to update the

pageIndex and pageSize

pageIndex and pageSize

refetch

refetch

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>();`
      }}
    />
  )
}

The reason that I want to do this is so that I can reuse the

<CommonComponent>

<CommonComponent>

refetch

refetch

but seems like it is not allowing me to take in a new input, for example I want to update the

pageIndex and pageSize

pageIndex and pageSize

refetch

refetch

doesn't allow me to input the new values.

Thanks in advance!

Invalid hook call using useQuery

Similar Threads

Invalid hook call using useQuery

Similar Threads

Similar Threads

Similar Threads