I spent 4 days in an attempt to get Apollo working with my Next.js app — and encountered a huge dilemma, as it seems.
Here's a very clear and understandable example for React SPA. This is how we update cache using mutation hook.
The mutation hook works with "todos" fields. Here's the excerpt:
fields: {
todos(existingTodos = []) {
This implies that a query has been made before. The data was fetched via GraphQL query on the client-side. And the todos data has been cached as "todos" collection (or field rather).
So, with React SPA it is trivial to update the cache. And the work is easy and straightforward.
Dilemma
In my Next.js app I fetch data on server-side in getServerSideProps() method. The fetched data is passed further to the Page Component as props.
When I perform a mutation on client-side — it's a different, an in-browser Apollo Client instance that doesn't have the cached data. Because that data was fetched using server-side instance.
If it's not possible to access the Apollo server-side cache from the client-side (browser) — can someone recommend a workaround of how to go about Apollo with Next.js?
Related
I am wondering if IndexedDB is the only cache Firestore uses.
To be clear, I am not talking about persisting data with enableIndexedDbPersistence(). I am talking about an internal store for the sole purpose of optimistic updates when the app is still in state. Is there something similar to redux, svelte store, or InMemoryCache which is run in the background when a subscription is open?
It seems that when I use onSnapShot() for a list of items, and I update an item in the list with setDoc elsewhere, the UI gets updated immediately, optimistically.
Perhaps Firestore is just that quick where the data is sent to the server, changed, and sent back to the client with the UI being updated that quickly, but it seems to me it is an optimistic update.
Does Firestore use any other caching techniques or state management techniques when the app is still running besides IndexedDB?
J
References (maybe releated):
Does Firebase cache the data?
As long as you have an active onSnapShot listener, the Firestore SDK will have a copy of the latest query snapshot for that listener in memory. If you attach another listener to the same (or partially overlapping) data, that listener may get (part of) its data from the existing listener.
So when you perform an update in the same client as where you have a listener, the SDK immediately applies that update to its local copy of the data and fires an event (so that is almost instantly). It then sends the update to the server, which executes it on the backend storage layer. If that update gets rejected (a relatively rare occurrence), the client will revert the change it make locally and fire another event with the corrected state.
An easy way to see this in practice is to perform a write operation that is rejected by your security rules. You'll briefly see the invalid state on the client, before it reverts to the correct state. This invalid state only happens on the client that performs the invalid write, so it's typically fine to ignore it there.
I have an app that displays a list of items. Here is what I am doing.
When the app first loads I am making an HTTP request to get the list from the firebase database.
once the list is received the list is stored locally on localStorage for future use.
On future app loads, the list is loaded from localStorage to prevent unnecessary http calls
I am doing the above programmatically, i.e, saving data to localStorage and check for new data and getting it etc.
Does firebase provide any other way to the same?
There is no built-in support for cross page-reload persistence in the JavaScript SDK for the Firebase Realtime Database. Somebody is working on such functionality in the open-source repository, but no release was made with it yet.
If you need this functionality, I highly recommend looking into using Cloud Firestore. In addition to many other benefits, it supports cross page-reload persistence.
I'm trying to build a relatively simple application that has several different views, requires authentication, collects some user data, stores it in a database, and needs backend logic to manipulate that data and spit it back out to the user in a view.
The stack I've decided on is Vue for the frontend, with Express and Node for server side logic and Firebase for some of their services (namely auth, firestore, storage).
I haven't been able to find any examples of this stack (Vue, Express, Firebase) anywhere (I have however found Vue/Express or Vue/Firebase examples). My question is whether or not Express is obsolete here in that I can use Vue router to do my routing. Is the difference that one does the rendering server-side?
You could use Cloud Functions for Firebase as your backend and then limit your stack to Vue.js and Firebase.
From the doc:
Cloud Functions for Firebase lets you automatically run backend code
in response to events triggered by Firebase features and HTTPS
requests. Your code is stored in Google's cloud and runs in a managed
environment. There's no need to manage and scale your own servers.
For your specific need: "backend logic to manipulate that data and spit it back out to the user in a view." you have several possible approaches:
You manipulate the data with Cloud Functions (in the back end), write the results of this manipulation to the Real Time Database and setup some listeners in your Vue.js frontend (with the on() method) that will refresh your front end upon changes in the database
Use some HTTPS Cloud Functions that you call, from your Vue.js front-end, as REST API endpoints. You can use Axios for example. See the doc here.
One advantage of the first solution is that you can easily, by default, rely on the database security rules, while it would need some more extra work in the second case.
Newbie here.
In Angular 5 application with instantsearch.js library, how do I reload Algolia cache from my model on CRUD operations? I am using Cloud Firestore as my database and I have a cloud function to sync the data with Algolia.
Currently, I have to refresh the browser for changes to take effect.
You should have a request sent to your frontends with for example websockets, when it gets a "new data" event like that, you should call search.refresh().
whateverListenerYouHave.on('data', () => search.refresh());
See also the docs, and some relevant issues: instantsearch.js#2670 and instantsearch.js#1050
In the context of Angular InstantSearch, you'll need to make a connector to have access to the search (instance of InstantSearch.js)
So basically My Angular2 application is using ngrx and rxjs. And also I'm using Redux DevTools chrome extention for debugging purpose.
The thing is when I tried to replay all the actions in Redux DevTools, it always generates new actions automatically. I think the reason is because I'm using a lot of Observables and Subscriptions from rxjs to listen to any store updates and dispatch new actions based on that, and since replaying actions will update the store, it will trigger all those subscriptions. So my question is, is it possible to prevent new actions being generated from replaying actions?