vue-meteor-reactive-promise-calls
Utilities for reactive promise-based Meteor method calls. If you want to call server methods using async / await this is the package for you.
0. Background
Meteor's client side publish / subscribe capability is great, but there are occasions (e.g. security) where you may need to process data purely on the server and have only the result sent back to the client. Hence, the need to be able to synchronously call server-side Meteor methods from the client.
This NPM package looks to address this challenge by adding a number of Meteor functions (e.g. Meteor.callPromise), which can be used universally in your app. Additionally, this package can be added as a Vue plugin and called directly within your components (e.g. this.$callPromise).
Allowing you to do this:
// e.g. Notes.vue async { // Calling meteor method from the client const notes = await this; };
1. Getting Started
These instructions will get you a copy of the package up and running on your local machine.
1.1 Installation
To get vue-meteor-reactive-promise-calls:
$ meteor npm i --save vue-meteor-reactive-promise-calls
1.2 Two Approaches
This package includes two approaches: Meteor Function or Vue Plugin.
N.B. Both the Meteor functions and Vue plugin can be used within components, but only the Meteor functions can be used universally (e.g. outside of the Vue instance).
2. Meteor Function
2.1 API
^ Required
API | Parameters | Description |
---|---|---|
Meteor.callPromise | [Method String^], [Parameters String/Object] |
The same as Meteor.call, but you omit the callback parameter, and it returns a Promise for the result. |
Meteor.reactivelyCallPromise | [VueComponent Object^], [DataField String^], [Method String^], [Refresh Number], [Parameters String/Object] |
The same as Meteor.callPromise, but is reactive. |
Meteor.stopReactivePromiseCalls | [VueComponent Object^] | Stop all Meteor.reactivelyCallPromise calls. |
Meteor.stopReactivePromiseCall | [VueComponent Object^], [Method String^] |
Stop a specific Meteor.reactivelyCallPromise call. |
Meteor.pauseReactivePromiseCalls | [VueComponent Object^] | Pause a specific Meteor.reactivelyCallPromise call. |
Meteor.pauseReactivePromiseCall | [VueComponent Object^], [Method String^], [DataField String^] |
Pause a specific Meteor.reactivelyCallPromise call. |
Meteor.resumeReactivePromiseCalls | [VueComponent Object^] | Resume all Meteor.reactivelyCallPromise calls. |
Meteor.resumeReactivePromiseCall | [VueComponent Object^], [Method String^], [DataField String^] |
Resume a specific Meteor.reactivelyCallPromise call. |
2.2 Example Code
The example below illustrates how to reactively call a server method from within a VUE file. FYI - code is based on this demo project Demo.
Step 1: Import package during startup (e.g. client.js)
{ // Dynamic import style import'vue-meteor-reactive-promise-calls'; // Regular import // import 'vue-meteor-reactive-promise-calls' import'intersection-observer'; import'vue-googlemaps/dist/vue-googlemaps.css'; const Meteor = await import'meteor/meteor'; const CreateApp = await import'./app'default; Meteor};
Step 2: Utilise the methods in a component (e.g. notes.vue)
<script> { return newNote: '' notes: limit: 5 } watch: // On dialog close { if !pVal // Example of how to resume passed calls (e.g. after a modal is closed and a user returns to the parent screen.) Meteor; } { // Example of a standard Meteor Method call returning a promise thisnotes = await Meteor; // Example of a reactive Meteor Method call returning a promise Meteor; // Example - if the current component is a modal / dialog and is loaded over another page that have active calls. It is therefore best to temporarily pause the. Meteor; // Or pause just a specific method call Meteor; } { // Don't forget to stop all timeouts Meteor; } methods: async { if thisnewNote try thisnewNote = await Meteor; catch e console; } async { try await Meteor; thisnotes = await Meteor; catch e console; } { if visible thislimit += 5; // Now that you have scrolled to the bottom of the page call the method with the new limit // N.B. Package will auto stop the old Meteor method call Meteor; } </script>
3. Vue Plugin
3.1 API
^ Required
API | Parameters | Description |
---|---|---|
$callPromise | [Method String^], [Parameters String/Object] |
The same as Meteor.call, but you omit the callback parameter, and it returns a Promise for the result. |
$reactivelyCallPromise | [DataField String^], [Method String^], [Refresh Number], [Parameters String/Object] |
The same as $callPromise, but is reactive. |
$stopReactivePromiseCalls | Stop all $reactivelyCallPromise calls. | |
$stopReactivePromiseCall | [Method String^] | Stop a specific $reactivelyCallPromise call. |
$pauseReactivePromiseCalls | Pause a specific $reactivelyCallPromise call. | |
$pauseReactivePromiseCall | [Method String^], [DataField String^] |
Pause a specific $reactivelyCallPromise call. |
$resumeReactivePromiseCalls | Resume all $reactivelyCallPromise calls. | |
$resumeReactivePromiseCall | [Method String^], [DataField String^] |
Resume a specific $reactivelyCallPromise call. |
3.2 Example Code
The example below illustrates how to reactively call a server method from within a VUE file. FYI - code is based on this demo project Demo.
Step 1: Add plugin to Vue instance during startup
;; Vue;
Step 2: Utilise the methods in a component (e.g. notes.vue)
<script> { return newNoteDialog: true newNote: '' notes: limit: 5 } watch: // On dialog close { if !pVal // Example of how to resume passed calls (e.g. after a modal is closed and a user returns to the parent screen.) this$parent; } { // Example of a standard call returning a promise thisnotes = await this; // Example of a reactive call returning a promise this; // Example - if the current component is a modal / dialog and is loaded over another page that have active calls. It is therefore best to temporarely pause the. this$parent; } { // Don't forget to stop all calls this; } methods: async { if thisnewNote try thisnewNote = await this; catch e console; } async { try await Meteor; thisnotes = await this; catch e console; } { if visible thislimit += 5; // Now that you have scrolled to the bottom of the page call the method with the new limit // N.B. Package will auto stop the old Meteor method call this; } </script>
4. Authors
- @gp-awesome - Initial work - GitHub
See also the list of contributors who participated in this project.
5. Acknowledgments
- Hat tip to anyone who's code was used
- deanius/meteor-promise