vue-datocms 4.0.0 → 4.0.1

package/dist/index.cjs.js

@@ -663,46 +663,34 @@ const DatocmsStructuredTextPlugin = {
   }
 };
 
-function useQuerySubscription(options) {
-  const { enabled, initialData, ...other } = options;
+const useQuerySubscription = ({ enabled = true, initialData, query, token, ...other }) => {
   const error = vueDemi.ref(null);
-  const data = vueDemi.ref(null);
-  const status = vueDemi.ref(
-    enabled ? "connecting" : "closed"
-  );
+  const data = vueDemi.ref(vueDemi.unref(initialData) || null);
+  const status = vueDemi.ref(vueDemi.unref(enabled) ? "connecting" : "closed");
   const subscribeToQueryOptions = other;
-  vueDemi.watchEffect((onCleanup) => {
-    if (enabled === false) {
-      status.value = "closed";
-      return () => {
-      };
-    }
-    let unsubscribe;
-    async function subscribe() {
-      unsubscribe = await datocmsListen.subscribeToQuery({
+  vueDemi.watchEffect(async (onCleanup) => {
+    if (query && token && vueDemi.unref(enabled)) {
+      const unsubscribe = await datocmsListen.subscribeToQuery({
         ...subscribeToQueryOptions,
+        query,
+        token,
         onStatusChange: (connectionStatus) => {
           status.value = connectionStatus;
         },
-        onUpdate: (updateData) => {
+        onUpdate: ({ response }) => {
           error.value = null;
-          data.value = updateData.response.data;
+          data.value = response.data;
         },
         onChannelError: (errorData) => {
           data.value = null;
           error.value = errorData;
         }
       });
+      onCleanup(unsubscribe);
     }
-    subscribe();
-    onCleanup(() => {
-      if (unsubscribe) {
-        unsubscribe();
-      }
-    });
   });
-  return { error, status, data: data || initialData };
-}
+  return { data, status, error };
+};
 
 const highlightPieces = (textWithHighlightMarker) => {
   return textWithHighlightMarker.split(/\[h\](.+?)\[\/h\]/g).map((text, index) => ({

package/dist/index.d.ts

@@ -381,26 +381,26 @@ declare const DatocmsStructuredTextPlugin: {
 declare type SubscribeToQueryOptions<QueryResult, QueryVariables> = Omit<Options<QueryResult, QueryVariables>, 'onStatusChange' | 'onUpdate' | 'onChannelError'>;
 declare type EnabledQueryListenerOptions<QueryResult, QueryVariables> = {
     /** Whether the subscription has to be performed or not */
-    enabled?: true;
+    enabled?: true | Ref<boolean>;
     /** The initial data to use while the initial request is being performed */
     initialData?: QueryResult;
 } & SubscribeToQueryOptions<QueryResult, QueryVariables>;
 declare type DisabledQueryListenerOptions<QueryResult, QueryVariables> = {
     /** Whether the subscription has to be performed or not */
-    enabled: false;
+    enabled: false | Ref<boolean>;
     /** The initial data to use while the initial request is being performed */
     initialData?: QueryResult;
 } & Partial<SubscribeToQueryOptions<QueryResult, QueryVariables>>;
 declare type QueryListenerOptions<QueryResult, QueryVariables> = EnabledQueryListenerOptions<QueryResult, QueryVariables> | DisabledQueryListenerOptions<QueryResult, QueryVariables>;
-declare function useQuerySubscription<QueryResult = any, QueryVariables = Record<string, any>>(options: QueryListenerOptions<QueryResult, QueryVariables>): {
+declare const useQuerySubscription: <QueryResult = any, QueryVariables = Record<string, any>>({ enabled, initialData, query, token, ...other }: QueryListenerOptions<QueryResult, QueryVariables>) => {
+    data: Ref<vue_demi.UnwrapRef<NonNullable<QueryResult>> | null>;
+    status: Ref<ConnectionStatus>;
     error: Ref<{
         code: string;
         message: string;
         fatal: boolean;
         response?: any;
     } | null>;
-    status: Ref<ConnectionStatus>;
-    data: Ref<QueryResult | null>;
 };
 
 declare type SearchResultInstancesHrefSchema = {

package/dist/index.esm.mjs

@@ -1,5 +1,5 @@
 import hypenateStyleName from 'hyphenate-style-name';
-import { ref, onMounted, onBeforeUnmount, defineComponent, h, isVue2, isVue3, watchEffect, reactive, computed, toRaw } from 'vue-demi';
+import { ref, onMounted, onBeforeUnmount, defineComponent, h, isVue2, isVue3, watchEffect, unref, reactive, computed, toRaw } from 'vue-demi';
 import { render, renderNodeRule, defaultMetaTransformer } from 'datocms-structured-text-generic-html-renderer';
 export { renderMarkRule, renderNodeRule, renderNodeRule as renderRule } from 'datocms-structured-text-generic-html-renderer';
 import { isRoot, isInlineItem, RenderError, isStructuredText, isItemLink, isBlock } from 'datocms-structured-text-utils';
@@ -657,46 +657,34 @@ const DatocmsStructuredTextPlugin = {
   }
 };
 
-function useQuerySubscription(options) {
-  const { enabled, initialData, ...other } = options;
+const useQuerySubscription = ({ enabled = true, initialData, query, token, ...other }) => {
   const error = ref(null);
-  const data = ref(null);
-  const status = ref(
-    enabled ? "connecting" : "closed"
-  );
+  const data = ref(unref(initialData) || null);
+  const status = ref(unref(enabled) ? "connecting" : "closed");
   const subscribeToQueryOptions = other;
-  watchEffect((onCleanup) => {
-    if (enabled === false) {
-      status.value = "closed";
-      return () => {
-      };
-    }
-    let unsubscribe;
-    async function subscribe() {
-      unsubscribe = await subscribeToQuery({
+  watchEffect(async (onCleanup) => {
+    if (query && token && unref(enabled)) {
+      const unsubscribe = await subscribeToQuery({
         ...subscribeToQueryOptions,
+        query,
+        token,
         onStatusChange: (connectionStatus) => {
           status.value = connectionStatus;
         },
-        onUpdate: (updateData) => {
+        onUpdate: ({ response }) => {
           error.value = null;
-          data.value = updateData.response.data;
+          data.value = response.data;
         },
         onChannelError: (errorData) => {
           data.value = null;
           error.value = errorData;
         }
       });
+      onCleanup(unsubscribe);
     }
-    subscribe();
-    onCleanup(() => {
-      if (unsubscribe) {
-        unsubscribe();
-      }
-    });
   });
-  return { error, status, data: data || initialData };
-}
+  return { data, status, error };
+};
 
 const highlightPieces = (textWithHighlightMarker) => {
   return textWithHighlightMarker.split(/\[h\](.+?)\[\/h\]/g).map((text, index) => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-datocms",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "A set of components and utilities to work faster with DatoCMS in Vue.js environments",
   "keywords": [
     "datocms",