Pagination from an external client
I have a front end that fetches products and renders them in an external typescript web app.
I don’t want to fetch all products at once, o rathe me grab the first 25, and as the user scrolls pull the next 25 etc.
I couldn’t extract the next page or after from a findmany.
Suggestions?
23 Replies
Hello,
Could you please explain your use case and what you mean when you say that you couldn't get the next page (when did you try, what you saw, etc)?
Note that not paginating will mean that you may get a lot of request time and that loading all the data might take a long time or use a lot of browser memory
So let me rephrase
I have an external product selector that renders products as the user scrolls down.
What is the proper way of fetching the product data in the quickest and most efficient manner?
We have a GET-route.ts
Why don't you have the npm package on that external frontend? You could then build an infinite scroll.
The scroll would be something like:
You'd need a useState to keep the full list of records
I don't know how to work with rerender flashes so you'll have to look into that
You can allow the user to search for a product with the a startsWith filter (keep a lowercase version of the thing you want them to search on). Filters and searches can't be done together (at the moment)
The concern is then I need to recreate the client every time there is a database change in gadget
What do you mean?
don't i have to reinstall the npm package in the front end everytime i make a gadget databsae change?
Yes
I’m just concerned as I’m constantly improving the db structure, and improving actions etc, and won’t remember to update the client
The updates only need to be made if what you're fetching is affected
Question. Is it possible to set the authentication mode as a specific cusotmer? Like have a role for my external frontend (based on customer id that I have)
No
You can only set an authentication mode to a mode that we provide
how can i limit the user then from seeing others' data?
You add filters to the models you want users to have access to. Make sure that those models have a shop relationship
how would the api know which shop is the current one? I'm not reffering to a customer extensions, this is for an external front end
should i rather just have a global filter in all api calls that applies the SHOP_ID and CUSTOMER_ID?
(The url of the web has a shop id and cutomer id in the path in order to wokr)
Sorry, I meant customer relationship
I want to utilize the filters, but how do I set the session (customer id or shop id etc)
Thats already done for you when you use the Gadget provider and session token
So the gadget provider knows the shop and customer (external_base_url/shop_id/customer_id) ?
Because of the shopify session token, we know whatever they make available to us
but I don't have any shopify session token. We are talking about an external front end
Oh sorry, I thought this was a continuation of the conversation about the customer account ui extension
In that case, there’s no auth built in to Gadget for this
so only way would be to allow unathenticated etc
Yes