@contentful/live-preview - npm Package Compare versions

Comparing version 2.3.1 to 2.4.0

dist/graphql/assets.d.ts

 import type { AssetProps, EntryProps } from 'contentful-management';
-import { Entity, SysProps } from '../types';
+import { Entity, GraphQLParams, SysProps } from '../types';
 /**
@@ -12,2 +12,2 @@ * Updates GraphQL response data based on CMA Asset object
     sys: SysProps;
-}) | EntryProps>(dataFromPreviewApp: T, updateFromEntryEditor: AssetProps, locale: string): T;
+}) | EntryProps>(dataFromPreviewApp: T, updateFromEntryEditor: AssetProps, locale: string, gqlParams?: GraphQLParams): T;

dist/graphql/entries.d.ts

@@ -11,4 +11,4 @@ import { SysProps, Entity, UpdateEntryProps } from '../types';
  */
-export declare function updateEntry({ contentType, dataFromPreviewApp, updateFromEntryEditor, locale, entityReferenceMap, }: UpdateEntryProps): Promise<Entity & {
+export declare function updateEntry({ contentType, dataFromPreviewApp, updateFromEntryEditor, locale, entityReferenceMap, gqlParams, }: UpdateEntryProps): Promise<Entity & {
     sys: SysProps;
 }>;

dist/graphql/utils.d.ts

@@ -1,3 +0,2 @@
-import { Entity } from '../types';
-export declare function logUnrecognizedFields(contentTypeFields: string[], data: Entity): void;
+/** Generates the name of the field for a collection */
 export declare function buildCollectionName(name: string): string;

dist/helpers/field.d.ts

 import type { AssetProps, ContentFields, EntryProps } from 'contentful-management';
 import type { Entity } from '../types';
-export declare function updatePrimitiveField(dataFromPreviewApp: Entity, updateFromEntryEditor: EntryProps | AssetProps, name: string, locale: string): void;
+interface PrimitiveFieldArgs {
+    dataFromPreviewApp: Entity;
+    updateFromEntryEditor: EntryProps | AssetProps;
+    name: string;
+    locale: string;
+}
+export declare function updatePrimitiveField({ dataFromPreviewApp, updateFromEntryEditor, name, locale, }: PrimitiveFieldArgs): void;
 export declare function isPrimitiveField(field: ContentFields): boolean;
+export {};

dist/helpers/resolveReference.d.ts

 import type { AssetProps, EntryProps } from 'contentful-management';
 import { EntityReferenceMap } from '../types';
+export declare function generateTypeName(contentTypeId: string): string;
 export declare function resolveReference(info: {
@@ -4,0 +5,0 @@ entityReferenceMap: EntityReferenceMap;

dist/index.d.ts

@@ -0,4 +1,5 @@
+import type { DocumentNode } from 'graphql';
 import { InspectorMode } from './inspectorMode';
 import { LiveUpdates } from './liveUpdates';
-import { Argument, InspectorModeTags, LivePreviewProps, SubscribeCallback, Subscription } from './types';
+import { Argument, InspectorModeTags, LivePreviewProps, SubscribeCallback } from './types';
 export interface ContentfulLivePreviewInitConfig {
@@ -14,2 +15,3 @@ locale: string;
     callback: SubscribeCallback;
+    query?: DocumentNode;
 }
@@ -24,3 +26,3 @@ export declare class ContentfulLivePreview {
     static init(config: ContentfulLivePreviewInitConfig): Promise<InspectorMode | null> | undefined;
-    static subscribe(config: Subscription): VoidFunction;
+    static subscribe(config: ContentfulSubscribeConfig): VoidFunction;
     static getProps({ fieldId, entryId, locale }: LivePreviewProps): InspectorModeTags;
@@ -27,0 +29,0 @@ static toggleInspectorMode(): boolean;

dist/index.js

@@ -1,2 +0,2 @@
-import { C as r } from "./index-cf4bb78e.js";
+import { C as r } from "./index-231bda53.js";
 export {
@@ -3,0 +3,0 @@ r as ContentfulLivePreview

dist/liveUpdates.d.ts

@@ -33,3 +33,3 @@ import { ContentfulSubscribeConfig } from '.';
      */
-    subscribe({ data, locale, callback }: ContentfulSubscribeConfig): VoidFunction;
+    subscribe(config: ContentfulSubscribeConfig): VoidFunction;
 }

dist/react.d.ts

 import { type PropsWithChildren, type ReactElement } from 'react';
+import { DocumentNode } from 'graphql';
 import { ContentfulLivePreviewInitConfig } from './index';
@@ -9,7 +10,11 @@ import { Argument, InspectorModeTags, LivePreviewProps } from './types';
 export declare function ContentfulLivePreviewProvider({ children, locale, debugMode, enableInspectorMode, enableLiveUpdates, }: PropsWithChildren<ContentfulLivePreviewInitConfig>): ReactElement;
+interface Options {
+    locale?: string;
+    /** GraphQL query related to the provided data */
+    query?: DocumentNode;
+    skip?: boolean;
+}
+export declare function useContentfulLiveUpdates<T extends Argument | null | undefined>(data: T, options?: Options): T;
 /**
- * Receives updates directly from the Contentful Editor inside the LivePreview
- * Attention: For this to work, the provided data should contain a `sys.id` information
- * and for GraphQL the `__typename`. Otherwise the data will not be updated.
- * Transformed data can't be updated yet, please provide the original data from CPA/CDA.
+ * @deprecated in favor of `options`
  */
@@ -16,0 +21,0 @@ export declare function useContentfulLiveUpdates<T extends Argument | null | undefined>(data: T, locale?: string, skip?: boolean): T;

dist/react.js

 import * as V from "react";
-import ke, { createContext as hr, useMemo as De, useState as gr, useRef as Pe, useContext as Ae, useCallback as yr } from "react";
-import { C as Q, d as mr } from "./index-cf4bb78e.js";
+import ke, { createContext as yr, useMemo as De, useState as hr, useRef as Pe, useContext as Ae, useCallback as gr } from "react";
+import { C as Q, d as mr } from "./index-231bda53.js";
 var Z = { exports: {} }, F = {};
@@ -14,17 +14,17 @@ /**
  */
-var Oe;
+var Se;
 function Er() {
-  if (Oe)
+  if (Se)
     return F;
-  Oe = 1;
-  var n = ke, a = Symbol.for("react.element"), s = Symbol.for("react.fragment"), o = Object.prototype.hasOwnProperty, v = n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, _ = { key: !0, ref: !0, __self: !0, __source: !0 };
-  function P(R, h, T) {
-    var g, b = {}, O = null, W = null;
-    T !== void 0 && (O = "" + T), h.key !== void 0 && (O = "" + h.key), h.ref !== void 0 && (W = h.ref);
-    for (g in h)
-      o.call(h, g) && !_.hasOwnProperty(g) && (b[g] = h[g]);
+  Se = 1;
+  var n = ke, a = Symbol.for("react.element"), s = Symbol.for("react.fragment"), o = Object.prototype.hasOwnProperty, v = n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, b = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function P(R, d, C) {
+    var h, _ = {}, S = null, W = null;
+    C !== void 0 && (S = "" + C), d.key !== void 0 && (S = "" + d.key), d.ref !== void 0 && (W = d.ref);
+    for (h in d)
+      o.call(d, h) && !b.hasOwnProperty(h) && (_[h] = d[h]);
     if (R && R.defaultProps)
-      for (g in h = R.defaultProps, h)
-        b[g] === void 0 && (b[g] = h[g]);
-    return { $$typeof: a, type: R, key: O, ref: W, props: b, _owner: v.current };
+      for (h in d = R.defaultProps, d)
+        _[h] === void 0 && (_[h] = d[h]);
+    return { $$typeof: a, type: R, key: S, ref: W, props: _, _owner: v.current };
   }
@@ -43,6 +43,6 @@ return F.Fragment = s, F.jsx = P, F.jsxs = P, F;
  */
-var Se;
+var Oe;
 function Rr() {
-  return Se || (Se = 1, process.env.NODE_ENV !== "production" && function() {
-    var n = ke, a = Symbol.for("react.element"), s = Symbol.for("react.portal"), o = Symbol.for("react.fragment"), v = Symbol.for("react.strict_mode"), _ = Symbol.for("react.profiler"), P = Symbol.for("react.provider"), R = Symbol.for("react.context"), h = Symbol.for("react.forward_ref"), T = Symbol.for("react.suspense"), g = Symbol.for("react.suspense_list"), b = Symbol.for("react.memo"), O = Symbol.for("react.lazy"), W = Symbol.for("react.offscreen"), re = Symbol.iterator, Fe = "@@iterator";
+  return Oe || (Oe = 1, process.env.NODE_ENV !== "production" && function() {
+    var n = ke, a = Symbol.for("react.element"), s = Symbol.for("react.portal"), o = Symbol.for("react.fragment"), v = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), P = Symbol.for("react.provider"), R = Symbol.for("react.context"), d = Symbol.for("react.forward_ref"), C = Symbol.for("react.suspense"), h = Symbol.for("react.suspense_list"), _ = Symbol.for("react.memo"), S = Symbol.for("react.lazy"), W = Symbol.for("react.offscreen"), re = Symbol.iterator, Fe = "@@iterator";
     function Ie(e) {
@@ -55,3 +55,3 @@ if (e === null || typeof e != "object")
     var j = n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-    function y(e) {
+    function g(e) {
       {
@@ -76,3 +76,3 @@ for (var r = arguments.length, t = new Array(r > 1 ? r - 1 : 0), i = 1; i < r; i++)
     function Ue(e) {
-      return !!(typeof e == "string" || typeof e == "function" || e === o || e === _ || Ne || e === v || e === T || e === g || Me || e === W || We || Ye || $e || typeof e == "object" && e !== null && (e.$$typeof === O || e.$$typeof === b || e.$$typeof === P || e.$$typeof === R || e.$$typeof === h || // This needs to include all possible module reference object
+      return !!(typeof e == "string" || typeof e == "function" || e === o || e === b || Ne || e === v || e === C || e === h || Me || e === W || We || Ye || $e || typeof e == "object" && e !== null && (e.$$typeof === S || e.$$typeof === _ || e.$$typeof === P || e.$$typeof === R || e.$$typeof === d || // This needs to include all possible module reference object
       // types supported by any Flight configuration anywhere since
@@ -93,6 +93,6 @@ // we don't know which Flight build this will end up being used
     }
-    function C(e) {
+    function w(e) {
       if (e == null)
         return null;
-      if (typeof e.tag == "number" && y("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
+      if (typeof e.tag == "number" && g("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
         return e.displayName || e.name || null;
@@ -106,9 +106,9 @@ if (typeof e == "string")
           return "Portal";
-        case _:
+        case b:
           return "Profiler";
         case v:
           return "StrictMode";
-        case T:
+        case C:
           return "Suspense";
-        case g:
+        case h:
           return "SuspenseList";
@@ -124,11 +124,11 @@ }
             return ne(t._context) + ".Provider";
-          case h:
+          case d:
             return Ve(e, e.render, "ForwardRef");
-          case b:
+          case _:
             var i = e.displayName || null;
-            return i !== null ? i : C(e.type) || "Memo";
-          case O: {
+            return i !== null ? i : w(e.type) || "Memo";
+          case S: {
             var l = e, c = l._payload, f = l._init;
             try {
-              return C(f(c));
+              return w(f(c));
             } catch {
@@ -141,7 +141,7 @@ return null;
     }
-    var S = Object.assign, D = 0, ae, ie, oe, ue, se, fe, le;
+    var O = Object.assign, D = 0, ae, ie, oe, ue, se, fe, le;
     function ce() {
     }
     ce.__reactDisabledLog = !0;
-    function Be() {
+    function qe() {
       {
@@ -169,3 +169,3 @@ if (D === 0) {
     }
-    function ze() {
+    function Be() {
       {
@@ -179,21 +179,21 @@ if (D--, D === 0) {
           Object.defineProperties(console, {
-            log: S({}, e, {
+            log: O({}, e, {
               value: ae
             }),
-            info: S({}, e, {
+            info: O({}, e, {
               value: ie
             }),
-            warn: S({}, e, {
+            warn: O({}, e, {
               value: oe
             }),
-            error: S({}, e, {
+            error: O({}, e, {
               value: ue
             }),
-            group: S({}, e, {
+            group: O({}, e, {
               value: se
             }),
-            groupCollapsed: S({}, e, {
+            groupCollapsed: O({}, e, {
               value: fe
             }),
-            groupEnd: S({}, e, {
+            groupEnd: O({}, e, {
               value: le
@@ -203,9 +203,9 @@ })
         }
-        D < 0 && y("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+        D < 0 && g("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
       }
     }
-    var B = j.ReactCurrentDispatcher, z;
+    var q = j.ReactCurrentDispatcher, B;
     function Y(e, r, t) {
       {
-        if (z === void 0)
+        if (B === void 0)
           try {
@@ -215,15 +215,15 @@ throw Error();
             var i = l.stack.trim().match(/\n( *(at )?)/);
-            z = i && i[1] || "";
+            B = i && i[1] || "";
           }
         return `
-` + z + e;
+` + B + e;
       }
     }
-    var q = !1, $;
+    var z = !1, $;
     {
-      var qe = typeof WeakMap == "function" ? WeakMap : Map;
-      $ = new qe();
+      var ze = typeof WeakMap == "function" ? WeakMap : Map;
+      $ = new ze();
     }
     function ve(e, r) {
-      if (!e || q)
+      if (!e || z)
         return "";
@@ -236,7 +236,7 @@ {
       var i;
-      q = !0;
+      z = !0;
       var l = Error.prepareStackTrace;
       Error.prepareStackTrace = void 0;
       var c;
-      c = B.current, B.current = null, Be();
+      c = q.current, q.current = null, qe();
       try {
@@ -254,4 +254,4 @@ if (r) {
               Reflect.construct(f, []);
-            } catch (w) {
-              i = w;
+            } catch (T) {
+              i = T;
             }
@@ -262,4 +262,4 @@ Reflect.construct(e, [], f);
               f.call();
-            } catch (w) {
-              i = w;
+            } catch (T) {
+              i = T;
             }
@@ -271,23 +271,23 @@ e.call(f.prototype);
             throw Error();
-          } catch (w) {
-            i = w;
+          } catch (T) {
+            i = T;
           }
           e();
         }
-      } catch (w) {
-        if (w && i && typeof w.stack == "string") {
-          for (var u = w.stack.split(`
+      } catch (T) {
+        if (T && i && typeof T.stack == "string") {
+          for (var u = T.stack.split(`
 `), m = i.stack.split(`
-`), d = u.length - 1, p = m.length - 1; d >= 1 && p >= 0 && u[d] !== m[p]; )
-            p--;
-          for (; d >= 1 && p >= 0; d--, p--)
-            if (u[d] !== m[p]) {
-              if (d !== 1 || p !== 1)
+`), p = u.length - 1, y = m.length - 1; p >= 1 && y >= 0 && u[p] !== m[y]; )
+            y--;
+          for (; p >= 1 && y >= 0; p--, y--)
+            if (u[p] !== m[y]) {
+              if (p !== 1 || y !== 1)
                 do
-                  if (d--, p--, p < 0 || u[d] !== m[p]) {
+                  if (p--, y--, y < 0 || u[p] !== m[y]) {
                     var E = `
-` + u[d].replace(" at new ", " at ");
+` + u[p].replace(" at new ", " at ");
                     return e.displayName && E.includes("<anonymous>") && (E = E.replace("<anonymous>", e.displayName)), typeof e == "function" && $.set(e, E), E;
                   }
-                while (d >= 1 && p >= 0);
+                while (p >= 1 && y >= 0);
               break;
@@ -297,3 +297,3 @@ }
       } finally {
-        q = !1, B.current = c, ze(), Error.prepareStackTrace = l;
+        z = !1, q.current = c, Be(), Error.prepareStackTrace = l;
       }
@@ -318,5 +318,5 @@ var k = e ? e.displayName || e.name : "", Te = k ? Y(k) : "";
       switch (e) {
-        case T:
+        case C:
           return Y("Suspense");
-        case g:
+        case h:
           return Y("SuspenseList");
@@ -326,7 +326,7 @@ }
         switch (e.$$typeof) {
-          case h:
+          case d:
             return Je(e.render);
-          case b:
+          case _:
             return M(e.type, r, t);
-          case O: {
+          case S: {
             var i = e, l = i._payload, c = i._init;
@@ -361,6 +361,6 @@ try {
               u = e[f](r, f, i, t, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
-            } catch (d) {
-              u = d;
+            } catch (p) {
+              u = p;
             }
-            u && !(u instanceof Error) && (U(l), y("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", i || "React class", t, f, typeof u), U(null)), u instanceof Error && !(u.message in de) && (de[u.message] = !0, U(l), y("Failed %s type: %s", t, u.message), U(null));
+            u && !(u instanceof Error) && (U(l), g("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", i || "React class", t, f, typeof u), U(null)), u instanceof Error && !(u.message in de) && (de[u.message] = !0, U(l), g("Failed %s type: %s", t, u.message), U(null));
           }
@@ -381,3 +381,3 @@ }
       try {
-        return he(e), !1;
+        return ye(e), !1;
       } catch {
@@ -387,8 +387,8 @@ return !0;
     }
-    function he(e) {
+    function ye(e) {
       return "" + e;
     }
-    function ge(e) {
+    function he(e) {
       if (Ze(e))
-        return y("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Xe(e)), he(e);
+        return g("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Xe(e)), ye(e);
     }
@@ -400,3 +400,3 @@ var A = j.ReactCurrentOwner, Qe = {
       __source: !0
-    }, ye, me, G;
+    }, ge, me, G;
     G = {};
@@ -421,4 +421,4 @@ function er(e) {
       if (typeof e.ref == "string" && A.current && r && A.current.stateNode !== r) {
-        var t = C(A.current.type);
-        G[t] || (y('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', C(A.current.type), e.ref), G[t] = !0);
+        var t = w(A.current.type);
+        G[t] || (g('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', w(A.current.type), e.ref), G[t] = !0);
       }
@@ -429,3 +429,3 @@ }
         var t = function() {
-          ye || (ye = !0, y("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
+          ge || (ge = !0, g("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
         };
@@ -441,3 +441,3 @@ t.isReactWarning = !0, Object.defineProperty(e, "key", {
         var t = function() {
-          me || (me = !0, y("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
+          me || (me = !0, g("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
         };
@@ -482,13 +482,13 @@ t.isReactWarning = !0, Object.defineProperty(e, "ref", {
         var c, f = {}, u = null, m = null;
-        t !== void 0 && (ge(t), u = "" + t), rr(r) && (ge(r.key), u = "" + r.key), er(r) && (m = r.ref, tr(r, l));
+        t !== void 0 && (he(t), u = "" + t), rr(r) && (he(r.key), u = "" + r.key), er(r) && (m = r.ref, tr(r, l));
         for (c in r)
           N.call(r, c) && !Qe.hasOwnProperty(c) && (f[c] = r[c]);
         if (e && e.defaultProps) {
-          var d = e.defaultProps;
-          for (c in d)
-            f[c] === void 0 && (f[c] = d[c]);
+          var p = e.defaultProps;
+          for (c in p)
+            f[c] === void 0 && (f[c] = p[c]);
         }
         if (u || m) {
-          var p = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
-          u && nr(f, p), m && ar(f, p);
+          var y = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
+          u && nr(f, y), m && ar(f, y);
         }
@@ -514,3 +514,3 @@ return ir(e, u, m, l, i, A.current, f);
         if (K.current) {
-          var e = C(K.current.type);
+          var e = w(K.current.type);
           if (e)
@@ -558,3 +558,3 @@ return `
         var i = "";
-        e && e._owner && e._owner !== K.current && (i = " It was passed a child from " + C(e._owner.type) + "."), x(e), y('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, i), x(null);
+        e && e._owner && e._owner !== K.current && (i = " It was passed a child from " + w(e._owner.type) + "."), x(e), g('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, i), x(null);
       }
@@ -589,5 +589,5 @@ }
           t = r.propTypes;
-        else if (typeof r == "object" && (r.$$typeof === h || // Note: Memo only checks outer props here.
+        else if (typeof r == "object" && (r.$$typeof === d || // Note: Memo only checks outer props here.
         // Inner props are checked in the reconciler.
-        r.$$typeof === b))
+        r.$$typeof === _))
           t = r.propTypes;
@@ -597,10 +597,10 @@ else
         if (t) {
-          var i = C(r);
+          var i = w(r);
           Ke(t, e.props, "prop", i, e);
         } else if (r.PropTypes !== void 0 && !H) {
           H = !0;
-          var l = C(r);
-          y("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", l || "Unknown");
+          var l = w(r);
+          g("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", l || "Unknown");
         }
-        typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && y("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+        typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && g("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
       }
@@ -613,7 +613,7 @@ }
           if (i !== "children" && i !== "key") {
-            x(e), y("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", i), x(null);
+            x(e), g("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", i), x(null);
             break;
           }
         }
-        e.ref !== null && (x(e), y("Invalid attribute `ref` supplied to `React.Fragment`."), x(null));
+        e.ref !== null && (x(e), g("Invalid attribute `ref` supplied to `React.Fragment`."), x(null));
       }
@@ -629,8 +629,8 @@ }
           m ? u += m : u += Re();
-          var d;
-          e === null ? d = "null" : J(e) ? d = "array" : e !== void 0 && e.$$typeof === a ? (d = "<" + (C(e.type) || "Unknown") + " />", u = " Did you accidentally export a JSX literal instead of a component?") : d = typeof e, y("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", d, u);
+          var p;
+          e === null ? p = "null" : J(e) ? p = "array" : e !== void 0 && e.$$typeof === a ? (p = "<" + (w(e.type) || "Unknown") + " />", u = " Did you accidentally export a JSX literal instead of a component?") : p = typeof e, g("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", p, u);
         }
-        var p = or(e, r, t, l, c);
-        if (p == null)
-          return p;
+        var y = or(e, r, t, l, c);
+        if (y == null)
+          return y;
         if (f) {
@@ -645,7 +645,7 @@ var E = r.children;
               } else
-                y("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+                g("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
             else
               Ce(E, e);
         }
-        return e === o ? lr(p) : fr(p), p;
+        return e === o ? lr(y) : fr(y), y;
       }
@@ -734,3 +734,3 @@ }
 }
-const ee = hr(null);
+const ee = yr(null);
 function Pr({
@@ -748,24 +748,25 @@ children: n,
   Q.init({ locale: a, debugMode: s, enableInspectorMode: o, enableLiveUpdates: v });
-  const _ = De(
+  const b = De(
     () => ({ locale: a, debugMode: s, enableInspectorMode: o, enableLiveUpdates: v }),
     [a, s, o, v]
   );
-  return /* @__PURE__ */ _r.jsx(ee.Provider, { value: _, children: n });
+  return /* @__PURE__ */ _r.jsx(ee.Provider, { value: b, children: n });
 }
-function Or(n, a, s = !1) {
-  const [o, v] = gr({ data: n, version: 1 }), _ = Pe(n), P = Pe(mr(v)), R = Ae(ee), h = De(() => R && !R.enableLiveUpdates || s ? !1 : !!(Array.isArray(n) && n.length || n && typeof n == "object" && Object.keys(n).length), [R, s, n]);
+function Sr(n, a, s = !1) {
+  const [o, v] = hr({ data: n, version: 1 }), b = Pe(n), P = Pe(mr(v)), R = Ae(ee), d = typeof a == "object" ? a : { locale: a, skip: s }, C = De(() => R && !R.enableLiveUpdates || d.skip ? !1 : !!(Array.isArray(n) && n.length || n && typeof n == "object" && Object.keys(n).length), [R, d.skip, n]);
   return Cr(() => {
-    if (_.current !== n && (v({ data: n, version: 1 }), _.current = n), !!h)
+    if (b.current !== n && (v({ data: n, version: 1 }), b.current = n), !!C)
       return Q.subscribe({
         data: n,
-        locale: a,
-        callback: (T) => {
-          P.current((g) => ({ data: T, version: g.version + 1 }));
+        locale: d.locale,
+        query: d.query,
+        callback: (h) => {
+          P.current((_) => ({ data: h, version: _.version + 1 }));
         }
       });
-  }, [n, h]), o.data;
+  }, [n, C, d.locale, d.query]), o.data;
 }
-function Sr(n) {
+function Or(n) {
   const a = Ae(ee);
-  return yr(
+  return gr(
     (s) => a != null && a.enableInspectorMode ? Q.getProps({ ...n, ...s }) : null,
@@ -777,5 +778,5 @@ [a == null ? void 0 : a.enableInspectorMode, n]
   Pr as ContentfulLivePreviewProvider,
-  Sr as useContentfulInspectorMode,
-  Or as useContentfulLiveUpdates
+  Or as useContentfulInspectorMode,
+  Sr as useContentfulLiveUpdates
 };
 //# sourceMappingURL=react.js.map

dist/types.d.ts

@@ -93,2 +93,3 @@ import type { AssetProps, EntryProps, ContentTypeProps, SysLink } from 'contentful-management';
     entityReferenceMap: EntityReferenceMap;
+    gqlParams?: GraphQLParams;
 };
@@ -101,2 +102,3 @@ export type UpdateFieldProps = {
     entityReferenceMap: EntityReferenceMap;
+    gqlParams?: GraphQLParams;
 };
@@ -110,3 +112,18 @@ export type UpdateReferenceFieldProps = {
     locale: string;
+    gqlParams?: GraphQLParams;
 };
+/**
+ * Generated params based on the DocumentNode of the query
+ */
+export interface GraphQLParam {
+    /** Map with aliases (name, alias) */
+    alias: Map<string, string>;
+    /** Set with all requested fields for this __typename */
+    fields: Set<string>;
+}
+/**
+ * Map with the aliases for GraphQL fields
+ * clustered by `__typename`
+ */
+export type GraphQLParams = Map<string, GraphQLParam>;
 export interface Subscription {
@@ -116,4 +133,5 @@ data: Argument;
     callback: SubscribeCallback;
+    gqlParams?: GraphQLParams;
 }
 export declare function isAsset(entity: EntryProps | (Entity & CollectionItem)): boolean;
 export {};

package.json

 {
   "name": "@contentful/live-preview",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "author": "Contentful GmbH",
@@ -72,2 +72,4 @@ "license": "MIT",
     "eslint-plugin-import-helpers": "^1.2.1",
+    "graphql": "^16.6.0",
+    "graphql-tag": "^2.12.6",
     "husky": "^8.0.3",
@@ -83,3 +85,3 @@ "jsdom": "^22.0.0",
     "vite-plugin-dts": "^2.0.1",
-    "vitest": "^0.31.0"
+    "vitest": "^0.31.4"
   },
@@ -86,0 +88,0 @@ "peerDependencies": {

README.md

@@ -5,2 +5,27 @@ # @contentful/live-preview
 
+<details>
+<summary>Table of contents</summary>
+
+<!-- TOC -->
+- [Getting started](#getting-started)
+  - [Requirements](#requirements)
+  - [Installation](#installation)
+  - [Initializing the SDK](#initialize-the-sdk)
+    - [Init Configuration](#init-configuration)
+    - [Overriding Locale](#overriding-locale)
+  - [Inspector Mode](#inspector-mode-field-tagging)
+  - [Live Updates](#live-updates)
+    - [Live Updates with GraphQL](#live-updates-with-graphql)
+- [Example Integrations](#example-integrations)
+  - [JavaScript](#vanilla-javascript)
+  - [Next.js](#integration-with-nextjs)
+  - [Gatsby](#integrating-with-gatsby)
+  - [Further Examples](#further-examples)
+- [Documentation](#documentation)
+- [Code of Conduct](#code-of-conduct)
+- [License](#license)
+<!-- /TOC -->
+
+</details>
+
 ## Getting started
@@ -14,2 +39,4 @@
 
+### Installation
+
 ```bash
@@ -25,6 +52,2 @@ yarn add @contentful/live-preview
 
-## Documentation
-
-- [Developer Documentation](https://www.contentful.com/developers/docs/tutorials/general/live-preview/)
-
 ### Initializing the SDK
@@ -73,3 +96,3 @@
 // ...
-const updated = useContentfulLiveUpdates(originalData, locale);
+const updated = useContentfulLiveUpdates(originalData, {locale});
 // ...
@@ -108,2 +131,31 @@ ```
 
+### Live updates with GraphQL
+
+For the best experience of live updates together with GraphQL, we recommend to provide your query information to `useContentfulLiveUpdates`.
+This will benefit the performance of updates and provides support for GraphQL features (e.g. `alias`).
+
+```tsx
+import gql from "graphql-tag"
+
+const query = gql`
+  query posts {
+    postCollection(where: { slug: "${slug}" }, preview: true, limit: 1) {
+      items {
+        __typename
+        sys {
+          id
+        }
+        slug
+        title
+        content: description
+      }
+    }
+  }
+`
+
+// ...
+const updated = useContentfulLiveUpdates(originalData, { query })
+// ...
+```
+
 ## Example Integrations
@@ -430,2 +482,10 @@
 
+### Further Examples
+
+For further examples see the [./examples](./examples/) directory.
+
+## Documentation
+
+- [Developer Documentation](https://www.contentful.com/developers/docs/tutorials/general/live-preview/)
+
 ## Code of Conduct
@@ -432,0 +492,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

441940

increased by5.36%

Number of package files

39

increased by2.63%

Lines of code

2227

increased by7.12%

Number of lines in readme file

502

increased by13.57%

Worsened metrics

Dev dependency count

27

increased by8%

Number of medium supply chain risk alerts

1

increased byInfinity%

Published versions last two months

9

decreased by-18.18%

Published versions last week

2

decreased by-50%

No dependency changes