I'm having a problem with saving the data received from the firebase.
When I was fetching the data from backend with native http calls (I was using redux/redux saga for it) the data was stored correctly in the storage, so if user entered some other component and returned back to the listed data, there was no need to fetch the data once again from the server. It was saved inside redux store.
But since Im using firebase, if user navigates over my application and returns to the component which lists some data from the server, the same data is fetched every time. This is a huge issue.
Q: Is there some way to store the data received from firebase call in redux store?
Of course, I don't want to loose the real-time database. This is a pure awesomeness, that user doesn't have to reload the page to update the content.
Looking forward for any hint or suggestions. Maybe I don't even need redux for it? Maybe firebase provides some mechanism to deal with it? Thank u!
Found an outstanding library recently, which solves cases included in my question. If anyone would ask for same thing in the future, here's the library:
https://github.com/prescottprue/react-redux-firebase
Related
I am looking to create an App (a game) which will get its data from an API but once it has that data will work offline if necessary. I therefore want to:
Keep a copy of the data in localStorage
Be able to operate offline with the stored data it has if no network connectivity by caching the results of API calls
Unfortunately its been some time since I last did something similar and I can code it manually, but is there a more modern way of doing this? I wish to have permanent access to about 1000 objects which get their data from an API call https://myapi/{name}. If I have a local copy of the object, I only need to try and update it if more than 24 hours has elapsed, but even if that fails due to no connectivity I can use the existing data if I have it.
So my thoughts are that I can subscribe to a Redux store to save to local storage, but how do I manage the API calls and updating of the objects? I am thinking of using something like react-query or RTK Query but don't know how to go about this. I can already query the API using RTK Query but am uncertain how to use it to get my specialised requirements addressed.
Im coding a static page app using Angular, which shows various Instagram and Twitter posts of the company, and shows the details of the members. I have few questions regarding this, and would like any help.
Firstly, I have about 100+ contacts to display on the first page. Should I create a Json by myself and retrieve it from the service, or should I create a backend and save it there ? I do not have any backend as of now.
Other thing, I was able to retrieve Instagram Json with media content using their API, the doubt im facing is, once I have the call done, will the Json change automatically when the user adds/edits their posts? Or will the Json be the same as I first called it with? Any help is appreciated. Thanks.
For your case, as you have fewer data using Firebase is the best approach. If you write a backend and maintaining it would cost you more. You can use Firebase service URL to retire those records. In future, if you want to add more data it would be easy.My suggestion is Firebase.
Should I create a Json by myself and retrieve it from the service, or should I create a backend and save it there ?
Are you revealing credentials or other sensitive information in the client? That would be one reason to have a backend apart from Instagram or Twitter. Do you envision exhausting API rate limits of Instagram or Twitter APIs? That would be another reason; you could cache results in your backend to reduce external API traffic. Do you need to process (reduce? translate?) the data before it gets to the client, or are you satisfied with performing any processing on the client (e.g. is it fast enough)?
TL;DR: It depends a lot on your particular requirements.
If you do want a backend, the recommendation in the answer from #praneeth-reddy to use Firebase is excellent. If you only need processing/transformation but no caching or separate storage, then AWS Lambda may also be worth considering. If you need more control (build vs. buy), you could write your own backend.
...will the Json change automatically when the user adds/edits their posts? Or will the Json be the same as I first called it with?
Angular can help you update content automatically if the client side data (think browser JavaScript memory) changes via its automatic change detection functionality, but you would have to provide your own logic (e.g. in Angular services perhaps leveraging RxJS) to update the client side data based on data from the APIs. You could poll to update periodically, or for better performance listen for changes using an asynchronous event/push mechanism such as websockets or streams.
I am new to redux and I've just got my head around the architecture.
If we are keeping all our data inside a giant store, and that store is updated through actions which are all front end, what is the role of a back-end and database in a single page redux application?
Do you pull data into your store from a DB for example?
Typically, redux store is just for storing temporary state in memory within browser. Back-end database is used to populate that Redux state. DB also can persist whole state of your application, where Redux store can't store full state of your application, because of memory constraints of the machine the browser is running on. DB is also needed to populate same state across different browsers/users of your application.
Said that there might be esoteric usages of Redux, e.g. on back-end or in browser with usage of WebRTC, where back-end database might not be needed.
Intro:
I've got a complex and long lasting query on the back-end, feeding back the angular app on the front-end.
Currently the angular app uses the cached data on the back-end rather than reading directly from the complex query, which would take few minutes. The cache gets warm every morning and every night.
As users make changes to the UI, and save the data, which is then passed onto the server side, and saved to database. At that time the UI is up to date until the user refreshes the page. At the same time database is up to date, but the cache is stale.
So when the user refreshes the page the stale cache values are displayed on the page.
More info:
I'm now thinking of ways to refresh the cache, and any advice from more experienced folks would be most welcome.
My idea is to refresh the cache by a cache job (one at a time), which is queued as soon as user saves something. The job will have the relevant info what changed, and the whole cache won't have to be recalculated but rather just the bit which changed.
Question part:
What technique can I use to keep the user up to date with the data even if the user refreshes the page? Should I save the 'deltas', on the client side in a form of indexedDB or localstorage, at the same when the data is sent to server. So when the page refreshes the user reads the data from the localstorage or indexed db.
I'm still thinking this through, obviously I don't have much experience in this, any comments on the directions I've taken so far?
Basically I can change anything including back-end/front-end/caching it's still in the POC phase, I'm just trying to be as informed as possible to what worked for other people.
Update
Little more background. I'm working on a index like page, so there are more than one records that can be edited inline.
Also I'm doing some transformation of the flat db records on the back-end, before dumping them into the map like structure, and passing it to the front-end in a form of json.
I would think the simplest way would be to make sure you know the time the cache was created. When you make changes, save the current state of the page in localStorage, along with the time of the cache. When you load the page, you get the cached data, check it's time to see if it is more recent than your localStorage version. If it is, use the cache, if not, reload your data from localStorage since it has the cached data PLUS your changes already.
Your question is too long, let me summarize the facts.
You have a lot of information in the database
Direct search query takes several minutes
To provide fast search, you use cache which is updated two times a day
When user changes the data, database is updated and cache is not, so web page shows outdated information from cache.
This looks like a typical cache using scenario and the solution is obvious: you should update the cache with deltas as soon as database is changed. The real implementation will depend on your application architecture and cache structure.
The typical workflow for your problem would be:
def updateRequest(Request req) {
def tx = db.startTransaction();
tx.execute(createUpdate(req.getData()));
tx.commit(); // if transaction fails, cache is not updated
cache.update(req.getData()); // can be done in background, if you return delta
}
It seems that you are storing your data in tables and you use those tables with a complex query to build a JSON configuration to render your index.html file. I avoided this problem by avoiding tables and using a NoSQL solution. I build the JSON configuration object on the client side and store that JSON configuration object in a NoSQL collection. I do a simple query using the URL to grab the JSON configuration object and render the index.html file.
I have a little experience storing the JSON configuration object with AWS DynamoDB, and if I need to get faster I will probably switch to AWS ElastiCache.
The key is that you need to cache your JSON configuration object with a useful key like the site hostname or some other base URL and use that as your source of truth for index.html rendering.
I want to do an app with ionic framework and cordova for Android and iOs and I want to optimize at most the requests to the server.
I need to get data from php server (API) and store in the mobile phone, this data is related, so I think that a SQLite is the best option to store it in the device because of to show it is more fast to do a complex SQL than get a JSON stored in localstorage (for example) and search and link the data in the mobile. I'm right?
I need to do this and can do a Pull to refresh in the app and get only new data.
I've been watching some solutions but I don't know what is the best.
Parse/Firebase: This is difficult to administrate for non-specialists, for this I have a backend to enter and modify data with the relations easily. In addition this services return a JSON with more data that I need.
Persistence.js and Persistence.sync.js this works with mysql-server and sqlite-local but can I sync only one table or get only the new data? And I did't find a solution for php server.
CouchDB and PouchDB: I don't know if this can be sync only for a new records.
Receive data in JSON and store it in SQLite: I need to create functions to do this easier.
Any other solutions?
I'm very lost in this topic.
Thanks!!
CouchDB and PouchDB: I don't know if this can be sync only for a new records.
That’s the default. Plus they handle all the nasty sync details for you. Would highly recommend looking into this.