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

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

@@ -1,24 +1,29 @@
 import React from "react";
+import { useQuery } from "@apollo/client/react/hooks/hooks.cjs";
 import { render, screen } from "@testing-library/react";
-import { vi, describe, beforeAll, test, expect } from "vitest";
-import { GraphQLHooksProvider } from "../GraphQLHooksProvider.js";
+import { vi, describe, beforeAll, beforeEach, test, expect } from "vitest";
 import { createCell } from "./createCell.js";
+vi.mock("@apollo/client/react/hooks/hooks.cjs", () => ({
+  useQuery: vi.fn()
+}));
+const mockUseQuery = useQuery;
 describe("createCell", () => {
   beforeAll(() => {
     globalThis.RWJS_ENV = {
       RWJS_EXP_STREAMING_SSR: false
     };
   });
+  beforeEach(() => {
+    mockUseQuery.mockReset();
+  });
   test("Renders a static Success component", () => {
     const TestCell = createCell({
       // @ts-expect-error - Purposefully using a plain string here.
       QUERY: "query TestQuery { answer }",
       Success: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Great success!")
     });
-    const myUseQueryHook = () => ({ data: {} });
-    render(
-      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
-    );
+    mockUseQuery.mockImplementation(() => ({ data: {} }));
+    render(/* @__PURE__ */ React.createElement(TestCell, null));
     screen.getByText(/^Great success!$/);
   });
   test("Renders Success with data", () => {
@@ -27,12 +32,10 @@ describe("createCell", () => {
       QUERY: "query TestQuery { answer }",
       Success: ({ answer }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("dl", null, /* @__PURE__ */ React.createElement("dt", null, "What's the meaning of life?"), /* @__PURE__ */ React.createElement("dd", null, answer)))
     });
-    const myUseQueryHook = () => {
+    mockUseQuery.mockImplementation(() => {
       return { data: { answer: 42 } };
-    };
-    render(
-      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
-    );
+    });
+    render(/* @__PURE__ */ React.createElement(TestCell, null));
     screen.getByText(/^What's the meaning of life\?$/);
     screen.getByText(/^42$/);
   });
@@ -43,17 +46,15 @@ describe("createCell", () => {
       Empty: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "No users or posts"),
       Success: ({ users, posts }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", null, users.length > 0 ? /* @__PURE__ */ React.createElement("ul", null, users.map(({ name }) => /* @__PURE__ */ React.createElement("li", { key: name }, name))) : "no users"), /* @__PURE__ */ React.createElement("div", null, posts.length > 0 ? /* @__PURE__ */ React.createElement("ul", null, posts.map(({ title }) => /* @__PURE__ */ React.createElement("li", { key: title }, title))) : "no posts"))
     });
-    const myUseQueryHook = () => {
+    mockUseQuery.mockImplementation(() => {
       return {
         data: {
           users: [],
           posts: [{ title: "bazinga" }, { title: "kittens" }]
         }
       };
-    };
-    render(
-      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
-    );
+    });
+    render(/* @__PURE__ */ React.createElement(TestCell, null));
     screen.getByText(/bazinga/);
     screen.getByText(/kittens/);
   });
@@ -63,10 +64,8 @@ describe("createCell", () => {
       QUERY: "query TestQuery { answer }",
       Success: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Great success!")
     });
-    const myUseQueryHook = () => ({ loading: true });
-    render(
-      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
-    );
+    mockUseQuery.mockImplementation(() => ({ loading: true }));
+    render(/* @__PURE__ */ React.createElement(TestCell, null));
     screen.getByText(/^Loading...$/);
   });
   test("Renders custom Loading when there is no data", () => {
@@ -76,10 +75,8 @@ describe("createCell", () => {
       Success: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Great success!"),
       Loading: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Fetching answer...")
     });
-    const myUseQueryHook = () => ({ loading: true });
-    render(
-      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
-    );
+    mockUseQuery.mockImplementation(() => ({ loading: true }));
+    render(/* @__PURE__ */ React.createElement(TestCell, null));
     screen.getByText(/^Fetching answer...$/);
   });
   test("Renders Success even when `loading` is true if there is data", () => {
@@ -89,10 +86,8 @@ describe("createCell", () => {
       Success: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Great success!"),
       Loading: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Fetching answer...")
     });
-    const myUseQueryHook = () => ({ loading: true, data: {} });
-    render(
-      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
-    );
+    mockUseQuery.mockImplementation(() => ({ loading: true, data: {} }));
+    render(/* @__PURE__ */ React.createElement(TestCell, null));
     screen.getByText(/^Great success!$/);
   });
   test("Renders Empty if available, and data field is null", () => {
@@ -102,10 +97,11 @@ describe("createCell", () => {
       Success: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Great success!"),
       Empty: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "No one knows")
     });
-    const myUseQueryHook = () => ({ loading: true, data: { answer: null } });
-    render(
-      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
-    );
+    mockUseQuery.mockImplementation(() => ({
+      loading: true,
+      data: { answer: null }
+    }));
+    render(/* @__PURE__ */ React.createElement(TestCell, null));
     screen.getByText(/^No one knows$/);
   });
   test("Renders Empty if available, and data field is an empty array", () => {
@@ -115,10 +111,11 @@ describe("createCell", () => {
       Success: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Great success!"),
       Empty: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "No one knows")
     });
-    const myUseQueryHook = () => ({ loading: true, data: { answers: [] } });
-    render(
-      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
-    );
+    mockUseQuery.mockImplementation(() => ({
+      loading: true,
+      data: { answers: [] }
+    }));
+    render(/* @__PURE__ */ React.createElement(TestCell, null));
     screen.getByText(/^No one knows$/);
   });
   test("Renders Success even if data is empty when no Empty is available", () => {
@@ -127,10 +124,11 @@ describe("createCell", () => {
       QUERY: "query TestQuery { answer }",
       Success: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Empty success")
     });
-    const myUseQueryHook = () => ({ loading: true, data: { answer: null } });
-    render(
-      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
-    );
+    mockUseQuery.mockImplementation(() => ({
+      loading: true,
+      data: { answer: null }
+    }));
+    render(/* @__PURE__ */ React.createElement(TestCell, null));
     screen.getByText(/^Empty success$/);
   });
   test("Allows passing children to Success", () => {
@@ -139,9 +137,9 @@ describe("createCell", () => {
       QUERY: "query TestQuery { answer }",
       Success: ({ children }) => /* @__PURE__ */ React.createElement(React.Fragment, null, "Look at my beautiful ", children)
     });
-    const myUseQueryHook = () => ({ data: {} });
+    mockUseQuery.mockImplementation(() => ({ data: {} }));
     render(
-      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null, /* @__PURE__ */ React.createElement("div", null, "\u{1F986}")))
+      /* @__PURE__ */ React.createElement(TestCell, null, /* @__PURE__ */ React.createElement("div", null, "\u{1F986}"))
     );
     screen.getByText(/^Look at my beautiful$/);
     screen.getByText(/^🦆$/);
@@ -156,12 +154,10 @@ describe("createCell", () => {
       }`,
       Success: ({ greeting }) => /* @__PURE__ */ React.createElement("p", null, greeting)
     });
-    const myUseQueryHook = (_query, options) => {
+    mockUseQuery.mockImplementation((_query, options) => {
       return { data: { greeting: `Hello ${options.variables.name}!` } };
-    };
-    render(
-      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, { name: "Bob" }))
-    );
+    });
+    render(/* @__PURE__ */ React.createElement(TestCell, { name: "Bob" }));
     screen.getByText(/^Hello Bob!$/);
   });
   test("Allows QUERY to be a function", () => {
@@ -175,16 +171,16 @@ describe("createCell", () => {
       },
       Success: ({ name }) => /* @__PURE__ */ React.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" } };
-    };
+    });
     render(
-      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, { character: "BEAST" }), /* @__PURE__ */ React.createElement(TestCell, { character: "HERO" }))
+      /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TestCell, { character: "BEAST" }), /* @__PURE__ */ React.createElement(TestCell, { character: "HERO" }))
     );
     screen.getByText(/^Call me Boogeyman$/);
     screen.getByText(/^Call me Lara Croft$/);
@@ -197,10 +193,8 @@ describe("createCell", () => {
       Success: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Great success!"),
       Loading: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Fetching answer...")
     });
-    const myUseQueryHook = () => ({ error: true });
-    render(
-      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
-    );
+    mockUseQuery.mockImplementation(() => ({ error: true }));
+    render(/* @__PURE__ */ React.createElement(TestCell, null));
     screen.getByText(/^Sad face :\($/);
   });
   test("Passes error to Failure component", () => {
@@ -211,10 +205,10 @@ describe("createCell", () => {
       Success: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Great success!"),
       Loading: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Fetching answer...")
     });
-    const myUseQueryHook = () => ({ error: { msg: "System malfunction" } });
-    render(
-      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
-    );
+    mockUseQuery.mockImplementation(() => ({
+      error: { msg: "System malfunction" }
+    }));
+    render(/* @__PURE__ */ React.createElement(TestCell, null));
     screen.getByText(/^{"msg":"System malfunction"}$/);
   });
   test("Passes error and errorCode to Failure component", () => {
@@ -225,13 +219,11 @@ describe("createCell", () => {
       Success: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Great success!"),
       Loading: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Fetching answer...")
     });
-    const myUseQueryHook = () => ({
+    mockUseQuery.mockImplementation(() => ({
       error: { msg: "System malfunction" },
       errorCode: "SIMON_SAYS_NO"
-    });
-    render(
-      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
-    );
+    }));
+    render(/* @__PURE__ */ React.createElement(TestCell, null));
     screen.getByText(/^{"msg":"System malfunction"},code:SIMON_SAYS_NO$/);
   });
   test("Passes children to Failure", () => {
@@ -240,9 +232,9 @@ describe("createCell", () => {
       QUERY: "query TestQuery { answer }",
       Failure: ({ children }) => /* @__PURE__ */ React.createElement(React.Fragment, null, "I'm a failure ", children)
     });
-    const myUseQueryHook = () => ({ error: {} });
+    mockUseQuery.mockImplementation(() => ({ error: {} }));
     render(
-      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null, /* @__PURE__ */ React.createElement("div", null, "Child")))
+      /* @__PURE__ */ React.createElement(TestCell, null, /* @__PURE__ */ React.createElement("div", null, "Child"))
     );
     screen.getByText(/^I'm a failure$/);
     screen.getByText(/^Child$/);
@@ -254,14 +246,14 @@ describe("createCell", () => {
       Success: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Great success!"),
       Loading: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Fetching answer...")
     });
-    const myUseQueryHook = () => ({ error: { message: "200 GraphQL" } });
+    mockUseQuery.mockImplementation(() => ({
+      error: { message: "200 GraphQL" }
+    }));
     const err = console.error;
     console.error = vi.fn();
     let error;
     try {
-      render(
-        /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
-      );
+      render(/* @__PURE__ */ React.createElement(TestCell, null));
     } catch (e) {
       error = e;
     }
@@ -276,13 +268,11 @@ describe("createCell", () => {
       Empty: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Got nothing"),
       isEmpty: () => true
     });
-    const myUseQueryHook = () => ({
+    mockUseQuery.mockImplementation(() => ({
       data: {},
       loading: false
-    });
-    render(
-      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
-    );
+    }));
+    render(/* @__PURE__ */ React.createElement(TestCell, null));
     screen.getByText(/^Got nothing$/);
   });
   test("Allows mixing isDataEmpty with custom logic", () => {
@@ -293,13 +283,11 @@ describe("createCell", () => {
       Empty: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Got nothing"),
       isEmpty: (data, { isDataEmpty }) => isDataEmpty(data) || data.answer === "0"
     });
-    const myUseQueryHook = () => ({
+    mockUseQuery.mockImplementation(() => ({
       data: { answer: "0" },
       loading: false
-    });
-    render(
-      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
-    );
+    }));
+    render(/* @__PURE__ */ React.createElement(TestCell, null));
     screen.getByText(/^Got nothing$/);
   });
   test("Allows overriding variables in beforeQuery", () => {
@@ -317,12 +305,10 @@ describe("createCell", () => {
         }
       })
     });
-    const myUseQueryHook = (_query, options) => {
+    mockUseQuery.mockImplementation((_query, options) => {
       return { data: { greeting: `Hello ${options.variables.name}!` } };
-    };
-    render(
-      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
-    );
+    });
+    render(/* @__PURE__ */ React.createElement(TestCell, null));
     screen.getByText(/^Hello Bob!$/);
   });
 });

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

@@ -1,7 +1,6 @@
 import React from "react";
 import { Kind } from "graphql";
-import { fragmentRegistry } from "../../apollo/fragmentRegistry.js";
-import { useFragment } from "../GraphQLHooksProvider.js";
+import { fragmentRegistry, useFragment } from "../../apollo/fragmentRegistry.js";
 import { isDataEmpty } from "./isCellEmpty.js";
 function getFragmentDefinition(fragment, displayName) {
   const fragmentDefinition = fragment.definitions.find(

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

@@ -1,10 +1,25 @@
 import React from "react";
+import { useApolloClient, useFragment } from "@apollo/client";
+import { useQuery } from "@apollo/client/react/hooks/hooks.cjs";
 import { render, screen } from "@testing-library/react";
 import { parse } from "graphql";
-import { vi, describe, beforeAll, test, expect } from "vitest";
+import { vi, describe, beforeAll, beforeEach, test, expect } from "vitest";
 import { fragmentRegistry } from "../../apollo/fragmentRegistry.js";
-import { GraphQLHooksProvider } from "../GraphQLHooksProvider.js";
 import { createCell } from "./createCell.js";
+vi.mock("@apollo/client", async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...actual,
+    useApolloClient: vi.fn(),
+    useFragment: vi.fn()
+  };
+});
+vi.mock("@apollo/client/react/hooks/hooks.cjs", () => ({
+  useQuery: vi.fn()
+}));
+const mockUseApolloClient = useApolloClient;
+const mockApolloUseFragment = useFragment;
+const mockUseQuery = useQuery;
 const AUTHOR_FRAGMENT = parse(`
   fragment AuthorCell_author on User {
     email
@@ -17,71 +32,59 @@ describe("createFragmentCell", () => {
       RWJS_EXP_STREAMING_SSR: false
     };
   });
+  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 });
+  });
   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(
+      /* @__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", () => {
+  test("prefers complete data from the cache", () => {
     const TestCell = createCell({
       FRAGMENT: AUTHOR_FRAGMENT,
       Success: ({ author }) => /* @__PURE__ */ React.createElement(React.Fragment, null, "By ", author.fullName)
     });
-    const myUseFragmentHook = (options) => {
+    mockApolloUseFragment.mockImplementation((options) => {
       expect(options.fragmentName).toEqual("AuthorCell_author");
-      expect(options.from).toEqual({ __typename: "User", id: 1 });
+      expect(options.from).toEqual("User: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 } })
-      )
-    );
+    });
+    render(/* @__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", () => {
+  test("falls back to the data prop for incomplete cache 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 };
-    };
+    mockApolloUseFragment.mockReturnValue({ data: void 0, complete: false });
     render(
       /* @__PURE__ */ React.createElement(
-        GraphQLHooksProvider,
+        TestCell,
         {
-          useQuery: null,
-          useMutation: null,
-          useFragment: myUseFragmentHook
-        },
-        /* @__PURE__ */ React.createElement(
-          TestCell,
-          {
-            author: { __typename: "User", id: 1, fullName: "Ref Reader" }
-          }
-        )
+          author: { __typename: "User", id: 1, fullName: "Ref Reader" }
+        }
       )
     );
     screen.getByText(/^By Ref Reader$/);
@@ -96,7 +99,7 @@ describe("createFragmentCell", () => {
       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" } }))
+      /* @__PURE__ */ React.createElement(TestCell, { user: { __typename: "User", id: 1, bio: "Writes things" } })
     );
     screen.getByText(/^Writes things$/);
   });
@@ -108,7 +111,7 @@ describe("createFragmentCell", () => {
       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" } }))
+      /* @__PURE__ */ React.createElement(TestCell, { author: { __typename: "User", id: 1, fullName: "Nobody" } })
     );
     screen.getByText(/^Nothing to see$/);
   });
@@ -121,12 +124,12 @@ describe("createFragmentCell", () => {
       Success: ({ author }) => /* @__PURE__ */ React.createElement(React.Fragment, null, "By ", author.fullName)
     });
     render(
-      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: null, useMutation: null }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(
         TestCell,
         {
           author: { __typename: "User", id: 1, fullName: "Original Name" }
         }
-      ))
+      )
     );
     screen.getByText(/^By Changed Name$/);
   });
@@ -136,11 +139,7 @@ describe("createFragmentCell", () => {
       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 }))
-    );
+    render(/* @__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", () => {
@@ -148,9 +147,7 @@ describe("createFragmentCell", () => {
       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 }))
-    );
+    render(/* @__PURE__ */ React.createElement(TestCell, { author: null }));
     screen.getByText(/^By unknown$/);
   });
   test("throws a helpful error naming the prop when it is not passed", () => {
@@ -163,9 +160,7 @@ describe("createFragmentCell", () => {
     });
     try {
       expect(() => {
-        render(
-          /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: null, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
-        );
+        render(/* @__PURE__ */ React.createElement(TestCell, null));
       }).toThrow(/`author` prop/);
     } finally {
       consoleErrorSpy.mockRestore();
@@ -178,12 +173,10 @@ describe("createFragmentCell", () => {
       FRAGMENT: AUTHOR_FRAGMENT,
       Success: ({ author }) => /* @__PURE__ */ React.createElement(React.Fragment, null, "By ", author.fullName)
     });
-    const myUseQueryHook = () => {
+    mockUseQuery.mockImplementation(() => {
       return { data: { author: { fullName: "Query Result" } } };
-    };
-    render(
-      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
-    );
+    });
+    render(/* @__PURE__ */ React.createElement(TestCell, null));
     screen.getByText(/^By Query Result$/);
   });
   test("registers the FRAGMENT even when the Cell stays a query Cell", () => {

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

@@ -1,6 +1,9 @@
 import React, { Suspense } from "react";
-import { useApolloClient } from "@apollo/client/react/hooks/hooks.cjs";
-import { useBackgroundQuery, useReadQuery } from "../GraphQLHooksProvider.js";
+import {
+  useApolloClient,
+  useBackgroundQuery,
+  useReadQuery
+} from "@apollo/client/react/hooks/hooks.cjs";
 import { CellErrorBoundary } from "./CellErrorBoundary.js";
 import { isDataEmpty } from "./isCellEmpty.js";
 function createSuspendingCell(createCellProps) {