@cedarjs/web 6.0.0-canary.2652 → 6.0.0-canary.2657

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

@@ -22,26 +22,31 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var import_react = __toESM(require("react"), 1);
+var import_hooks = require("@apollo/client/react/hooks/hooks.cjs");
 var import_react2 = require("@testing-library/react");
 var import_vitest = require("vitest");
-var import_GraphQLHooksProvider = require("../GraphQLHooksProvider.js");
 var import_createCell = require("./createCell.js");
+import_vitest.vi.mock("@apollo/client/react/hooks/hooks.cjs", () => ({
+  useQuery: import_vitest.vi.fn()
+}));
+const mockUseQuery = import_hooks.useQuery;
 (0, import_vitest.describe)("createCell", () => {
   (0, import_vitest.beforeAll)(() => {
     globalThis.RWJS_ENV = {
       RWJS_EXP_STREAMING_SSR: false
     };
   });
+  (0, import_vitest.beforeEach)(() => {
+    mockUseQuery.mockReset();
+  });
   (0, import_vitest.test)("Renders a static Success component", () => {
     const TestCell = (0, import_createCell.createCell)({
       // @ts-expect-error - Purposefully using a plain string here.
       QUERY: "query TestQuery { answer }",
       Success: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Great success!")
     });
-    const myUseQueryHook = () => ({ data: {} });
-    (0, import_react2.render)(
-      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
-    );
+    mockUseQuery.mockImplementation(() => ({ data: {} }));
+    (0, import_react2.render)(/* @__PURE__ */ import_react.default.createElement(TestCell, null));
     import_react2.screen.getByText(/^Great success!$/);
   });
   (0, import_vitest.test)("Renders Success with data", () => {
@@ -50,12 +55,10 @@ var import_createCell = require("./createCell.js");
       QUERY: "query TestQuery { answer }",
       Success: ({ answer }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("dl", null, /* @__PURE__ */ import_react.default.createElement("dt", null, "What's the meaning of life?"), /* @__PURE__ */ import_react.default.createElement("dd", null, answer)))
     });
-    const myUseQueryHook = () => {
+    mockUseQuery.mockImplementation(() => {
       return { data: { answer: 42 } };
-    };
-    (0, import_react2.render)(
-      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
-    );
+    });
+    (0, import_react2.render)(/* @__PURE__ */ import_react.default.createElement(TestCell, null));
     import_react2.screen.getByText(/^What's the meaning of life\?$/);
     import_react2.screen.getByText(/^42$/);
   });
@@ -66,17 +69,15 @@ var import_createCell = require("./createCell.js");
       Empty: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "No users or posts"),
       Success: ({ users, posts }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", null, users.length > 0 ? /* @__PURE__ */ import_react.default.createElement("ul", null, users.map(({ name }) => /* @__PURE__ */ import_react.default.createElement("li", { key: name }, name))) : "no users"), /* @__PURE__ */ import_react.default.createElement("div", null, posts.length > 0 ? /* @__PURE__ */ import_react.default.createElement("ul", null, posts.map(({ title }) => /* @__PURE__ */ import_react.default.createElement("li", { key: title }, title))) : "no posts"))
     });
-    const myUseQueryHook = () => {
+    mockUseQuery.mockImplementation(() => {
       return {
         data: {
           users: [],
           posts: [{ title: "bazinga" }, { title: "kittens" }]
         }
       };
-    };
-    (0, import_react2.render)(
-      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
-    );
+    });
+    (0, import_react2.render)(/* @__PURE__ */ import_react.default.createElement(TestCell, null));
     import_react2.screen.getByText(/bazinga/);
     import_react2.screen.getByText(/kittens/);
   });
@@ -86,10 +87,8 @@ var import_createCell = require("./createCell.js");
       QUERY: "query TestQuery { answer }",
       Success: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Great success!")
     });
-    const myUseQueryHook = () => ({ loading: true });
-    (0, import_react2.render)(
-      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
-    );
+    mockUseQuery.mockImplementation(() => ({ loading: true }));
+    (0, import_react2.render)(/* @__PURE__ */ import_react.default.createElement(TestCell, null));
     import_react2.screen.getByText(/^Loading...$/);
   });
   (0, import_vitest.test)("Renders custom Loading when there is no data", () => {
@@ -99,10 +98,8 @@ var import_createCell = require("./createCell.js");
       Success: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Great success!"),
       Loading: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Fetching answer...")
     });
-    const myUseQueryHook = () => ({ loading: true });
-    (0, import_react2.render)(
-      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
-    );
+    mockUseQuery.mockImplementation(() => ({ loading: true }));
+    (0, import_react2.render)(/* @__PURE__ */ import_react.default.createElement(TestCell, null));
     import_react2.screen.getByText(/^Fetching answer...$/);
   });
   (0, import_vitest.test)("Renders Success even when `loading` is true if there is data", () => {
@@ -112,10 +109,8 @@ var import_createCell = require("./createCell.js");
       Success: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Great success!"),
       Loading: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Fetching answer...")
     });
-    const myUseQueryHook = () => ({ loading: true, data: {} });
-    (0, import_react2.render)(
-      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
-    );
+    mockUseQuery.mockImplementation(() => ({ loading: true, data: {} }));
+    (0, import_react2.render)(/* @__PURE__ */ import_react.default.createElement(TestCell, null));
     import_react2.screen.getByText(/^Great success!$/);
   });
   (0, import_vitest.test)("Renders Empty if available, and data field is null", () => {
@@ -125,10 +120,11 @@ var import_createCell = require("./createCell.js");
       Success: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Great success!"),
       Empty: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "No one knows")
     });
-    const myUseQueryHook = () => ({ loading: true, data: { answer: null } });
-    (0, import_react2.render)(
-      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
-    );
+    mockUseQuery.mockImplementation(() => ({
+      loading: true,
+      data: { answer: null }
+    }));
+    (0, import_react2.render)(/* @__PURE__ */ import_react.default.createElement(TestCell, null));
     import_react2.screen.getByText(/^No one knows$/);
   });
   (0, import_vitest.test)("Renders Empty if available, and data field is an empty array", () => {
@@ -138,10 +134,11 @@ var import_createCell = require("./createCell.js");
       Success: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Great success!"),
       Empty: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "No one knows")
     });
-    const myUseQueryHook = () => ({ loading: true, data: { answers: [] } });
-    (0, import_react2.render)(
-      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
-    );
+    mockUseQuery.mockImplementation(() => ({
+      loading: true,
+      data: { answers: [] }
+    }));
+    (0, import_react2.render)(/* @__PURE__ */ import_react.default.createElement(TestCell, null));
     import_react2.screen.getByText(/^No one knows$/);
   });
   (0, import_vitest.test)("Renders Success even if data is empty when no Empty is available", () => {
@@ -150,10 +147,11 @@ var import_createCell = require("./createCell.js");
       QUERY: "query TestQuery { answer }",
       Success: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Empty success")
     });
-    const myUseQueryHook = () => ({ loading: true, data: { answer: null } });
-    (0, import_react2.render)(
-      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
-    );
+    mockUseQuery.mockImplementation(() => ({
+      loading: true,
+      data: { answer: null }
+    }));
+    (0, import_react2.render)(/* @__PURE__ */ import_react.default.createElement(TestCell, null));
     import_react2.screen.getByText(/^Empty success$/);
   });
   (0, import_vitest.test)("Allows passing children to Success", () => {
@@ -162,9 +160,9 @@ var import_createCell = require("./createCell.js");
       QUERY: "query TestQuery { answer }",
       Success: ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Look at my beautiful ", children)
     });
-    const myUseQueryHook = () => ({ data: {} });
+    mockUseQuery.mockImplementation(() => ({ data: {} }));
     (0, import_react2.render)(
-      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null, /* @__PURE__ */ import_react.default.createElement("div", null, "\u{1F986}")))
+      /* @__PURE__ */ import_react.default.createElement(TestCell, null, /* @__PURE__ */ import_react.default.createElement("div", null, "\u{1F986}"))
     );
     import_react2.screen.getByText(/^Look at my beautiful$/);
     import_react2.screen.getByText(/^🦆$/);
@@ -179,12 +177,10 @@ var import_createCell = require("./createCell.js");
       }`,
       Success: ({ greeting }) => /* @__PURE__ */ import_react.default.createElement("p", null, greeting)
     });
-    const myUseQueryHook = (_query, options) => {
+    mockUseQuery.mockImplementation((_query, options) => {
       return { data: { greeting: `Hello ${options.variables.name}!` } };
-    };
-    (0, import_react2.render)(
-      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, { name: "Bob" }))
-    );
+    });
+    (0, import_react2.render)(/* @__PURE__ */ import_react.default.createElement(TestCell, { name: "Bob" }));
     import_react2.screen.getByText(/^Hello Bob!$/);
   });
   (0, import_vitest.test)("Allows QUERY to be a function", () => {
@@ -198,16 +194,16 @@ var import_createCell = require("./createCell.js");
       },
       Success: ({ name }) => /* @__PURE__ */ import_react.default.createElement("p", null, "Call me ", name)
     });
-    const myUseQueryHook = (query) => {
+    mockUseQuery.mockImplementation((query) => {
       if (query.includes("BeastQuery")) {
         return { data: { name: "Boogeyman" } };
       } else if (query.includes("HeroQuery")) {
         return { data: { name: "Lara Croft" } };
       }
       return { data: { name: "John Doe" } };
-    };
+    });
     (0, import_react2.render)(
-      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, { character: "BEAST" }), /* @__PURE__ */ import_react.default.createElement(TestCell, { character: "HERO" }))
+      /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(TestCell, { character: "BEAST" }), /* @__PURE__ */ import_react.default.createElement(TestCell, { character: "HERO" }))
     );
     import_react2.screen.getByText(/^Call me Boogeyman$/);
     import_react2.screen.getByText(/^Call me Lara Croft$/);
@@ -220,10 +216,8 @@ var import_createCell = require("./createCell.js");
       Success: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Great success!"),
       Loading: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Fetching answer...")
     });
-    const myUseQueryHook = () => ({ error: true });
-    (0, import_react2.render)(
-      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
-    );
+    mockUseQuery.mockImplementation(() => ({ error: true }));
+    (0, import_react2.render)(/* @__PURE__ */ import_react.default.createElement(TestCell, null));
     import_react2.screen.getByText(/^Sad face :\($/);
   });
   (0, import_vitest.test)("Passes error to Failure component", () => {
@@ -234,10 +228,10 @@ var import_createCell = require("./createCell.js");
       Success: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Great success!"),
       Loading: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Fetching answer...")
     });
-    const myUseQueryHook = () => ({ error: { msg: "System malfunction" } });
-    (0, import_react2.render)(
-      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
-    );
+    mockUseQuery.mockImplementation(() => ({
+      error: { msg: "System malfunction" }
+    }));
+    (0, import_react2.render)(/* @__PURE__ */ import_react.default.createElement(TestCell, null));
     import_react2.screen.getByText(/^{"msg":"System malfunction"}$/);
   });
   (0, import_vitest.test)("Passes error and errorCode to Failure component", () => {
@@ -248,13 +242,11 @@ var import_createCell = require("./createCell.js");
       Success: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Great success!"),
       Loading: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Fetching answer...")
     });
-    const myUseQueryHook = () => ({
+    mockUseQuery.mockImplementation(() => ({
       error: { msg: "System malfunction" },
       errorCode: "SIMON_SAYS_NO"
-    });
-    (0, import_react2.render)(
-      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
-    );
+    }));
+    (0, import_react2.render)(/* @__PURE__ */ import_react.default.createElement(TestCell, null));
     import_react2.screen.getByText(/^{"msg":"System malfunction"},code:SIMON_SAYS_NO$/);
   });
   (0, import_vitest.test)("Passes children to Failure", () => {
@@ -263,9 +255,9 @@ var import_createCell = require("./createCell.js");
       QUERY: "query TestQuery { answer }",
       Failure: ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "I'm a failure ", children)
     });
-    const myUseQueryHook = () => ({ error: {} });
+    mockUseQuery.mockImplementation(() => ({ error: {} }));
     (0, import_react2.render)(
-      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null, /* @__PURE__ */ import_react.default.createElement("div", null, "Child")))
+      /* @__PURE__ */ import_react.default.createElement(TestCell, null, /* @__PURE__ */ import_react.default.createElement("div", null, "Child"))
     );
     import_react2.screen.getByText(/^I'm a failure$/);
     import_react2.screen.getByText(/^Child$/);
@@ -277,14 +269,14 @@ var import_createCell = require("./createCell.js");
       Success: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Great success!"),
       Loading: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Fetching answer...")
     });
-    const myUseQueryHook = () => ({ error: { message: "200 GraphQL" } });
+    mockUseQuery.mockImplementation(() => ({
+      error: { message: "200 GraphQL" }
+    }));
     const err = console.error;
     console.error = import_vitest.vi.fn();
     let error;
     try {
-      (0, import_react2.render)(
-        /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
-      );
+      (0, import_react2.render)(/* @__PURE__ */ import_react.default.createElement(TestCell, null));
     } catch (e) {
       error = e;
     }
@@ -299,13 +291,11 @@ var import_createCell = require("./createCell.js");
       Empty: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Got nothing"),
       isEmpty: () => true
     });
-    const myUseQueryHook = () => ({
+    mockUseQuery.mockImplementation(() => ({
       data: {},
       loading: false
-    });
-    (0, import_react2.render)(
-      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
-    );
+    }));
+    (0, import_react2.render)(/* @__PURE__ */ import_react.default.createElement(TestCell, null));
     import_react2.screen.getByText(/^Got nothing$/);
   });
   (0, import_vitest.test)("Allows mixing isDataEmpty with custom logic", () => {
@@ -316,13 +306,11 @@ var import_createCell = require("./createCell.js");
       Empty: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Got nothing"),
       isEmpty: (data, { isDataEmpty }) => isDataEmpty(data) || data.answer === "0"
     });
-    const myUseQueryHook = () => ({
+    mockUseQuery.mockImplementation(() => ({
       data: { answer: "0" },
       loading: false
-    });
-    (0, import_react2.render)(
-      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
-    );
+    }));
+    (0, import_react2.render)(/* @__PURE__ */ import_react.default.createElement(TestCell, null));
     import_react2.screen.getByText(/^Got nothing$/);
   });
   (0, import_vitest.test)("Allows overriding variables in beforeQuery", () => {
@@ -340,12 +328,10 @@ var import_createCell = require("./createCell.js");
         }
       })
     });
-    const myUseQueryHook = (_query, options) => {
+    mockUseQuery.mockImplementation((_query, options) => {
       return { data: { greeting: `Hello ${options.variables.name}!` } };
-    };
-    (0, import_react2.render)(
-      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
-    );
+    });
+    (0, import_react2.render)(/* @__PURE__ */ import_react.default.createElement(TestCell, null));
     import_react2.screen.getByText(/^Hello Bob!$/);
   });
 });

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

@@ -1 +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"}
+{"version":3,"file":"createFragmentCell.d.ts","sourceRoot":"","sources":["../../../../src/components/cell/createFragmentCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,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/cjs/components/cell/createFragmentCell.js

@@ -34,7 +34,6 @@ 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(
@@ -80,7 +79,7 @@ function createFragmentCell({
   function NamedCell(props) {
     const { children: _, [propName]: rawSlice, ...rest } = props;
     const dataRef = isDataRef(rawSlice) ? rawSlice : void 0;
-    const fragmentResult = (0, import_GraphQLHooksProvider.useFragment)({
+    const fragmentResult = (0, import_fragmentRegistry.useFragment)({
       fragment,
       fragmentName,
       from: dataRef ?? {}

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

@@ -22,12 +22,27 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var import_react = __toESM(require("react"), 1);
+var import_client = require("@apollo/client");
+var import_hooks = require("@apollo/client/react/hooks/hooks.cjs");
 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");
+import_vitest.vi.mock("@apollo/client", async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...actual,
+    useApolloClient: import_vitest.vi.fn(),
+    useFragment: import_vitest.vi.fn()
+  };
+});
+import_vitest.vi.mock("@apollo/client/react/hooks/hooks.cjs", () => ({
+  useQuery: import_vitest.vi.fn()
+}));
+const mockUseApolloClient = import_client.useApolloClient;
+const mockApolloUseFragment = import_client.useFragment;
+const mockUseQuery = import_hooks.useQuery;
 const AUTHOR_FRAGMENT = (0, import_graphql.parse)(`
   fragment AuthorCell_author on User {
     email
@@ -40,71 +55,59 @@ const AUTHOR_FRAGMENT = (0, import_graphql.parse)(`
       RWJS_EXP_STREAMING_SSR: false
     };
   });
+  (0, import_vitest.beforeEach)(() => {
+    mockApolloUseFragment.mockReset();
+    mockUseApolloClient.mockReset();
+    mockUseApolloClient.mockReturnValue({
+      cache: {
+        identify: (obj) => obj.__typename && obj.id !== void 0 ? `${obj.__typename}:${obj.id}` : void 0
+      }
+    });
+    mockApolloUseFragment.mockReturnValue({ data: void 0, complete: 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(
+      /* @__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", () => {
+  (0, import_vitest.test)("prefers complete data from the cache", () => {
     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) => {
+    mockApolloUseFragment.mockImplementation((options) => {
       (0, import_vitest.expect)(options.fragmentName).toEqual("AuthorCell_author");
-      (0, import_vitest.expect)(options.from).toEqual({ __typename: "User", id: 1 });
+      (0, import_vitest.expect)(options.from).toEqual("User: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 } })
-      )
-    );
+    });
+    (0, import_react2.render)(/* @__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", () => {
+  (0, import_vitest.test)("falls back to the data prop for incomplete cache 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 };
-    };
+    mockApolloUseFragment.mockReturnValue({ data: void 0, complete: false });
     (0, import_react2.render)(
       /* @__PURE__ */ import_react.default.createElement(
-        import_GraphQLHooksProvider.GraphQLHooksProvider,
+        TestCell,
         {
-          useQuery: null,
-          useMutation: null,
-          useFragment: myUseFragmentHook
-        },
-        /* @__PURE__ */ import_react.default.createElement(
-          TestCell,
-          {
-            author: { __typename: "User", id: 1, fullName: "Ref Reader" }
-          }
-        )
+          author: { __typename: "User", id: 1, fullName: "Ref Reader" }
+        }
       )
     );
     import_react2.screen.getByText(/^By Ref Reader$/);
@@ -119,7 +122,7 @@ const AUTHOR_FRAGMENT = (0, import_graphql.parse)(`
       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" } }))
+      /* @__PURE__ */ import_react.default.createElement(TestCell, { user: { __typename: "User", id: 1, bio: "Writes things" } })
     );
     import_react2.screen.getByText(/^Writes things$/);
   });
@@ -131,7 +134,7 @@ const AUTHOR_FRAGMENT = (0, import_graphql.parse)(`
       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" } }))
+      /* @__PURE__ */ import_react.default.createElement(TestCell, { author: { __typename: "User", id: 1, fullName: "Nobody" } })
     );
     import_react2.screen.getByText(/^Nothing to see$/);
   });
@@ -144,12 +147,12 @@ const AUTHOR_FRAGMENT = (0, import_graphql.parse)(`
       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(
+      /* @__PURE__ */ import_react.default.createElement(
         TestCell,
         {
           author: { __typename: "User", id: 1, fullName: "Original Name" }
         }
-      ))
+      )
     );
     import_react2.screen.getByText(/^By Changed Name$/);
   });
@@ -159,11 +162,7 @@ const AUTHOR_FRAGMENT = (0, import_graphql.parse)(`
       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 }))
-    );
+    (0, import_react2.render)(/* @__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", () => {
@@ -171,9 +170,7 @@ const AUTHOR_FRAGMENT = (0, import_graphql.parse)(`
       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 }))
-    );
+    (0, import_react2.render)(/* @__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", () => {
@@ -186,9 +183,7 @@ const AUTHOR_FRAGMENT = (0, import_graphql.parse)(`
     });
     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))
-        );
+        (0, import_react2.render)(/* @__PURE__ */ import_react.default.createElement(TestCell, null));
       }).toThrow(/`author` prop/);
     } finally {
       consoleErrorSpy.mockRestore();
@@ -201,12 +196,10 @@ const AUTHOR_FRAGMENT = (0, import_graphql.parse)(`
       FRAGMENT: AUTHOR_FRAGMENT,
       Success: ({ author }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "By ", author.fullName)
     });
-    const myUseQueryHook = () => {
+    mockUseQuery.mockImplementation(() => {
       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))
-    );
+    });
+    (0, import_react2.render)(/* @__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", () => {

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,CAiJrB"}
+{"version":3,"file":"createSuspendingCell.d.ts","sourceRoot":"","sources":["../../../../src/components/cell/createSuspendingCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAWvC,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

@@ -33,7 +33,6 @@ __export(createSuspendingCell_exports, {
 module.exports = __toCommonJS(createSuspendingCell_exports);
 var import_react = __toESM(require("react"), 1);
 var import_hooks = require("@apollo/client/react/hooks/hooks.cjs");
-var import_GraphQLHooksProvider = require("../GraphQLHooksProvider.js");
 var import_CellErrorBoundary = require("./CellErrorBoundary.js");
 var import_isCellEmpty = require("./isCellEmpty.js");
 function createSuspendingCell(createCellProps) {
@@ -67,7 +66,7 @@ function createSuspendingCell(createCellProps) {
   const cellQuery = QUERY;
   function SuspendingSuccess(props) {
     const { queryRef, suspenseQueryResult, userProps } = props;
-    const { data, networkStatus } = (0, import_GraphQLHooksProvider.useReadQuery)(queryRef);
+    const { data, networkStatus } = (0, import_hooks.useReadQuery)(queryRef);
     const afterQueryData = afterQuery(data);
     const queryResultWithNetworkStatus = {
       ...suspenseQueryResult,
@@ -97,7 +96,7 @@ function createSuspendingCell(createCellProps) {
     const { children: _, ...variables } = props;
     const options = beforeQuery(variables);
     const query = typeof cellQuery === "function" ? cellQuery(options) : cellQuery;
-    const [queryRef, other] = (0, import_GraphQLHooksProvider.useBackgroundQuery)(query, options);
+    const [queryRef, other] = (0, import_hooks.useBackgroundQuery)(query, options);
     const client = (0, import_hooks.useApolloClient)();
     const suspenseQueryResult = {
       client,