Authentication in paginated query
How do I implement user authentication checks in paginated queries
error:
server:
front-end:
38 Replies
Is it valid to add props like this to resolve this error?
Are there any potential issues with this approach?
when you do this, is typescript happy on your front ?
yep
no errors
then i don't see any reasons not todo it. great!
what should i set isDone false/true
it should be isDone: true to give an impression that pagination was done and there are no more pages to load.
i see it can be confusing
if you want to take a better approach you should type the error result and pagination result seperately and then return a union type.
i explored
usePaginatedHook
code and there i see if i return undefined then typescript and hook internal both looks happyother then some ambuigty on api structure (if you plan to document later on for other users )(if you think of best practices) this would work totally fine.
you mean usePaginatedQuery? or the validator ?
usePaginatedQuery
usePaginatedQuery
uses for loop to iterate the result of useQuries()
and if any query return undefined
it breaks loop, keep old fetched restuls and nothing more....
from source code:
yeah? are you expecting it to do something different?
not at all.
i looked at source code after posting this thread
🎉
i want some extra data from server using paginated query
e.g.
i copied source code of usePaginatedQuery and modify it as i want
results as in paginated query results?
only a little problem of type i have in my
useCustomPaginatedQuery
usage:
where data
is extra data passed from serverwhat kind of data is it ? if you want to return from the same paginated function i suppose it can be included in page ?
in page...?
yes, in same function
can you tell me more ? what does "data" hold ?
when user apply filters server must return this data along paginated results
i know i need to get these values by myself
const obj = {
total: 200,
found: 120,
}
return { ...results, obj}
does this not work ?
usePaginatedQuery does not give any data else results
what the hell ts is doing with me...
first when i returned undefined ts were ok but now give same error
i must return paginated data or need to throw
how should i catch error on throw
you always throw error @M Zeeshan
and you catch the error in the frontend
how... by using error boundary ?
eaxctly
i just checked and yeah usePaginatedQuery seems to avoid any extra obj from the return.
what i would do is to keep these concerns seperate.
for user authentication just return empty pagination result like you were doing before. no need to pass extra arguments.
use seperate convex function to check authentication on page. and handle error on frontend.
for the totals. maybe just cache them from db?
idk how you are getting totals anyway but if you are using .collect() then again its bad practice.
yeah with bad practice....
.collect().length
you are touching all docs together. it'll use alot of your bandwidth
what should i do?
don't do it. imagine if you have 10,000 docs, it'll be slow and will use ton of bandwidth.
i'm aggregating data using btree approach.
but what is your case here for totals ?
you can do something like.
when you add or remove a doc from the db, patch the totals in a seperate table.
and then just use a query to get those on page.
yeah its great approach
convex is working on some components they'll release soon to help with this but no timeline yet. similar btree approach helpers probably.
i worked out this same solution i told you. its working pretty well.
i will use it with my custom
usePaginatedQuery
Gist
convex custom usePaginatedQuery
convex custom usePaginatedQuery. GitHub Gist: instantly share code, notes, and snippets.
it returns extra data passed from server in data variable and it gets overridden returned from last page
i see this code is splitting pages and aggregating results too.
i don't know your use case. but i'll still suggest to let things be handled by convex functions and queries. it'd be more optimised.
did you check this ?
https://www.npmjs.com/package/convex-helpers#manual-pagination
does ton more things for you.
also this article is great overview:
https://stack.convex.dev/pagination
good luck 🙂
Take Control of Pagination
Convex offers robust control over pagination with a powerful function, getPage, enabling complex edge cases. In this article, we go over how to use th...
npm
convex-helpers
A collection of useful code to complement the official convex package.. Latest version: 0.1.58, last published: 3 days ago. Start using convex-helpers in your project by running
npm i convex-helpers
. There are 2 other projects in the npm registry using convex-helpers.@Hmza
i know there is getPage helper and i'v read "take control of pagination'.
what i did in my gist is copy/paste original hook and only added
data
variable.
all optimizations by convex team are there!got it. i hope that aggregating data suggestion was helpful.
have a great day
❤️