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

package/dist/components/cell/createCell.js

@@ -3,9 +3,22 @@ import { fragmentRegistry } from "../../apollo/fragmentRegistry.js";
 import { getOperationName } from "../../graphql.js";
 import { useQuery } from "../GraphQLHooksProvider.js";
 import { useCellCacheContext } from "./CellCacheContext.js";
+import { createFragmentCell } from "./createFragmentCell.js";
 import { createSuspendingCell } from "./createSuspendingCell.js";
 import { isDataEmpty } from "./isCellEmpty.js";
-const createCell = RWJS_ENV.RWJS_EXP_STREAMING_SSR ? createSuspendingCell : createNonSuspendingCell;
+function createCell(createCellProps) {
+  if (createCellProps.FRAGMENT) {
+    if (!createCellProps.QUERY) {
+      return createFragmentCell(createCellProps);
+    }
+    fragmentRegistry.register(createCellProps.FRAGMENT);
+  }
+  if (RWJS_ENV.RWJS_EXP_STREAMING_SSR) {
+    const suspendingCellProps = createCellProps;
+    return createSuspendingCell(suspendingCellProps);
+  }
+  return createNonSuspendingCell(createCellProps);
+}
 function createNonSuspendingCell({
   QUERY,
   beforeQuery = (props) => ({
@@ -28,10 +41,16 @@ function createNonSuspendingCell({
   Success,
   displayName = "Cell"
 }) {
+  if (!QUERY) {
+    throw new Error(
+      `Can't create a Cell (${displayName}) without a QUERY or FRAGMENT export`
+    );
+  }
+  const cellQuery = QUERY;
   function NamedCell(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;
     let {
       // eslint-disable-next-line prefer-const
       error,

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { CreateCellProps } from './cellTypes.js';
+/**
+ * Creates a Cell out of a GraphQL fragment and components that render its
+ * data.
+ *
+ * Fragment Cells don't fire queries of their own. A parent Cell spreads the
+ * fragment in its QUERY and passes the matching slice of the query result
+ * down via a prop named after the fragment (`AuthorCell_author` -> `author`).
+ * `Success` receives the data as that same prop. The data is read
+ * synchronously, so fragment Cells never render `Loading`.
+ *
+ * When the GraphQL client supports it (Apollo does), the fragment data is
+ * read from the client's cache, so the Cell re-renders when other queries or
+ * mutations update the underlying entity. If the cache read is incomplete,
+ * the passed-in object itself is used as the data snapshot.
+ */
+export declare function createFragmentCell<CellProps extends Record<string, unknown>, CellVariables extends Record<string, unknown>>({ FRAGMENT, afterQuery, isEmpty, Empty, Success, displayName, }: CreateCellProps<CellProps, CellVariables>): React.FC<CellProps>;
+//# sourceMappingURL=createFragmentCell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createFragmentCell.d.ts","sourceRoot":"","sources":["../../../src/components/cell/createFragmentCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAqDrD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAChC,SAAS,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACzC,aAAa,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC7C,EACA,QAAQ,EACR,UAA2B,EAC3B,OAAqB,EACrB,KAAK,EACL,OAAO,EACP,WAAoB,GACrB,EAAE,eAAe,CAAC,SAAS,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAkEjE"}

package/dist/components/cell/createFragmentCell.js

@@ -0,0 +1,74 @@
+import React from "react";
+import { Kind } from "graphql";
+import { fragmentRegistry } from "../../apollo/fragmentRegistry.js";
+import { useFragment } from "../GraphQLHooksProvider.js";
+import { isDataEmpty } from "./isCellEmpty.js";
+function getFragmentDefinition(fragment, displayName) {
+  const fragmentDefinition = fragment.definitions.find(
+    (definition) => definition.kind === 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 = 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);
+  fragmentRegistry.register(fragment);
+  function NamedCell(props) {
+    const { children: _, [propName]: rawSlice, ...rest } = props;
+    const dataRef = isDataRef(rawSlice) ? rawSlice : void 0;
+    const fragmentResult = 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 }) && Empty) {
+      return /* @__PURE__ */ React.createElement(Empty, { ...rest, ...afterQueryData });
+    }
+    return /* @__PURE__ */ React.createElement(Success, { ...rest, ...afterQueryData });
+  }
+  NamedCell.displayName = displayName;
+  return (props) => {
+    return /* @__PURE__ */ React.createElement(NamedCell, { ...props });
+  };
+}
+export {
+  createFragmentCell
+};

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

@@ -0,0 +1,212 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { parse } from "graphql";
+import { vi, describe, beforeAll, test, expect } from "vitest";
+import { fragmentRegistry } from "../../apollo/fragmentRegistry.js";
+import { GraphQLHooksProvider } from "../GraphQLHooksProvider.js";
+import { createCell } from "./createCell.js";
+const AUTHOR_FRAGMENT = parse(`
+  fragment AuthorCell_author on User {
+    email
+    fullName
+  }
+`);
+describe("createFragmentCell", () => {
+  beforeAll(() => {
+    globalThis.RWJS_ENV = {
+      RWJS_EXP_STREAMING_SSR: false
+    };
+  });
+  test("renders Success with data from its data prop", () => {
+    const TestCell = createCell({
+      FRAGMENT: AUTHOR_FRAGMENT,
+      Success: ({ author }) => /* @__PURE__ */ React.createElement(React.Fragment, null, "By ", author.fullName)
+    });
+    render(
+      // No useFragment hook registered, so the Cell falls back to reading
+      // data straight off the `author` prop
+      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: null, useMutation: null }, /* @__PURE__ */ React.createElement(
+        TestCell,
+        {
+          author: { __typename: "User", id: 1, fullName: "Story Teller" }
+        }
+      ))
+    );
+    screen.getByText(/^By Story Teller$/);
+  });
+  test("prefers complete data from the useFragment hook", () => {
+    const TestCell = createCell({
+      FRAGMENT: AUTHOR_FRAGMENT,
+      Success: ({ author }) => /* @__PURE__ */ React.createElement(React.Fragment, null, "By ", author.fullName)
+    });
+    const myUseFragmentHook = (options) => {
+      expect(options.fragmentName).toEqual("AuthorCell_author");
+      expect(options.from).toEqual({ __typename: "User", id: 1 });
+      return {
+        data: { fullName: "Cache Dweller" },
+        complete: true
+      };
+    };
+    render(
+      /* @__PURE__ */ React.createElement(
+        GraphQLHooksProvider,
+        {
+          useQuery: null,
+          useMutation: null,
+          useFragment: myUseFragmentHook
+        },
+        /* @__PURE__ */ React.createElement(TestCell, { author: { __typename: "User", id: 1 } })
+      )
+    );
+    screen.getByText(/^By Cache Dweller$/);
+  });
+  test("falls back to the data prop for incomplete useFragment reads", () => {
+    const TestCell = createCell({
+      FRAGMENT: AUTHOR_FRAGMENT,
+      Success: ({ author }) => /* @__PURE__ */ React.createElement(React.Fragment, null, "By ", author.fullName)
+    });
+    const myUseFragmentHook = () => {
+      return { data: void 0, complete: false };
+    };
+    render(
+      /* @__PURE__ */ React.createElement(
+        GraphQLHooksProvider,
+        {
+          useQuery: null,
+          useMutation: null,
+          useFragment: myUseFragmentHook
+        },
+        /* @__PURE__ */ React.createElement(
+          TestCell,
+          {
+            author: { __typename: "User", id: 1, fullName: "Ref Reader" }
+          }
+        )
+      )
+    );
+    screen.getByText(/^By Ref Reader$/);
+  });
+  test("derives the prop name from the fragment type when there is no underscore", () => {
+    const TestCell = createCell({
+      FRAGMENT: parse(`
+        fragment AuthorBio on User {
+          bio
+        }
+      `),
+      Success: ({ user }) => /* @__PURE__ */ React.createElement(React.Fragment, null, user.bio)
+    });
+    render(
+      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: null, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, { user: { __typename: "User", id: 1, bio: "Writes things" } }))
+    );
+    screen.getByText(/^Writes things$/);
+  });
+  test("renders Empty when isEmpty says so", () => {
+    const TestCell = createCell({
+      FRAGMENT: AUTHOR_FRAGMENT,
+      isEmpty: () => true,
+      Empty: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Nothing to see"),
+      Success: ({ author }) => /* @__PURE__ */ React.createElement(React.Fragment, null, "By ", author.fullName)
+    });
+    render(
+      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: null, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, { author: { __typename: "User", id: 1, fullName: "Nobody" } }))
+    );
+    screen.getByText(/^Nothing to see$/);
+  });
+  test("applies afterQuery to the fragment data", () => {
+    const TestCell = createCell({
+      FRAGMENT: AUTHOR_FRAGMENT,
+      afterQuery: (data) => ({
+        author: { ...data.author, fullName: "Changed Name" }
+      }),
+      Success: ({ author }) => /* @__PURE__ */ React.createElement(React.Fragment, null, "By ", author.fullName)
+    });
+    render(
+      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: null, useMutation: null }, /* @__PURE__ */ React.createElement(
+        TestCell,
+        {
+          author: { __typename: "User", id: 1, fullName: "Original Name" }
+        }
+      ))
+    );
+    screen.getByText(/^By Changed Name$/);
+  });
+  test("renders Empty when the data prop is null", () => {
+    const TestCell = createCell({
+      FRAGMENT: AUTHOR_FRAGMENT,
+      Empty: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "No author"),
+      Success: ({ author }) => /* @__PURE__ */ React.createElement(React.Fragment, null, "By ", author.fullName)
+    });
+    render(
+      // A nullable field, or a partial error with `errorPolicy: 'all'`, can
+      // make the parent pass null here
+      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: null, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, { author: null }))
+    );
+    screen.getByText(/^No author$/);
+  });
+  test("renders Success with null data when the data prop is null and there is no Empty", () => {
+    const TestCell = createCell({
+      FRAGMENT: AUTHOR_FRAGMENT,
+      Success: ({ author }) => /* @__PURE__ */ React.createElement(React.Fragment, null, "By ", author?.fullName ?? "unknown")
+    });
+    render(
+      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: null, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, { author: null }))
+    );
+    screen.getByText(/^By unknown$/);
+  });
+  test("throws a helpful error naming the prop when it is not passed", () => {
+    const TestCell = createCell({
+      FRAGMENT: AUTHOR_FRAGMENT,
+      Success: ({ author }) => /* @__PURE__ */ React.createElement(React.Fragment, null, "By ", author.fullName),
+      displayName: "AuthorCell"
+    });
+    const consoleErrorSpy = vi.spyOn(console, "error").mockImplementation(() => {
+    });
+    try {
+      expect(() => {
+        render(
+          /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: null, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
+        );
+      }).toThrow(/`author` prop/);
+    } finally {
+      consoleErrorSpy.mockRestore();
+    }
+  });
+  test("stays a query Cell when both QUERY and FRAGMENT are exported", () => {
+    const TestCell = createCell({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query AuthorQuery { author { fullName } }",
+      FRAGMENT: AUTHOR_FRAGMENT,
+      Success: ({ author }) => /* @__PURE__ */ React.createElement(React.Fragment, null, "By ", author.fullName)
+    });
+    const myUseQueryHook = () => {
+      return { data: { author: { fullName: "Query Result" } } };
+    };
+    render(
+      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
+    );
+    screen.getByText(/^By Query Result$/);
+  });
+  test("registers the FRAGMENT even when the Cell stays a query Cell", () => {
+    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: parse(`
+        fragment MixedExportCell_author on User {
+          fullName
+        }
+      `),
+      Success: ({ author }) => /* @__PURE__ */ React.createElement(React.Fragment, null, "By ", author.fullName)
+    });
+    expect(fragmentRegistry.lookup("MixedExportCell_author")).toBeTruthy();
+  });
+  test("throws when the FRAGMENT export is not a fragment", () => {
+    expect(
+      () => createCell({
+        FRAGMENT: parse("query FindAuthor { author { id } }"),
+        Success: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "hello")
+      })
+    ).toThrow(/fragment definition/);
+  });
+});

package/dist/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/components/cell/createSuspendingCell.js

@@ -26,6 +26,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 } = useReadQuery(queryRef);
@@ -57,7 +63,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] = useBackgroundQuery(query, options);
     const client = useApolloClient();
     const suspenseQueryResult = {

package/dist/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/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/index.js

@@ -9,10 +9,12 @@ import {
   GraphQLHooksProvider,
   useQuery,
   useMutation,
-  useSubscription
+  useSubscription,
+  useFragment
 } from "./components/GraphQLHooksProvider.js";
 export * from "./components/cell/CellCacheContext.js";
 import { createCell } from "./components/cell/createCell.js";
+import { createFragmentCell } from "./components/cell/createFragmentCell.js";
 export * from "./graphql.js";
 export * from "./components/RedwoodProvider.js";
 export * from "./components/MetaTags.js";
@@ -28,7 +30,9 @@ export {
   Helmet as Head,
   Helmet,
   createCell,
+  createFragmentCell,
   useFetchConfig,
+  useFragment,
   useMutation,
   useQuery,
   useSubscription

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cedarjs/web",
-  "version": "6.0.0-canary.2645",
+  "version": "6.0.0-canary.2647",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cedarjs/cedar.git",
@@ -140,7 +140,7 @@
   },
   "dependencies": {
     "@apollo/client": "3.14.1",
-    "@cedarjs/server-store": "6.0.0-canary.2645",
+    "@cedarjs/server-store": "6.0.0-canary.2647",
     "@dr.pogodin/react-helmet": "2.0.4",
     "@whatwg-node/fetch": "0.10.13",
     "apollo-upload-client": "18.0.1",
@@ -159,9 +159,9 @@
     "@babel/core": "^7.26.10",
     "@babel/plugin-transform-runtime": "7.29.7",
     "@babel/runtime": "7.29.7",
-    "@cedarjs/auth": "6.0.0-canary.2645",
-    "@cedarjs/framework-tools": "6.0.0-canary.2645",
-    "@cedarjs/internal": "6.0.0-canary.2645",
+    "@cedarjs/auth": "6.0.0-canary.2647",
+    "@cedarjs/framework-tools": "6.0.0-canary.2647",
+    "@cedarjs/internal": "6.0.0-canary.2647",
     "@rollup/plugin-babel": "6.1.0",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",