T
TanStack•2mo ago
stormy-gold

How can I get the returned type from select

hey folks, I have this parent component which call a useQuery 
const bucketsOption = ({ accountId }: { accountId: string }) => {
  return queryOptions({
    queryKey: trafficRepartitionKeys.buckets(),
    queryFn: () => apiClient.featureExp.buckets.list({ accountId }),
    placeholderData: keepPreviousData,
    retry: false,
    select: (data) => ({
      ...data,
      items: data.items.map((item) => ({
        ...item,
        count_campaigns_per_status: {
          ...item.count_campaigns_per_status,
          total: Object.values(item.count_campaigns_per_status ?? {}).reduce((acc, curr) => acc + curr, 0),
        },
      })),
    }),
  });
};

export const useBuckets = () => {
  const accountId = useCurrentFlagshipAccountId();

  return useQuery(bucketsOption({ accountId }));
};


export const BucketList = () => {
  const buckets = useBuckets();

  return (
    <div>
      {buckets.data?.items.map((item) => (
        <BucketTable key={item.id} bucket={item} />
      ))}
    </div>
  );
};
const bucketsOption = ({ accountId }: { accountId: string }) => {
  return queryOptions({
    queryKey: trafficRepartitionKeys.buckets(),
    queryFn: () => apiClient.featureExp.buckets.list({ accountId }),
    placeholderData: keepPreviousData,
    retry: false,
    select: (data) => ({
      ...data,
      items: data.items.map((item) => ({
        ...item,
        count_campaigns_per_status: {
          ...item.count_campaigns_per_status,
          total: Object.values(item.count_campaigns_per_status ?? {}).reduce((acc, curr) => acc + curr, 0),
        },
      })),
    }),
  });
};

export const useBuckets = () => {
  const accountId = useCurrentFlagshipAccountId();

  return useQuery(bucketsOption({ accountId }));
};


export const BucketList = () => {
  const buckets = useBuckets();

  return (
    <div>
      {buckets.data?.items.map((item) => (
        <BucketTable key={item.id} bucket={item} />
      ))}
    </div>
  );
};
I wanted to type the props in the BucketTable component, how can I do that (notice that there is a select which add a property in the useQuery data export const BucketTable = ({ bucket }: { bucket: ??? }) => {
2 Replies
flat-fuchsia
flat-fuchsia•2mo ago
Maybe you can make something like this : type TransformedBucket = NonNullable<ReturnType<typeof useBuckets>['data']>['items'][0]; And then export const BucketTable = ({ bucket }: { bucket: TransformedBucket })
stormy-gold
stormy-goldOP•2mo ago
yes I could but I wanted to know if there were a cleaner solution since the query option api because we can maybe get the type of the cached data by providing the query key

Did you find this page helpful?