Starting to learn React and building a simple client for an API. On the startpage of the app, im listing paged data fetched from the api. And every "item" that is fetched is including a customerNumber. If i want to get the actual name of the customer, i have to make another request to the API with the customerNumber. And i need to show the customers name on every item on the page.
Is it ok to fetch the name separately for every single customer? The item-page could show 10-50 items per page and that should create an separate API-call for every one.
Or is there a better way to do this, when the API dont serve everything on the same endpoint?
Thanks!
Related
Am a beginner developer trying to better understand how NextJS works, and am having some trouble with my project and data fetching.
To keep things simple: I am building a Pokemon 'team builder', where users can select Pokemon, add their moves and abilities etc, and add them to a team.
There are over 800+ Pokemon, and a open-source api project called PokeAPI, has all the data possibly needed for all and each Pokemon.
I have dropdowns (using a component library), with search features that I am using for users to select Pokemon and add its info.
Depending on which Pokemon is selected at a time, I would like to fetch its unique data from either the PokeAPI, my database, or somehow a local JSON file, but I am not sure at all which is best and most efficient/optimal. I do not want to constantly have users query the PokeAPI, and also doesnt feel necessary since the Pokemon data is pretty consistent throughout the years.
How would I be able to fetch individual JSON files in my project instead? Would I save a 'pokemon' folder in my /public directory and have a JSON file for each pokemon 1.json etc? And if so how is this possible with NextJS? Would I just do something like import? Or how would each single JSON file be imported upon client request? Would the server be getting the files and serving it on request, or is it all bundled because its on my public directory on build time?
I am creating an eCommerce-type website with react and Laravel with the REST APIs. Every time user enters page www.mywebsite.com/products a rest API is called to get all the products, and it takes like a second to load all of them. If the user leaves the page and enters it again, the same request is called, and the same products are loaded.
My question is: What's the best approach for this situation? Maybe I should somehow fetch the products only once, store them inside localStorage and get them using Context? On the other hand, most of the websites I visit seem to load products instantly, so maybe even the REST API is the wrong approach for this kind of website?
I would suggest to check your DB queries and investigate why this request takes so long. Have a look at the laravel Telescope package: https://laravel.com/docs/9.x/telescope
In the request tab you can follow your requests and see which queries are the most expensive ones. My guess is that you're lazy loading some relations on each product.
Next I would propably cache the articles (expect maybe the stock information). Use the built-in feature of laravel or maybe a third party package like this one
Only then I would go for client-side optimizations. Here you should consider maybe a state management extension like akita.
I want to know what is the best approach for my problem. If I have 1 array of products that I have already fetched from my API, and now I want to get one single product. Should I filter the fetched data or should I make another API request by product Id?
Depends on your need.
If the details of the product are on another page, I would say that you should have another API request in case of the user arrives directly on the details page with the URL, or simply if he refreshes the details page.
If not, a simple filter can be enough.
Filter the fetched data. Reading data in memory will always be faster than making another api request.
I'm working on an travel app in flutter. There are 2 pages in the app.
One that shows the list of packages as below:
And the other page shows the complete details of that package when clicked.
While showing the list of packages on the first page I don't need the complete 'Package' object. I just need a few pieces of data from that object like title, subtitle, price, number of days and nights, and image. The 'Package' object has much more fields of data than required to show the list, but this data will be required to show the package details when user clicks on a package from the list.
So my question is, should I fetch the complete list of 'Package' objects in one back-end API call or should I fetch a list of only necessary data in the first API call and when user clicks on a package I should get only that single 'Package' object?
In the first case, a huge chunk of data will be fetched from the server in just one API call. In the second case, there will be 2 Back-end API calls, Minimal data which is sufficient for rendering the list will be fetched in the first API call and in the second API call a single package object will be fetched when user clicks on a specific package of the list.
Which will be the best approach?
As per my opinion, You should take all data in list API with Main image and Thumbnail image so, On the list display Thumbnail image and the details display main image. As per talking about performance wise, Application that has less API call It will be best for user usage. And also your App is not e-commercial app so your details page has not much data required.
I am thinking to build my own like system, as a way of learning various technologies including Javascript; and to gain a better understanding of authentication and XSS.
Use-case:
Unique ID generated atop a little bit of Javascript code, for embedding in any website
When unique user presses this like button, a +1 is triggered to the 'score' of that UID
On unique user's profile, display what they like'd
I'm unsure as where to start... how would I go about building this system?
Building such system is easy. Securing it properly, making it flow nice and be easy to integrate is the hardest part. You should ignore the latter 3 for now. I would start with a JS file that searches the DOM for any elements with the ID of "mylike" (for example) which inserts a button on to said page. Once a user clicks the button it simply does an AJAX post back to your server containing information like the page title and page URL. I think it may be best for your backend to generate the ID, maybe an algorithm based on the title + URL.
To include user data to know what user liked what I'd suggest a persistent cookie that has a session variable to link to a user in your back end. Simply pull the cookie out using JavaScript and send the cookie along with the AJAX request.