Data Sync with Server Side Data Store like MySQL / PostgreSQL?

[JavaScript]

Hi, I could not find anything about this important feature in the docs or on the website, so I am asking here:
How can I sync data with quasar to a server-side data store, like e.g. MySQL or PostgreSQL? I read about vuex and it seems very “naturally expected” to find some kind of data sync feature - however, there seems to be not anything like this.

How do people sync data with server side data stores?

Thanks for your attention!

[a47ae]

Hey @JavaScript ,
please read a bit about the basics of data communication between JavaScript and a backend.
Good starting points would be AJAX getting started, REST and the MDN fetch API entry.

In general, your backend has to provide an HTTP API. Often these are REST endpoints, but also could be SOAP or GraphQL. Then on your client (in this case Quasar) you perform an AJAX request to fetch this data.

JavaScript can not directly talk to a MySQL or PostgreSQL database, you need a backend in between.

[JavaScript]

Thanks for your hints - maybe my question was a little bit unclear to read for the inexperienced user.

I already know the basics and that is exactly the reason why I would like to avoid engineering a data sync facility on my own. As a database admin with many years spent with different types of databases I know some of the pitfalls. Exactly this makes me wonder which solution are people relying on instead of reinventing multi-user database sync with record locking, network problems, offline first, etc. - this is not something your average webdev will build during a weekend hackathon - so I was wondering if a framework like quasar provides anything related to that?

I am not talking about “just throw some ajax requests in your app” - I mean real life data sync with builtin serious error handling and robustness.

[a47ae]

Sorry, then I misunderstood your question because lots of beginners really are not aware of the fact that they need a backend or bridge in between their database and front end JavaScript application.

You already mentioned Vuex. But Vuex is, as you already discovered, not intended to fetch and sync data. It provides a single source of truth for your data sets in a Vue.js application, by implementing the Flux pattern invented by Facebook. It is similar to what Redux is for React. Vue.js should be platform-agnostic, that’s why there is no standard way of fetching and syncing data. As I wrote in my first post, and you know, there are multiple formats for exchanging data over HTTP or even other protocols, ranging from REST to GraphQL and protobufs. So a one-fits-all solution is really not possible.

That’s also why Quasar does not describe how your data should look like and where it is fetched from. In the first place, Quasar is a UI-Framework. A UI-Framework should have nothing to do with your data fetching logic, so there is no solution for this problem included in Quasar.

I would look into projects like dstore. Combined with Vuex, you get quite a nice layer for managing your data and solve problems like caching and syncing your data. Then you can apply this layer to Quasar, as Quasar (and Vue.js) does not care, where your data comes from.
The last thing you could look into are Service Workers which allow your app to access data even when offline. Then you could use IndexedDB to store local changes for later syncing with your backend.

Hope that post helps with your question.

[JavaScript]

Hi, thanks for taking your time to answer me, it is certainly very appreciated!

dstore was new to me, so definitely something to explore, thank you! Also it is good to understand that quasar does not provide any advanced data sync facility but is only GUI - I expected to find at least some officially supported 3rd party lib that deliver these important features - feels incomplete without it. I will also look at couchdb and found feathersjs to be very interesting.

BTW I have problems accepting that FB “invented” the “Flux” pattern - this kind of application development logic is very established since a very long time and all kind of programming languages usually come with at least one framework or library that supports a global state machine and a very similar way of handling data flow. Remember that the main React developer explained how his library works with a reference to a very old game engine called “Doom”. However, the absence of a well established data sync mechanism in very promising projects like vuex and quasar shows that there is still a long way to go.

It is, however, a good thing to see that JavaScript developers finally start to look around what happened before in history

Thanks for your attention!

[beeplin]

@JavaScript if you are using feathers as your back-end framework, you can check out feathers-vuex which has out-of-box data syncing support.

[s.molinari]

Flux is a store for controlling data globally in a reactive system. Sure, there have been such types of global data stores, but not for front-end reactive UIs for web applications. So, they just took old technology and reused it in a different way for more modern purposes and gave it a new name. That is actually both invention and innovation.

Oh, btw, GraphQL is also the same thing. It is both an invention and innovation, because it uses old technologies for more modern/ different purposes.

Scott