@cedarjs/web 6.0.0-canary.2646 → 6.0.0-canary.2647

package/dist/cjs/components/cell/createFragmentCell.js

@@ -0,0 +1,108 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var createFragmentCell_exports = {};
+__export(createFragmentCell_exports, {
+  createFragmentCell: () => createFragmentCell
+});
+module.exports = __toCommonJS(createFragmentCell_exports);
+var import_react = __toESM(require("react"), 1);
+var import_graphql = require("graphql");
+var import_fragmentRegistry = require("../../apollo/fragmentRegistry.js");
+var import_GraphQLHooksProvider = require("../GraphQLHooksProvider.js");
+var import_isCellEmpty = require("./isCellEmpty.js");
+function getFragmentDefinition(fragment, displayName) {
+  const fragmentDefinition = fragment.definitions.find(
+    (definition) => definition.kind === import_graphql.Kind.FRAGMENT_DEFINITION
+  );
+  if (!fragmentDefinition) {
+    throw new Error(
+      `The FRAGMENT export in ${displayName} must contain a GraphQL fragment definition, like \`fragment AuthorCell_author on User { fullName }\``
+    );
+  }
+  return fragmentDefinition;
+}
+function getFragmentPropName(fragmentDefinition) {
+  const fragmentName = fragmentDefinition.name.value;
+  const underscoreIndex = fragmentName.lastIndexOf("_");
+  if (underscoreIndex > 0 && underscoreIndex < fragmentName.length - 1) {
+    return fragmentName.slice(underscoreIndex + 1);
+  }
+  const typename = fragmentDefinition.typeCondition.name.value;
+  return typename.charAt(0).toLowerCase() + typename.slice(1);
+}
+function isDataRef(value) {
+  return typeof value === "object" && value !== null;
+}
+function createFragmentCell({
+  FRAGMENT,
+  afterQuery = (data) => data,
+  isEmpty = import_isCellEmpty.isDataEmpty,
+  Empty,
+  Success,
+  displayName = "Cell"
+}) {
+  if (!FRAGMENT) {
+    throw new Error(
+      `createFragmentCell() for ${displayName} requires a FRAGMENT`
+    );
+  }
+  const fragment = FRAGMENT;
+  const fragmentDefinition = getFragmentDefinition(fragment, displayName);
+  const fragmentName = fragmentDefinition.name.value;
+  const propName = getFragmentPropName(fragmentDefinition);
+  import_fragmentRegistry.fragmentRegistry.register(fragment);
+  function NamedCell(props) {
+    const { children: _, [propName]: rawSlice, ...rest } = props;
+    const dataRef = isDataRef(rawSlice) ? rawSlice : void 0;
+    const fragmentResult = (0, import_GraphQLHooksProvider.useFragment)({
+      fragment,
+      fragmentName,
+      from: dataRef ?? {}
+    });
+    if (!(propName in props)) {
+      throw new Error(
+        `${displayName} must be passed a \`${propName}\` prop. Render it from a parent Cell that spreads \`...${fragmentName}\` in its QUERY, and pass the matching data object: \`<${displayName} ${propName}={data.someField} />\``
+      );
+    }
+    const data = fragmentResult.complete ? fragmentResult.data : dataRef ?? null;
+    const afterQueryData = afterQuery({ [propName]: data });
+    if (isEmpty({ [propName]: data }, { isDataEmpty: import_isCellEmpty.isDataEmpty }) && Empty) {
+      return /* @__PURE__ */ import_react.default.createElement(Empty, { ...rest, ...afterQueryData });
+    }
+    return /* @__PURE__ */ import_react.default.createElement(Success, { ...rest, ...afterQueryData });
+  }
+  NamedCell.displayName = displayName;
+  return (props) => {
+    return /* @__PURE__ */ import_react.default.createElement(NamedCell, { ...props });
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createFragmentCell
+});

package/dist/cjs/components/cell/createFragmentCell.test.js

@@ -0,0 +1,235 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var import_react = __toESM(require("react"), 1);
+var import_react2 = require("@testing-library/react");
+var import_graphql = require("graphql");
+var import_vitest = require("vitest");
+var import_fragmentRegistry = require("../../apollo/fragmentRegistry.js");
+var import_GraphQLHooksProvider = require("../GraphQLHooksProvider.js");
+var import_createCell = require("./createCell.js");
+const AUTHOR_FRAGMENT = (0, import_graphql.parse)(`
+  fragment AuthorCell_author on User {
+    email
+    fullName
+  }
+`);
+(0, import_vitest.describe)("createFragmentCell", () => {
+  (0, import_vitest.beforeAll)(() => {
+    globalThis.RWJS_ENV = {
+      RWJS_EXP_STREAMING_SSR: false
+    };
+  });
+  (0, import_vitest.test)("renders Success with data from its data prop", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      FRAGMENT: AUTHOR_FRAGMENT,
+      Success: ({ author }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "By ", author.fullName)
+    });
+    (0, import_react2.render)(
+      // No useFragment hook registered, so the Cell falls back to reading
+      // data straight off the `author` prop
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: null, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(
+        TestCell,
+        {
+          author: { __typename: "User", id: 1, fullName: "Story Teller" }
+        }
+      ))
+    );
+    import_react2.screen.getByText(/^By Story Teller$/);
+  });
+  (0, import_vitest.test)("prefers complete data from the useFragment hook", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      FRAGMENT: AUTHOR_FRAGMENT,
+      Success: ({ author }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "By ", author.fullName)
+    });
+    const myUseFragmentHook = (options) => {
+      (0, import_vitest.expect)(options.fragmentName).toEqual("AuthorCell_author");
+      (0, import_vitest.expect)(options.from).toEqual({ __typename: "User", id: 1 });
+      return {
+        data: { fullName: "Cache Dweller" },
+        complete: true
+      };
+    };
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(
+        import_GraphQLHooksProvider.GraphQLHooksProvider,
+        {
+          useQuery: null,
+          useMutation: null,
+          useFragment: myUseFragmentHook
+        },
+        /* @__PURE__ */ import_react.default.createElement(TestCell, { author: { __typename: "User", id: 1 } })
+      )
+    );
+    import_react2.screen.getByText(/^By Cache Dweller$/);
+  });
+  (0, import_vitest.test)("falls back to the data prop for incomplete useFragment reads", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      FRAGMENT: AUTHOR_FRAGMENT,
+      Success: ({ author }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "By ", author.fullName)
+    });
+    const myUseFragmentHook = () => {
+      return { data: void 0, complete: false };
+    };
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(
+        import_GraphQLHooksProvider.GraphQLHooksProvider,
+        {
+          useQuery: null,
+          useMutation: null,
+          useFragment: myUseFragmentHook
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          TestCell,
+          {
+            author: { __typename: "User", id: 1, fullName: "Ref Reader" }
+          }
+        )
+      )
+    );
+    import_react2.screen.getByText(/^By Ref Reader$/);
+  });
+  (0, import_vitest.test)("derives the prop name from the fragment type when there is no underscore", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      FRAGMENT: (0, import_graphql.parse)(`
+        fragment AuthorBio on User {
+          bio
+        }
+      `),
+      Success: ({ user }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, user.bio)
+    });
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: null, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, { user: { __typename: "User", id: 1, bio: "Writes things" } }))
+    );
+    import_react2.screen.getByText(/^Writes things$/);
+  });
+  (0, import_vitest.test)("renders Empty when isEmpty says so", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      FRAGMENT: AUTHOR_FRAGMENT,
+      isEmpty: () => true,
+      Empty: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Nothing to see"),
+      Success: ({ author }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "By ", author.fullName)
+    });
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: null, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, { author: { __typename: "User", id: 1, fullName: "Nobody" } }))
+    );
+    import_react2.screen.getByText(/^Nothing to see$/);
+  });
+  (0, import_vitest.test)("applies afterQuery to the fragment data", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      FRAGMENT: AUTHOR_FRAGMENT,
+      afterQuery: (data) => ({
+        author: { ...data.author, fullName: "Changed Name" }
+      }),
+      Success: ({ author }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "By ", author.fullName)
+    });
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: null, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(
+        TestCell,
+        {
+          author: { __typename: "User", id: 1, fullName: "Original Name" }
+        }
+      ))
+    );
+    import_react2.screen.getByText(/^By Changed Name$/);
+  });
+  (0, import_vitest.test)("renders Empty when the data prop is null", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      FRAGMENT: AUTHOR_FRAGMENT,
+      Empty: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "No author"),
+      Success: ({ author }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "By ", author.fullName)
+    });
+    (0, import_react2.render)(
+      // A nullable field, or a partial error with `errorPolicy: 'all'`, can
+      // make the parent pass null here
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: null, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, { author: null }))
+    );
+    import_react2.screen.getByText(/^No author$/);
+  });
+  (0, import_vitest.test)("renders Success with null data when the data prop is null and there is no Empty", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      FRAGMENT: AUTHOR_FRAGMENT,
+      Success: ({ author }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "By ", author?.fullName ?? "unknown")
+    });
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: null, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, { author: null }))
+    );
+    import_react2.screen.getByText(/^By unknown$/);
+  });
+  (0, import_vitest.test)("throws a helpful error naming the prop when it is not passed", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      FRAGMENT: AUTHOR_FRAGMENT,
+      Success: ({ author }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "By ", author.fullName),
+      displayName: "AuthorCell"
+    });
+    const consoleErrorSpy = import_vitest.vi.spyOn(console, "error").mockImplementation(() => {
+    });
+    try {
+      (0, import_vitest.expect)(() => {
+        (0, import_react2.render)(
+          /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: null, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
+        );
+      }).toThrow(/`author` prop/);
+    } finally {
+      consoleErrorSpy.mockRestore();
+    }
+  });
+  (0, import_vitest.test)("stays a query Cell when both QUERY and FRAGMENT are exported", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query AuthorQuery { author { fullName } }",
+      FRAGMENT: AUTHOR_FRAGMENT,
+      Success: ({ author }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "By ", author.fullName)
+    });
+    const myUseQueryHook = () => {
+      return { data: { author: { fullName: "Query Result" } } };
+    };
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
+    );
+    import_react2.screen.getByText(/^By Query Result$/);
+  });
+  (0, import_vitest.test)("registers the FRAGMENT even when the Cell stays a query Cell", () => {
+    (0, import_createCell.createCell)({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query MixedExportQuery { author { fullName } }",
+      // Using a unique fragment name since the registry is shared between
+      // tests
+      FRAGMENT: (0, import_graphql.parse)(`
+        fragment MixedExportCell_author on User {
+          fullName
+        }
+      `),
+      Success: ({ author }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "By ", author.fullName)
+    });
+    (0, import_vitest.expect)(import_fragmentRegistry.fragmentRegistry.lookup("MixedExportCell_author")).toBeTruthy();
+  });
+  (0, import_vitest.test)("throws when the FRAGMENT export is not a fragment", () => {
+    (0, import_vitest.expect)(
+      () => (0, import_createCell.createCell)({
+        FRAGMENT: (0, import_graphql.parse)("query FindAuthor { author { id } }"),
+        Success: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "hello")
+      })
+    ).toThrow(/fragment definition/);
+  });
+});

package/dist/cjs/components/cell/createSuspendingCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createSuspendingCell.d.ts","sourceRoot":"","sources":["../../../../src/components/cell/createSuspendingCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAYvC,OAAO,KAAK,EACV,eAAe,EAIhB,MAAM,gBAAgB,CAAA;AAGvB,KAAK,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AACrC;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,SAAS,SAAS,MAAM,EACxB,aAAa,SAAS,MAAM,EAE5B,eAAe,EAAE,eAAe,CAAC,MAAM,EAAE,aAAa,CAAC,GACtD,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAqIrB"}
+{"version":3,"file":"createSuspendingCell.d.ts","sourceRoot":"","sources":["../../../../src/components/cell/createSuspendingCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAYvC,OAAO,KAAK,EACV,eAAe,EAIhB,MAAM,gBAAgB,CAAA;AAGvB,KAAK,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AACrC;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,SAAS,SAAS,MAAM,EACxB,aAAa,SAAS,MAAM,EAE5B,eAAe,EAAE,eAAe,CAAC,MAAM,EAAE,aAAa,CAAC,GACtD,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAiJrB"}

package/dist/cjs/components/cell/createSuspendingCell.js

@@ -59,6 +59,12 @@ function createSuspendingCell(createCellProps) {
     Success,
     displayName = "Cell"
   } = createCellProps;
+  if (!QUERY) {
+    throw new Error(
+      `Can't create a Cell (${displayName}) without a QUERY or FRAGMENT export`
+    );
+  }
+  const cellQuery = QUERY;
   function SuspendingSuccess(props) {
     const { queryRef, suspenseQueryResult, userProps } = props;
     const { data, networkStatus } = (0, import_GraphQLHooksProvider.useReadQuery)(queryRef);
@@ -90,7 +96,7 @@ function createSuspendingCell(createCellProps) {
   return (props) => {
     const { children: _, ...variables } = props;
     const options = beforeQuery(variables);
-    const query = typeof QUERY === "function" ? QUERY(options) : QUERY;
+    const query = typeof cellQuery === "function" ? cellQuery(options) : cellQuery;
     const [queryRef, other] = (0, import_GraphQLHooksProvider.useBackgroundQuery)(query, options);
     const client = (0, import_hooks.useApolloClient)();
     const suspenseQueryResult = {

package/dist/cjs/index.d.ts

@@ -2,9 +2,11 @@ import './global.web-auto-imports.js';
 import './config.js';
 export { FatalErrorBoundary } from './components/FatalErrorBoundary.js';
 export { FetchConfigProvider, useFetchConfig, } from './components/FetchConfigProvider.js';
-export { GraphQLHooksProvider, useQuery, useMutation, useSubscription, } from './components/GraphQLHooksProvider.js';
+export { GraphQLHooksProvider, useQuery, useMutation, useSubscription, useFragment, } from './components/GraphQLHooksProvider.js';
+export type { FragmentHookOptions, FragmentHookResult, } from './components/GraphQLHooksProvider.js';
 export * from './components/cell/CellCacheContext.js';
 export { createCell } from './components/cell/createCell.js';
+export { createFragmentCell } from './components/cell/createFragmentCell.js';
 export type { CellProps, CellFailureProps, CellLoadingProps, CellSuccessProps, CellSuccessData, } from './components/cell/cellTypes.js';
 export * from './graphql.js';
 export * from './components/RedwoodProvider.js';

package/dist/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AACrC,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAA;AAEvE,OAAO,EACL,mBAAmB,EACnB,cAAc,GACf,MAAM,qCAAqC,CAAA;AAC5C,OAAO,EACL,oBAAoB,EACpB,QAAQ,EACR,WAAW,EACX,eAAe,GAChB,MAAM,sCAAsC,CAAA;AAE7C,cAAc,uCAAuC,CAAA;AAErD,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA;AAE5D,YAAY,EACV,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,GAChB,MAAM,gCAAgC,CAAA;AAEvC,cAAc,cAAc,CAAA;AAE5B,cAAc,iCAAiC,CAAA;AAE/C,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE,MAAM,EAAE,CAAA;AAEjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AAErC,cAAc,8BAA8B,CAAA;AAE5C,YAAY,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AACrC,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAA;AAEvE,OAAO,EACL,mBAAmB,EACnB,cAAc,GACf,MAAM,qCAAqC,CAAA;AAC5C,OAAO,EACL,oBAAoB,EACpB,QAAQ,EACR,WAAW,EACX,eAAe,EACf,WAAW,GACZ,MAAM,sCAAsC,CAAA;AAC7C,YAAY,EACV,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,sCAAsC,CAAA;AAE7C,cAAc,uCAAuC,CAAA;AAErD,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAE5E,YAAY,EACV,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,GAChB,MAAM,gCAAgC,CAAA;AAEvC,cAAc,cAAc,CAAA;AAE5B,cAAc,iCAAiC,CAAA;AAE/C,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE,MAAM,EAAE,CAAA;AAEjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AAErC,cAAc,8BAA8B,CAAA;AAE5C,YAAY,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAA"}

package/dist/cjs/index.js

@@ -25,7 +25,9 @@ __export(index_exports, {
   Head: () => import_react_helmet.Helmet,
   Helmet: () => import_react_helmet.Helmet,
   createCell: () => import_createCell.createCell,
+  createFragmentCell: () => import_createFragmentCell.createFragmentCell,
   useFetchConfig: () => import_FetchConfigProvider.useFetchConfig,
+  useFragment: () => import_GraphQLHooksProvider.useFragment,
   useMutation: () => import_GraphQLHooksProvider.useMutation,
   useQuery: () => import_GraphQLHooksProvider.useQuery,
   useSubscription: () => import_GraphQLHooksProvider.useSubscription
@@ -38,6 +40,7 @@ var import_FetchConfigProvider = require("./components/FetchConfigProvider.js");
 var import_GraphQLHooksProvider = require("./components/GraphQLHooksProvider.js");
 __reExport(index_exports, require("./components/cell/CellCacheContext.js"), module.exports);
 var import_createCell = require("./components/cell/createCell.js");
+var import_createFragmentCell = require("./components/cell/createFragmentCell.js");
 __reExport(index_exports, require("./graphql.js"), module.exports);
 __reExport(index_exports, require("./components/RedwoodProvider.js"), module.exports);
 __reExport(index_exports, require("./components/MetaTags.js"), module.exports);
@@ -54,7 +57,9 @@ __reExport(index_exports, require("./components/ServerInject.js"), module.export
   Head,
   Helmet,
   createCell,
+  createFragmentCell,
   useFetchConfig,
+  useFragment,
   useMutation,
   useQuery,
   useSubscription,

package/dist/components/GraphQLHooksProvider.d.ts

@@ -16,6 +16,25 @@ type DefaultUseQueryType = <TData = any, TVariables extends OperationVariables =
 type DefaultUseMutationType = <TData = any, TVariables = GraphQLOperationVariables>(mutation: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: GraphQLMutationHookOptions<TData, TVariables>) => MutationOperationResult<TData, TVariables>;
 type DefaultUseSubscriptionType = <TData = any, TVariables extends OperationVariables = GraphQLOperationVariables>(subscription: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: GraphQLSubscriptionHookOptions<TData, TVariables>) => SubscriptionOperationResult<TData, TVariables>;
 type DefaultUseSuspenseType = <TData = any, TVariables extends OperationVariables = GraphQLOperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: GraphQLSuspenseQueryHookOptions<TData, TVariables>) => SuspenseQueryOperationResult<TData, TVariables>;
+export interface FragmentHookOptions {
+    fragment: DocumentNode;
+    fragmentName?: string;
+    /**
+     * The object to read the fragment data for. Usually a cache reference like
+     * `{ __typename: 'User', id: 1 }`, but any object that the GraphQL client
+     * can identify works.
+     */
+    from: Record<string, unknown>;
+}
+export interface FragmentHookResult<TData = any> {
+    /**
+     * The fragment data read from the client's cache, or `undefined` if the
+     * cache doesn't (yet) contain complete data for the fragment.
+     */
+    data: TData | undefined;
+    complete: boolean;
+}
+type DefaultUseFragmentType = <TData = any>(options: FragmentHookOptions) => FragmentHookResult<TData>;
 export interface GraphQLHooks<TuseQuery = DefaultUseQueryType, TuseMutation = DefaultUseMutationType, TuseSubscription = DefaultUseSubscriptionType, TuseSuspenseQuery = DefaultUseSuspenseType> {
     useQuery: TuseQuery;
     useMutation: TuseMutation;
@@ -23,6 +42,13 @@ export interface GraphQLHooks<TuseQuery = DefaultUseQueryType, TuseMutation = De
     useSuspenseQuery: TuseSuspenseQuery;
     useBackgroundQuery: typeof apolloUseBackgroundQuery;
     useReadQuery: typeof apolloUseReadQuery;
+    /**
+     * Synchronously read fragment data from the GraphQL client's cache.
+     * Optional so that custom GraphQL clients don't have to provide an
+     * implementation. Fragment Cells fall back to reading data from their
+     * data prop when this reports an incomplete result.
+     */
+    useFragment?: DefaultUseFragmentType;
 }
 export declare const GraphQLHooksContext: React.Context<GraphQLHooks<DefaultUseQueryType, DefaultUseMutationType, DefaultUseSubscriptionType, DefaultUseSuspenseType>>;
 interface GraphQlHooksProviderProps<TuseQuery = DefaultUseQueryType, TuseMutation = DefaultUseMutationType, TuseSubscription = DefaultUseSubscriptionType, TuseSuspenseQuery = DefaultUseSuspenseType> extends GraphQLHooks<TuseQuery, TuseMutation, TuseSubscription, TuseSuspenseQuery> {
@@ -35,11 +61,17 @@ interface GraphQlHooksProviderProps<TuseQuery = DefaultUseQueryType, TuseMutatio
  *
  * @todo Let the user pass in the additional type for options.
  */
-export declare const GraphQLHooksProvider: <TuseQuery extends DefaultUseQueryType, TuseMutation extends DefaultUseMutationType>({ useQuery, useMutation, useSubscription, useSuspenseQuery, useBackgroundQuery, useReadQuery, children, }: GraphQlHooksProviderProps<TuseQuery, TuseMutation>) => React.JSX.Element;
+export declare const GraphQLHooksProvider: <TuseQuery extends DefaultUseQueryType, TuseMutation extends DefaultUseMutationType>({ useQuery, useMutation, useSubscription, useSuspenseQuery, useBackgroundQuery, useReadQuery, useFragment, children, }: GraphQlHooksProviderProps<TuseQuery, TuseMutation>) => React.JSX.Element;
 export declare function useQuery<TData = any, TVariables extends OperationVariables = GraphQLOperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: GraphQLQueryHookOptions<TData, TVariables>): QueryOperationResult<TData, TVariables>;
 export declare function useMutation<TData = any, TVariables = GraphQLOperationVariables>(mutation: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: GraphQLMutationHookOptions<TData, TVariables>): MutationOperationResult<TData, TVariables>;
 export declare function useSubscription<TData = any, TVariables extends OperationVariables = GraphQLOperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: GraphQLSubscriptionHookOptions<TData, TVariables>): SubscriptionOperationResult<TData, TVariables>;
 export declare function useSuspenseQuery<TData = any, TVariables extends OperationVariables = GraphQLOperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: GraphQLSuspenseQueryHookOptions<TData, TVariables>): SuspenseQueryOperationResult<TData, TVariables>;
 export declare const useBackgroundQuery: typeof apolloUseBackgroundQuery<any>;
 export declare const useReadQuery: typeof apolloUseReadQuery;
+/**
+ * Read fragment data from the GraphQL client's cache without firing a
+ * network request. Used by fragment Cells (Cells that export `FRAGMENT`
+ * instead of `QUERY`).
+ */
+export declare function useFragment<TData = any>(options: FragmentHookOptions): FragmentHookResult<TData>;
 //# sourceMappingURL=GraphQLHooksProvider.d.ts.map

package/dist/components/GraphQLHooksProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GraphQLHooksProvider.d.ts","sourceRoot":"","sources":["../../src/components/GraphQLHooksProvider.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"GraphQLHooksProvider.d.ts","sourceRoot":"","sources":["../../src/components/GraphQLHooksProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EACV,kBAAkB,EAClB,kBAAkB,IAAI,wBAAwB,EAC9C,YAAY,IAAI,kBAAkB,EACnC,MAAM,gBAAgB,CAAA;AACvB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAA;AAC1E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAE3C,YAAY,EAAE,iBAAiB,EAAE,CAAA;AAEjC;;;;;;;;GAQG;AAEH,KAAK,mBAAmB,GAAG,CACzB,KAAK,GAAG,GAAG,EACX,UAAU,SAAS,kBAAkB,GAAG,yBAAyB,EAEjE,KAAK,EAAE,YAAY,GAAG,iBAAiB,CAAC,KAAK,EAAE,UAAU,CAAC,EAC1D,OAAO,CAAC,EAAE,uBAAuB,CAAC,KAAK,EAAE,UAAU,CAAC,KACjD,oBAAoB,CAAC,KAAK,EAAE,UAAU,CAAC,CAAA;AAE5C,KAAK,sBAAsB,GAAG,CAC5B,KAAK,GAAG,GAAG,EACX,UAAU,GAAG,yBAAyB,EAEtC,QAAQ,EAAE,YAAY,GAAG,iBAAiB,CAAC,KAAK,EAAE,UAAU,CAAC,EAC7D,OAAO,CAAC,EAAE,0BAA0B,CAAC,KAAK,EAAE,UAAU,CAAC,KACpD,uBAAuB,CAAC,KAAK,EAAE,UAAU,CAAC,CAAA;AAE/C,KAAK,0BAA0B,GAAG,CAChC,KAAK,GAAG,GAAG,EACX,UAAU,SAAS,kBAAkB,GAAG,yBAAyB,EAEjE,YAAY,EAAE,YAAY,GAAG,iBAAiB,CAAC,KAAK,EAAE,UAAU,CAAC,EACjE,OAAO,CAAC,EAAE,8BAA8B,CAAC,KAAK,EAAE,UAAU,CAAC,KACxD,2BAA2B,CAAC,KAAK,EAAE,UAAU,CAAC,CAAA;AAEnD,KAAK,sBAAsB,GAAG,CAC5B,KAAK,GAAG,GAAG,EACX,UAAU,SAAS,kBAAkB,GAAG,yBAAyB,EAEjE,KAAK,EAAE,YAAY,GAAG,iBAAiB,CAAC,KAAK,EAAE,UAAU,CAAC,EAC1D,OAAO,CAAC,EAAE,+BAA+B,CAAC,KAAK,EAAE,UAAU,CAAC,KACzD,4BAA4B,CAAC,KAAK,EAAE,UAAU,CAAC,CAAA;AAEpD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,YAAY,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAC9B;AAED,MAAM,WAAW,kBAAkB,CAAC,KAAK,GAAG,GAAG;IAC7C;;;OAGG;IACH,IAAI,EAAE,KAAK,GAAG,SAAS,CAAA;IACvB,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,KAAK,sBAAsB,GAAG,CAAC,KAAK,GAAG,GAAG,EACxC,OAAO,EAAE,mBAAmB,KACzB,kBAAkB,CAAC,KAAK,CAAC,CAAA;AAW9B,MAAM,WAAW,YAAY,CAC3B,SAAS,GAAG,mBAAmB,EAC/B,YAAY,GAAG,sBAAsB,EACrC,gBAAgB,GAAG,0BAA0B,EAC7C,iBAAiB,GAAG,sBAAsB;IAE1C,QAAQ,EAAE,SAAS,CAAA;IACnB,WAAW,EAAE,YAAY,CAAA;IACzB,eAAe,EAAE,gBAAgB,CAAA;IACjC,gBAAgB,EAAE,iBAAiB,CAAA;IAGnC,kBAAkB,EAAE,OAAO,wBAAwB,CAAA;IACnD,YAAY,EAAE,OAAO,kBAAkB,CAAA;IACvC;;;;;OAKG;IACH,WAAW,CAAC,EAAE,sBAAsB,CAAA;CACrC;AAED,eAAO,MAAM,mBAAmB,8HAoC9B,CAAA;AAEF,UAAU,yBAAyB,CACjC,SAAS,GAAG,mBAAmB,EAC/B,YAAY,GAAG,sBAAsB,EACrC,gBAAgB,GAAG,0BAA0B,EAC7C,iBAAiB,GAAG,sBAAsB,CAC1C,SAAQ,YAAY,CACpB,SAAS,EACT,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,CAClB;IACC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAC/B,SAAS,SAAS,mBAAmB,EACrC,YAAY,SAAS,sBAAsB,EAC3C,wHASC,yBAAyB,CAAC,SAAS,EAAE,YAAY,CAAC,sBAgBpD,CAAA;AAED,wBAAgB,QAAQ,CACtB,KAAK,GAAG,GAAG,EACX,UAAU,SAAS,kBAAkB,GAAG,yBAAyB,EAEjE,KAAK,EAAE,YAAY,GAAG,iBAAiB,CAAC,KAAK,EAAE,UAAU,CAAC,EAC1D,OAAO,CAAC,EAAE,uBAAuB,CAAC,KAAK,EAAE,UAAU,CAAC,GACnD,oBAAoB,CAAC,KAAK,EAAE,UAAU,CAAC,CAKzC;AAED,wBAAgB,WAAW,CACzB,KAAK,GAAG,GAAG,EACX,UAAU,GAAG,yBAAyB,EAEtC,QAAQ,EAAE,YAAY,GAAG,iBAAiB,CAAC,KAAK,EAAE,UAAU,CAAC,EAC7D,OAAO,CAAC,EAAE,0BAA0B,CAAC,KAAK,EAAE,UAAU,CAAC,GACtD,uBAAuB,CAAC,KAAK,EAAE,UAAU,CAAC,CAK5C;AAED,wBAAgB,eAAe,CAC7B,KAAK,GAAG,GAAG,EACX,UAAU,SAAS,kBAAkB,GAAG,yBAAyB,EAEjE,KAAK,EAAE,YAAY,GAAG,iBAAiB,CAAC,KAAK,EAAE,UAAU,CAAC,EAC1D,OAAO,CAAC,EAAE,8BAA8B,CAAC,KAAK,EAAE,UAAU,CAAC,GAC1D,2BAA2B,CAAC,KAAK,EAAE,UAAU,CAAC,CAKhD;AAED,wBAAgB,gBAAgB,CAC9B,KAAK,GAAG,GAAG,EACX,UAAU,SAAS,kBAAkB,GAAG,yBAAyB,EAEjE,KAAK,EAAE,YAAY,GAAG,iBAAiB,CAAC,KAAK,EAAE,UAAU,CAAC,EAC1D,OAAO,CAAC,EAAE,+BAA+B,CAAC,KAAK,EAAE,UAAU,CAAC,GAC3D,4BAA4B,CAAC,KAAK,EAAE,UAAU,CAAC,CAKjD;AAED,eAAO,MAAM,kBAAkB,EAAE,OAAO,wBAAwB,CAAC,GAAG,CAOnE,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,OAAO,kBAEjC,CAAA;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,GAAG,GAAG,EACrC,OAAO,EAAE,mBAAmB,GAC3B,kBAAkB,CAAC,KAAK,CAAC,CAK3B"}

package/dist/components/GraphQLHooksProvider.js

@@ -1,4 +1,7 @@
 import React from "react";
+const incompleteFragmentRead = () => {
+  return { data: void 0, complete: false };
+};
 const GraphQLHooksContext = React.createContext({
   useQuery: () => {
     throw new Error(
@@ -30,7 +33,8 @@ const GraphQLHooksContext = React.createContext({
     throw new Error(
       "You must register a useReadQuery hook via the `GraphQLHooksProvider`."
     );
-  }
+  },
+  useFragment: incompleteFragmentRead
 });
 const GraphQLHooksProvider = ({
   useQuery: useQuery2,
@@ -39,6 +43,7 @@ const GraphQLHooksProvider = ({
   useSuspenseQuery: useSuspenseQuery2,
   useBackgroundQuery: useBackgroundQuery2,
   useReadQuery: useReadQuery2,
+  useFragment: useFragment2,
   children
 }) => {
   return /* @__PURE__ */ React.createElement(
@@ -50,7 +55,8 @@ const GraphQLHooksProvider = ({
         useSubscription: useSubscription2,
         useSuspenseQuery: useSuspenseQuery2,
         useBackgroundQuery: useBackgroundQuery2,
-        useReadQuery: useReadQuery2
+        useReadQuery: useReadQuery2,
+        useFragment: useFragment2 ?? incompleteFragmentRead
       }
     },
     children
@@ -82,10 +88,15 @@ const useBackgroundQuery = (...args) => {
 const useReadQuery = (...args) => {
   return React.useContext(GraphQLHooksContext).useReadQuery(...args);
 };
+function useFragment(options) {
+  const useFragmentHook = React.useContext(GraphQLHooksContext).useFragment ?? incompleteFragmentRead;
+  return useFragmentHook(options);
+}
 export {
   GraphQLHooksContext,
   GraphQLHooksProvider,
   useBackgroundQuery,
+  useFragment,
   useMutation,
   useQuery,
   useReadQuery,

package/dist/components/cell/cellTypes.d.ts

@@ -80,8 +80,21 @@ export interface CreateCellProps<CellProps, CellVariables> {
     /**
      * The GraphQL syntax tree to execute or function to call that returns it.
      * If `QUERY` is a function, it's called with the result of `beforeQuery`.
+     *
+     * Either `QUERY` or `FRAGMENT` must be provided.
+     */
+    QUERY?: DocumentNode | ((variables: Record<string, unknown>) => DocumentNode);
+    /**
+     * A GraphQL fragment that declares this Cell's data requirements. Fragment
+     * Cells don't fire their own query. Instead a parent Cell spreads the
+     * fragment in its `QUERY` and passes the fetched data object down via a
+     * prop named after the fragment (`AuthorCell_author` -> `author`). The
+     * fragment is automatically registered with the GraphQL client's fragment
+     * registry, so parent queries can spread it by name.
+     *
+     * Either `QUERY` or `FRAGMENT` must be provided.
      */
-    QUERY: DocumentNode | ((variables: Record<string, unknown>) => DocumentNode);
+    FRAGMENT?: DocumentNode;
     /**
      * Parse `props` into query variables. Most of the time `props` are appropriate variables as is.
      */

package/dist/components/cell/cellTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cellTypes.d.ts","sourceRoot":"","sources":["../../../src/components/cell/cellTypes.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"cellTypes.d.ts","sourceRoot":"","sources":["../../../src/components/cell/cellTypes.ts"],"names":[],"mappings":"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"}

package/dist/components/cell/createCell.d.ts

@@ -1,10 +1,4 @@
 import React from 'react';
 import type { CreateCellProps } from './cellTypes.js';
-import { createSuspendingCell } from './createSuspendingCell.js';
-export declare const createCell: typeof createSuspendingCell | typeof createNonSuspendingCell;
-/**
- * Creates a Cell out of a GraphQL query and components that track to its lifecycle.
- */
-declare function createNonSuspendingCell<CellProps extends Record<string, unknown>, CellVariables extends Record<string, unknown>>({ QUERY, beforeQuery, afterQuery, isEmpty, Loading, Failure, Empty, Success, displayName, }: CreateCellProps<CellProps, CellVariables>): React.FC<CellProps>;
-export {};
+export declare function createCell<CellProps extends Record<string, unknown>, CellVariables extends Record<string, unknown>>(createCellProps: CreateCellProps<CellProps, CellVariables>): React.FC<CellProps>;
 //# sourceMappingURL=createCell.d.ts.map

package/dist/components/cell/createCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createCell.d.ts","sourceRoot":"","sources":["../../../src/components/cell/createCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAIhE,eAAO,MAAM,UAAU,8DAEI,CAAA;AAE3B;;GAEG;AACH,iBAAS,uBAAuB,CAC9B,SAAS,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACzC,aAAa,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC7C,EACA,KAAK,EACL,WAWE,EACF,UAA2B,EAC3B,OAAqB,EACrB,OAA+B,EAC/B,OAAO,EACP,KAAK,EACL,OAAO,EACP,WAAoB,GACrB,EAAE,eAAe,CAAC,SAAS,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAuIjE"}
+{"version":3,"file":"createCell.d.ts","sourceRoot":"","sources":["../../../src/components/cell/createCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAKrD,wBAAgB,UAAU,CACxB,SAAS,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACzC,aAAa,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAE7C,eAAe,EAAE,eAAe,CAAC,SAAS,EAAE,aAAa,CAAC,GACzD,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAiCrB"}