I have a "classic" cursor based pagination of items.
I have to do two things with this items:
fetch all items of this list when components did mount
refetch all the list when a button is pressed
Using react-apollo for the first point my solution is:
use a Query component to load the first data set
when the last fetched data set is loaded I get the endCursor from it
use the endCursor and the fetchMore (from the Query render props) to load the next data set (passing variables and updateQuery to the fetchMore function)
if there are more results loop to #2
For the second solution:
I'm using refetch (from the Query render props) to reload the piece of the store with new data
Use the same loop of the first solution (with the loadMore function) to fetch other results
All of these implementations are not so easy to write / maintain / reuse, so my question are:
am I missing something? there is a better solution to this scenario?
Related
I am a beginner in Gatsby.js, I am developing a page with a dropdown of 12 months. Once user select the month, I will pass the value into a component, which will display different set of result based on month selected.
There is a graphql query to retrieve data by using useStaticQuery in my component.
I understand the useStaticQuery cannot accept any variable, so is it possible to filter the returned data and create another data set based on the month inputted? Or should I just create 12 components and display the correspondning one based on month selected?
(Actually I tried to loop the data and return a single aggregate value successfully, but I not sure if it is possible to return a subset of data result
data.allData.edges.forEach(edge => {
if(edge.node.month==inputMonth)
total=total+edge.node.amount
})
outValue= total
)
I think you are trying to use a find() loop. In your case:
let matchedMonth = data.allData.edges.find(edge => edge.node.month === inputMonth)
Basically, you are looping through allData (all months) to find which one is exactly equal to inputMonth. Since you are saving it in matchedMonth you can play whatever you want (passing to a component, etc).
i'm implementing a web page that shows certain rows fetched from a database.
At loading, i make an AJAX request to fetch the rows in a certain range of time(the initial call will take today's rows), and save them in a global variable(e.g "rows").
I have two text field to set the starting and the ending point of my research, and every time i change the value of those text-fields, i make another call to the db to get the new data and update global "rows" variable.
My question is: if i have different text-field filters and sort options that apply filters and sort to the fetched rows, should i make another request to the db(with the selected filters/sort) and let the db handles the filter/sort, or should i apply the filters/sort directly the global "rows" variable?
Of course i think the db filtering and sorting would be more efficient, but the number of rows shouldn't be more than 100, max 200 rows, and i was wondering if it would be worth it to make another AJAX request just for filter the result.
Thank you very much in advance.
have you try with datatables server side??
https://datatables.net/examples/data_sources/server_side.html
I think is a good options for you and very easy to implement
How do I get the search/filter to work per column?
I am making small steps in building, and constantly adding to my data table, which is pretty dynamic at this stage. It basically builds a datatable based on the dat that is fed into it. I have now added the footer to act as a search/filter, but unfortunately this is where I have become stuck. I cannot get the filer part to work. Advice greatly appreciated.
here is my sample data tables that I am working on http://live.datatables.net/qociwesi/2/edit
It basically has dTableControl object that builds by table.
To build my table I need to call loadDataFromSocket which does the following:
//then I have this function for loading my data and creating my tables
//file is an array of objects
//formatFunc is a function that formats the data in the data table, and is stored in options for passing to the dTableControl for formatting the datatable - not using this in this example
//ch gets the keys from file[0] which will be the channel headers
//then I add the headers
//then I add the footers
//then I create the table
//then i build the rows using the correct values from file
//then I draw and this then draws all the row that were built
//now the tricky part of applying the search to each columns
So i have got this far but the search per column is not working. How do I get the search/filter to wrok per column?
Note this is a very basic working example that I have been working off: http://jsfiddle.net/HattrickNZ/t12w3a65/
You should use t1.oTable to access DataTables API, see updated example for demonstration.
Please compare your code with jsFiddle in your question, notice its simplicity and consider rewriting your code.
I have 100,000 records right now (will grow in future). I have JSON api call (remote URL, however, within same server) to get those records. If I use KendoUI with paging turned on (say 50 per page), will KendoUI datasource going to fetch all those records and bring them into client and apply paging? Or is it something I need to pass to the server (page size) to be able to only get only needed data for display? If I need to pass, do I have to write custom data source query methods?
Same question goes for using filter input boxes in toolbar within KendoUI.
There are two (efficient) ways of loading that amount of data:
Setting serverPaging to true in the DataSourcedefinition.
Using serverPaging plyst (as #bobosov534 and #gitsitgo suggests) virtual scrolling.
In the both you receive in the server tow parameters: top indicating the number of records to retrieve (what you have defined as pageSize) and skip for the number of records to ignore (no skip means the first top records).
The difference is that int the first you see a pagination bar in the bottom of the grid and in the second you see additional records as you scroll down.
In DataSource.serverPaging you find detailed information on the fields sent to the server for managing pagination.
Is there a way to get the IQueryable object that the LinqDataSource has used to retrieve data? I thought that it might be possible from the selected event, but it doesn't appear to be.
Each row in my table has a category field, and I want to determine how many rows there are per category in the results.
I should also note that I'm using a DataPager, so not all of the rows are being returned. That's why I want to get the IQueryable, so that I can do something like
int count = query.Where(i => i.Category == "Category1").Count();
Use the QueryCreated event. QueryCreatedEventArgs has a Query property that contains the IQueryable.
The event is raised after the original LINQ query is created, and contains the query expression before to it is sent to the database, without the ordering and paging parameters.
There's no "Selected" event in IQueryable. Furthermore, if you're filtering your data on the server, there'd be no way you can access it, even if the API exposed it, but to answer a part of the question, let's say you have category -> product where each category has many products and you want the count of the products in each category. It'd be a simple LINQ query:
var query = GetListOfCategories();
var categoryCount = query.Select(c => c.Products).Count();
Again, depending on the type of object GetListOfCategories return, you might end up having correct value for all the entries, or just the ones that are loaded and are in memory, but that's the different between Linq-to-Objects (in memory) and Linq-to-other data sources (lazy loaded).