Good evening everyone .
I am developing a react native app by interfacing to a database via endpoint (specifically aws).
Now on loading the dashboard I retrieve this data via API , save it in local storage and show it to the user.
Now from the management system, there could be some changes to this data that I show on the app, so what I was interested in knowing was if it was possible to create a sort of listener that calls my API whenever there are changes in the DB. I ask this because I would like to avoid calling the API every time a user lands on the dashboard and I would like to avoid calling the API every XXX minutes if there is no reason (if the data has not changed).
Is there any way to create an event listener? It would also be enough for me to be directed on what exactly to look for.
Thanks in advance for your availability
Related
I'm looking to build an app similar to Google Docs in that it is collaborative and updates should reflect in realtime when another user makes changes to a document (row).
Right now, I have a useEffect that listens to changes of the document state and debounces the changes so that changes will only persist after 1 second, preventing unnecessary requests.
I'm wondering the best way to send instructions on how to change the json document to the database rather than sending a whole new copy of the data.
Also i'm not sure how google docs works but I've heard it communicates directly from client to client?
Is there an optimal way to create a google docs clone with Supabase?
I'm working on an app similar to Trello in that it needs to pull data from the server as soon as it's added by other users. There is no need to send data back using the same channel, so Server-Sent Events (unidirectional) push technology seems more appropriate to use here than WebSocket.
The App is a cross-platform React Native (expo managed) project that displays a list of items from the server with options to add, update, and delete. For now, it will work only while an internet connection is available.
Locally, data will be stored in a redux store (RTK Toolkit). The way the app will keep the redux store up to date is: Establish an open connection to the server using SSE (Server-Sent Events) and listen for events. Use RTK Query to fetch, update, and delete data. On receiving an SSE event (an event with information that new data is available on the server, updates were done by someone else), the app will clear the local RTK Query cache and fetch the whole data set again from the server.
There are several concerning issues that could affect the performance and usability:
Downloading the entire data set in response to any type of update event (new/updated/deleted item by another user) will retrieve the entire list, which may contain many items with nested ones. It doesn't seem to be an effective approach. Especially if another user performs multiple minor changes (changes name, persists, changes date, persists, adds description, persists...), this will result in at least 3 update events.
After performing an action on your own, the entire data set will be downloaded. I.e., a user adds a new item, there is a call POST to the server, the server pushes events, and the user gets an event that there is newer data on the server. RTK Query's cache will be reset and a new dataset will be fetched and stored in redux.
I don't have that extensive experience with React Native, so I would like to ask more seasoned veterans if this solution can actually work and how it can be improved.
Many thanks.
I am looking at building an offline first React Native Expo app that automatically pushes data to an API when the device gets a connection. However I am struggling to see how if this is possible within Expo and need some guidance.
The app will need to store data from an API for offline use (presumably on first load, which will then be used to populate fields in a form). The form needs to work offline, with the input data stored on the device until it receives a new connection. At that point the app should push the data to an API (whilst the app is in the background). So I need to do multiple things:
Automatically download and store data from an API on first launch.
Store input data - from form fields whilst offline.
Background sync - Upload this user form data when a new connection is received, regardless of whether the app is running in the background or not.
Work on Android and iOS devices.
I have been looking at redux-offline, but unsure if it still supported and/or will satisfy all four requirements?
There is also redux-persist but I can't see how this satisfies the background sync?
Thanks for any help/guidance!
From my point of view, redux-persist is less opinionated compared to redux-offline. I pick redux-persist with useNetInfo hook to listen to network availability.
1. Automatically download and store data from an API on first launch.
When app launch, query initial data and dispatch to redux store and synced automatically to local storage by redux-persist
2. Store input data - from form fields whilst offline.
With useNetInfo, the app can detect network connectivity status, when not connected, dispatch to the redux store with a flag to indicate offline unsynched data.
You need to write a network connectivity listener which is executed when the network state changes and continuously track unsynched data and sync with the database when available and purge those temporary data like form values.
3. Background app sync
Expo SDK provides API https://docs.expo.dev/versions/latest/sdk/background-fetch/
to run continuously a background task at a certain time threshold.
You can sync offline data when the network returns back while the app is background.
Disclaimer: Background tasks run outside of React componentS tree. You can't access redux store data through the react-redux's store component or hooks based API.
redux-persist saves data with Async Storage and you need to directly access data as below.
AsyncStorage.getItem("persist:[REDUCER_CONTAIN_INTERESTED_DATA]")
This seems to be an issue with server state with a client cache. Looks like an ideal case for react-query to solve.
Automatically download and store data from an API on first launch.
This should be taken care of by query prefetching
Store input data - from form fields whilst offline.
Probably needs client state(redux/Zustand etc) for managing state with unverified fields. For storing submitted forms, react-query supports offline caching of 'mutations'.
Background sync - Upload this user form data when a new connection is received, regardless of whether the app is running in the background or not.
Work on Android and iOS devices.
See above.
I am creating a react-native mobile app for a service that has to interact with the service's API to get and update data.
This service also has a web interface through which users can sign in and use the service (aka getting and updating data.
Since I am only developing the mobile applications, I have no access to the code on the web side of things and my only way to make changes to that code is to go through someone else.
From the resources available online, I feel like I should be able to make a mobile app that interacts with and updates data through the API, however my thought process for how I am going to handle a user updating data through the web interface and reflecting that in the app has hit a standstill.
Does anyone know of a term that I can use to describe this in such a way that I will likely find more results online (or even better, a react-native npm package that achieves this functionality)?
So far I have tried searching the following, but have found few results:
redux caching
handling data updated on the server redux
redux how to handle data changing on the server
how to handle database updates redux
Sockets.io seems like it would work for realtime updates.
Essentially, it works by shifting the connection from a request-based HTTP deal (where the client asks the server for stuff) to a websocket in which the client and server can send each other things (like database changes :D) over a constantly open stream, even if after a delay.
I am designing a web app that fetches data every time a user logs into his/her account. The data is an xml file containing image links and some text. I want this data (after image fetch/load from the actual link) to be stored locally so that every time an user opens the app it doesn't have to load everything from scratch. Locally stored contents should load first, then in the background some network processing shall be done so that the newer data is automatically updated. For storing the data I am planning to use SQLite but is there any other efficient way other than this to do the same ?
How does facebook app do this kind of stuff ? Thank you so much
The Facebook app is not really a web app but rather a native Cocoa Touch app.
If you are really creating a web app, your only option is to use localstorage and fetching new data asynchronously using XMLHTTPRequest.
If – on the other hand – your app is a native app, you’ll most likely want to use Core Data for storage and get incremental updates in a separate thread (or using libdispatch in case you’re only targetting post 4.0 devices) using a separate managed object context which you can then merge to the main thread using mergeChangesFromContextDidSaveNotification:.