national-gold

How to return extra pagination info from queryFn in TanStack Table?

My API returns something like this:

{
  data: object[]
  pagination_info: { total_count: number }
}

{
  data: object[]
  pagination_info: { total_count: number }
}

But queryFn in queryCollectionOptions only allows returning an array of objects. so my hack is for now adding the count to every object:

queryFn: async (ctx) => {
  const parsed = parseLoadSubsetOptions(ctx.meta?.loadSubsetOptions)
  const { data } = await client.v1.getApiContacts({
    ...baseParams,
    offset: 0,
    limit: parsed.limit,
    sort_field: parsed.sorts[0]?.field[0] as string,
    sort_direction: parsed.sorts[0]?.direction,
  }, { signal: ctx.signal })

  return (
    data.response?.data?.map((contact) => ({
      ...contact,
      total_count: data.response?.pagination?.total_count,
    })) ?? []
  )
}

queryFn: async (ctx) => {
  const parsed = parseLoadSubsetOptions(ctx.meta?.loadSubsetOptions)
  const { data } = await client.v1.getApiContacts({
    ...baseParams,
    offset: 0,
    limit: parsed.limit,
    sort_field: parsed.sorts[0]?.field[0] as string,
    sort_direction: parsed.sorts[0]?.direction,
  }, { signal: ctx.signal })

  return (
    data.response?.data?.map((contact) => ({
      ...contact,
      total_count: data.response?.pagination?.total_count,
    })) ?? []
  )
}

This works, but it feels hacky since I’m duplicating total_count into every item. Is there a cleaner way to pass back both the data array and the pagination info to TanStack’s queryFn? @Kyle Mathews maybe you have an idea here since i see you are involved with the pagination stuff ? thanks in advance for the help 🙂

3 Replies

passive-yellow•2w ago

ooo yes — all the data is there actually already — we just need to expose it — https://github.com/TanStack/db/pull/809

GitHub

Expose the full response from queryFn on utils.queryData by KyleAMa...

passive-yellow•2w ago

with this PR, you return the entire api response & then use select to grab just the data but can then still access the full response

national-goldOP•2w ago

Thanks looks great!

Gaming

Programming

How to return extra pagination info from queryFn in TanStack Table?

Did you find this page helpful?