@lwce/apollo-client - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/es6/mutation.js

@@ -49,3 +49,3 @@ /*
         // It is not necessary to return the Promise here, as the caller can use th on...() events
-        pendingResult.client.mutate(mergedOptions).then(({ data, errors }) => {
+        return pendingResult.client.mutate(mergedOptions).then(({ data, errors }) => {
             Object.assign(pendingResult, {
@@ -52,0 +52,0 @@ loading: false,

package.json

 {
   "name": "@lwce/apollo-client",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Apollo client integration for Lightning Web Components",
@@ -29,3 +29,6 @@ "license": "BSD-3-Clause",
   "keywords": [
-    "lwc", "wire adapter", "graphql", "apollo"
+    "lwc",
+    "wire adapter",
+    "graphql",
+    "apollo"
   ],
@@ -32,0 +35,0 @@ "engines": {

README.md

@@ -42,3 +42,3 @@ # @lwce/apollo-client
    `
-   ...   
+   ...
    @wire(useQuery, {
@@ -51,6 +51,6 @@ query: MYQUERY
 
-Note: to make the wire adapter react on a variable value change, the whole `variables` object has to be replaced, as a change in a property is not detected. For example, changing the offset should be done with code like:  
+Note: to make the wire adapter react on a variable value change, the whole `variables` object has to be replaced, as a change in a property is not detected (even when `@track`). For example, changing the offset should be done with code like:  
 
 ```javascript
-    @track variables = {
+    variables = {
         offset: 0,
@@ -124,2 +124,24 @@ limit: 10
 
+### Lazy mode
+
+The GraphQL request is automatically emitted when the wire adapter configuration is available, which means when the component is connected to the DOM. This works well for data needed by the component to display right away, typically a query. But, sometimes, the request should be executed manually. It applies to data requested on demand (list for a pop-up, ...).  The `fetch` method returns a `Promise` that will be resolved when the request is completed. At that time, the `@wire` member is updated with the latest data. Note that the Promise is also resolved when the update failed: just access the error member of the `@wire` member to check the status.
+
+Here an example of a request executed on demand:
+```javascript
+    @wire(useQuery, {
+        query: USERS,
+        lazy: true
+    }) users;
+
+    readUsers() {
+        this.users.fetch().then( () => {
+            // Notification that the data has been updated
+            // Do something with the @wire data member...
+        })
+    }
+```  
+
+To support that, the wire adapter offers a `lazy` mode. When set to `true`, the request is only executed with an explicit call to a `fetch()` method, provided as part of the @wire variable.  
+
+
 ## Executing a mutation
@@ -143,5 +165,5 @@
 ```  
- 
-The wire will initialize the result and make available a `mutate` function to call:  
 
+Similarly to lazy queries, the requests is not executed when the component is initialized but must be executed explicitly. For this, the wire adapter will initialize the result and make available a `mutate` method to call:  
+
 ```javascript
@@ -161,3 +183,22 @@ const variables = {
 
+the `mutate` method also returns a promise to enable notification once a mutation has succeeded:
+```javascript
+    const variables = {
+    	  id,
+	     book: {
+            title: "new title",
+            author: "myself,
+            ...
+        }
+    };
+    this.bookDelete.mutate({
+        variables
+    }).then(() => {
+        //some notification or alert or variable change
+        this.showDeleteSuccessAlert = true;
+     });
+```  
 
+
+
 ### Mutation Results
@@ -164,0 +205,0 @@

No alert changes

Improved metrics

Total package byte prevSize

22240

8.91%

Number of lines in readme file

227

22.04%

No dependency changes