types for @cubejs-client-react?

[Manny91]

Hi All,

I'd like to integrate this in a project that its using React and typescript, in VSCode is coming up to try install type npm install @types/cubejs-client__react please correct me if I'm wrong but that doesn't seem to exist, is there any chance those types will be added to the react client?

Many thanks

[vasilev-alex]

Hi @Manny91! You're right, we don't have type definitions as of now. But it would be nice if you could contribute this one.

I think you can create a index.d.ts file and put it directly into cubejs-client-react package.

[hassankhan]

Here's one I wrote, but never got the time to make it into a PR. From what I remember, this didn't work as-is when moving to the cubejs-client-react package.

declare module '@cubejs-client/react' {
  import * as React from 'react';
  import { CubejsApi, Query, ResultSet } from '@cubejs-client/core';

  export type QueryRendererResponse = {
    resultSet?: ResultSet | null;
    error?: Error | null;
    loadingState: { isLoading?: boolean };
  };
  export type QueryRendererRenderProp = (
    result: QueryRendererResponse,
  ) => React.ReactElement;

  export type QueryRendererProps = {
    render: QueryRendererRenderProp;
    cubejsApi?: CubejsApi;
    query: Query;
    loadSql?: 'only' | any;
    updateOnlyOnStateChange?: boolean;
  };
  export class QueryRenderer extends React.Component<QueryRendererProps> {}

  export type UseCubeQueryOptions = {};
  export type UseCubeQueryOutput = {
    error?: Error | null;
    isLoading: boolean;
    resultSet?: ResultSet | null;
  };
  export function useCubeQuery(
    query: Query,
    options?: UseCubeQueryOptions,
  ): UseCubeQueryOutput;

  export type CubeProviderProps = {
    cubejsApi: CubejsApi;
    children: React.ReactFragment;
  };
  export class CubeProvider extends React.Component<CubeProviderProps> {}
}

[vasilev-alex]

Hi @hassankhan, thanks for posting that one. Maybe "types": "index.d.ts" added to the package.json would help?

Would you mind creating a PR?

[hassankhan]

@vasilev-alex I do not believe this is as simple as creating a file and adding "types": "index.d.ts" to the package, and unfortunately I currently do not have the time to make and test a PR. Just wanted to post this for anyone else looking for an interim solution.

Happy to come back and take a look once I have some free time though 👍