T
TanStack•2mo ago
genetic-orange

UseSuspenseQueryOptions data type infer question

hi guy I got some question for the hono rpc, and UseSuspenseQueryOptions from tanstack query
1 Reply
genetic-orange
genetic-orangeOP•2mo ago
I return the data in the backend return c.json({ glues: gluesWithDepartment }, 200) 
(property) glues: {
    id: string;
    partNo: string;
    supplier: string;
    machineNo: string;
    volume: number;
    productionCapacity: number;
    department: string;
    createdBy: string;
    createdAt: Date;
    updatedAt: Date;
}[]
(property) glues: {
    id: string;
    partNo: string;
    supplier: string;
    machineNo: string;
    volume: number;
    productionCapacity: number;
    department: string;
    createdBy: string;
    createdAt: Date;
    updatedAt: Date;
}[]
when i get in frontend with, the createdAt and updatedAt is in string, so I use the map to make it as the Date Type 
const res = await api.glues[':department'].$get({
    param: { department },
  })

  const data = await res.json()

  return data.glues.map((g) => ({
    ...g,
    createdAt: new Date(g.createdAt),
    updatedAt: new Date(g.updatedAt),
  }))
const res = await api.glues[':department'].$get({
    param: { department },
  })

  const data = await res.json()

  return data.glues.map((g) => ({
    ...g,
    createdAt: new Date(g.createdAt),
    updatedAt: new Date(g.updatedAt),
  }))
data type in frontend 
const data: {
    glues: {
        id: string;
        partNo: string;
        supplier: string;
        machineNo: string;
        volume: number;
        productionCapacity: number;
        department: string;
        createdBy: string;
        createdAt: string;
        updatedAt: string;
    }[];
}
const data: {
    glues: {
        id: string;
        partNo: string;
        supplier: string;
        machineNo: string;
        volume: number;
        productionCapacity: number;
        department: string;
        createdBy: string;
        createdAt: string;
        updatedAt: string;
    }[];
}
when i try to use the UseSuspenseQueryOptions, the data type does not infer so i need to pass the promise 
export const getGlueWithDepartmentQueryOptions = (
  department: string,
): UseSuspenseQueryOptions => ({
  queryKey: gluesQueryKey.findByDepartment(department),
  queryFn: () => getGlueWithDepartment(department),
  retry: 1,
  staleTime: 1000 * 60 * 1,
})

const getGlueWithDepartmentQueryOptions: (department: string) => UseSuspenseQueryOptions<unknown, Error, unknown, readonly unknown[]>
export const getGlueWithDepartmentQueryOptions = (
  department: string,
): UseSuspenseQueryOptions => ({
  queryKey: gluesQueryKey.findByDepartment(department),
  queryFn: () => getGlueWithDepartment(department),
  retry: 1,
  staleTime: 1000 * 60 * 1,
})

const getGlueWithDepartmentQueryOptions: (department: string) => UseSuspenseQueryOptions<unknown, Error, unknown, readonly unknown[]>
For the data type it is unknown unless i pass it, is there any way I no need to pass it? 
export const getGlueWithDepartmentQueryOptions = (
  department: string,
): UseSuspenseQueryOptions<Array<GlueInformation>> => ({
  queryKey: gluesQueryKey.findByDepartment(department),
  queryFn: () => getGlueWithDepartment(department),
  retry: 1,
  staleTime: 1000 * 60 * 1,
})
export const getGlueWithDepartmentQueryOptions = (
  department: string,
): UseSuspenseQueryOptions<Array<GlueInformation>> => ({
  queryKey: gluesQueryKey.findByDepartment(department),
  queryFn: () => getGlueWithDepartment(department),
  retry: 1,
  staleTime: 1000 * 60 * 1,
})
Oh I should use the queryOption instead

Did you find this page helpful?