How to import the QueryHooks interface?

[rwilliams3088]

I wrap some of my endpoints in a generic class that is able to integrate RTK Query endpoints with AgGrid as a ServerSideDatasource. One of the interfaces that I rely upon is the QueryHooks interface, as I make use of the useLazyQuery() function.

I used to be able to import this from @reduxjs/toolkit/dist/query/react/buildHooks, but that no longer works now that I've upgraded to the latest version of @reduxjs/toolkit. Nor does @reduxjs/toolkit/query/react or @reduxjs/toolkit/query/react/buildHooks.

I can work around this for now by duplicating the interface locally... but not the ideal solution. Please advise on how to properly import this interface into my code.

[EskiMojo14]

could you show how you're using the QueryHooks interface specifically?

[rwilliams3088]

Sure. Here are the props to my wrapper class, which uses the interface as part of the endpoint type definition.

export interface AgGridDatasourceProps<
  OPTS extends AgGridQueryArgs_Options = AgGridQueryArgs_Options,
  QA extends AgGridQueryArgs<OPTS> = AgGridQueryArgs<OPTS>, 
  RT extends AgQueryResponse = AgQueryResponse, 
  QD extends QueryDefinition<QA, any, any, RT, any> = QueryDefinition<QA, any, any, RT, any>
  > {
    endpoint: ApiEndpointQuery<QD, any> & QueryHooks<QD>;
    options?: Omit<OPTS, 'countOnly'>;
    queryArgs?: (orig: AgGridQueryArgs) => QA,
  }

And this is used in the class to acquire a trigger function to invoke the query dynamically:

export function useAgGridDatasource<
  OPTS extends AgGridQueryArgs_Options = AgGridQueryArgs_Options,
  QA extends AgGridQueryArgs<OPTS> = AgGridQueryArgs<OPTS>,
  RT extends AgQueryResponse = AgQueryResponse,
  QD extends QueryDefinition<QA, any, any, RT, any> = QueryDefinition<QA, any, any, RT, any>, 
  P extends AgGridDatasourceProps<OPTS, QA, RT, QD> = AgGridDatasourceProps<OPTS, QA, RT, QD>
  >(props: P): AgGridServerSideDatasource {

  const { endpoint, options, queryArgs } = props;
  const [trigger] = endpoint.useLazyQuery();
  ....
  const query = trigger(qa, false); // invoked in a callback function by AgGrid
  ....
  
}

Not having access to this interface breaks my entire application

[EskiMojo14]

is useLazyQuery the only thing you're using endpoint for?

export interface AgGridDatasourceProps<
  OPTS extends AgGridQueryArgs_Options = AgGridQueryArgs_Options,
  QA extends AgGridQueryArgs<OPTS> = AgGridQueryArgs<OPTS>, 
  RT extends AgQueryResponse = AgQueryResponse
  > {
    endpoint: { useLazyQuery: TypedUseLazyQuery<RT, QA, any> }
    options?: Omit<OPTS, 'countOnly'>;
    queryArgs?: (orig: AgGridQueryArgs) => QA,
  }

export function useAgGridDatasource<
  OPTS extends AgGridQueryArgs_Options = AgGridQueryArgs_Options,
  QA extends AgGridQueryArgs<OPTS> = AgGridQueryArgs<OPTS>,
  RT extends AgQueryResponse = AgQueryResponse,
  >(props: AgGridDatasourceProps<OPTS, QA, RT>): AgGridServerSideDatasource {

  const { endpoint, options, queryArgs } = props;
  const [trigger] = endpoint.useLazyQuery();
  ....
  const query = trigger(qa, false); // invoked in a callback function by AgGrid
  ....
  
}

[rwilliams3088]

is useLazyQuery the only thing you're using endpoint for?

That plus the type constraints for the query args and such

[rwilliams3088]

Found a work-around for the moment (but the hook interfaces still need to be exposed properly - please and thank you). Import it via the local file system in the node_modules folder:

import { QueryHooks } from "../../../../node_modules/@reduxjs/toolkit/dist/query/react/buildHooks";

[EskiMojo14]

did you try the code I posted?