@cedarjs/web 5.0.7-next.338 → 5.0.7

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

@@ -0,0 +1,328 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { vi, describe, beforeAll, test, expect } from "vitest";
+import { GraphQLHooksProvider } from "../GraphQLHooksProvider.js";
+import { createCell } from "./createCell.js";
+describe("createCell", () => {
+  beforeAll(() => {
+    globalThis.RWJS_ENV = {
+      RWJS_EXP_STREAMING_SSR: false
+    };
+  });
+  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))
+    );
+    screen.getByText(/^Great success!$/);
+  });
+  test("Renders Success with data", () => {
+    const TestCell = createCell({
+      // @ts-expect-error - Purposefully using a plain string here.
+      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 = () => {
+      return { data: { answer: 42 } };
+    };
+    render(
+      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
+    );
+    screen.getByText(/^What's the meaning of life\?$/);
+    screen.getByText(/^42$/);
+  });
+  test("Renders Success if any of the fields have data (i.e. not just the first)", () => {
+    const TestCell = createCell({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { users { name } posts { title } }",
+      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 = () => {
+      return {
+        data: {
+          users: [],
+          posts: [{ title: "bazinga" }, { title: "kittens" }]
+        }
+      };
+    };
+    render(
+      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
+    );
+    screen.getByText(/bazinga/);
+    screen.getByText(/kittens/);
+  });
+  test("Renders default Loading when there is no data", () => {
+    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 = () => ({ loading: true });
+    render(
+      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
+    );
+    screen.getByText(/^Loading...$/);
+  });
+  test("Renders custom Loading when there is no data", () => {
+    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!"),
+      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))
+    );
+    screen.getByText(/^Fetching answer...$/);
+  });
+  test("Renders Success even when `loading` is true if there is data", () => {
+    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!"),
+      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))
+    );
+    screen.getByText(/^Great success!$/);
+  });
+  test("Renders Empty if available, and data field is null", () => {
+    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!"),
+      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))
+    );
+    screen.getByText(/^No one knows$/);
+  });
+  test("Renders Empty if available, and data field is an empty array", () => {
+    const TestCell = createCell({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { answers }",
+      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))
+    );
+    screen.getByText(/^No one knows$/);
+  });
+  test("Renders Success even if data is empty when no Empty is available", () => {
+    const TestCell = createCell({
+      // @ts-expect-error - Purposefully using a plain string here.
+      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))
+    );
+    screen.getByText(/^Empty success$/);
+  });
+  test("Allows passing children to Success", () => {
+    const TestCell = createCell({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { answer }",
+      Success: ({ children }) => /* @__PURE__ */ React.createElement(React.Fragment, null, "Look at my beautiful ", children)
+    });
+    const myUseQueryHook = () => ({ data: {} });
+    render(
+      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null, /* @__PURE__ */ React.createElement("div", null, "\u{1F986}")))
+    );
+    screen.getByText(/^Look at my beautiful$/);
+    screen.getByText(/^🦆$/);
+  });
+  test("Cell props are passed to the query as variables", () => {
+    const TestCell = createCell({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: `query Greet($name: String!) {
+        greet(name: $name) {
+          greeting
+        }
+      }`,
+      Success: ({ greeting }) => /* @__PURE__ */ React.createElement("p", null, greeting)
+    });
+    const myUseQueryHook = (_query, options) => {
+      return { data: { greeting: `Hello ${options.variables.name}!` } };
+    };
+    render(
+      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, { name: "Bob" }))
+    );
+    screen.getByText(/^Hello Bob!$/);
+  });
+  test("Allows QUERY to be a function", () => {
+    const TestCell = createCell({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: ({ variables }) => {
+        if (variables.character === "BEAST") {
+          return "query BeastQuery { name }";
+        }
+        return "query HeroQuery { name }";
+      },
+      Success: ({ name }) => /* @__PURE__ */ React.createElement("p", null, "Call me ", name)
+    });
+    const myUseQueryHook = (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" }))
+    );
+    screen.getByText(/^Call me Boogeyman$/);
+    screen.getByText(/^Call me Lara Croft$/);
+  });
+  test("Renders Failure when there is an error", () => {
+    const TestCell = createCell({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { answer }",
+      Failure: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Sad face :("),
+      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))
+    );
+    screen.getByText(/^Sad face :\($/);
+  });
+  test("Passes error to Failure component", () => {
+    const TestCell = createCell({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { answer }",
+      Failure: ({ error }) => /* @__PURE__ */ React.createElement(React.Fragment, null, JSON.stringify(error)),
+      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))
+    );
+    screen.getByText(/^{"msg":"System malfunction"}$/);
+  });
+  test("Passes error and errorCode to Failure component", () => {
+    const TestCell = createCell({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { answer }",
+      Failure: ({ error, errorCode }) => /* @__PURE__ */ React.createElement(React.Fragment, null, JSON.stringify(error), ",code:", errorCode),
+      Success: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Great success!"),
+      Loading: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Fetching answer...")
+    });
+    const myUseQueryHook = () => ({
+      error: { msg: "System malfunction" },
+      errorCode: "SIMON_SAYS_NO"
+    });
+    render(
+      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
+    );
+    screen.getByText(/^{"msg":"System malfunction"},code:SIMON_SAYS_NO$/);
+  });
+  test("Passes children to Failure", () => {
+    const TestCell = createCell({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { answer }",
+      Failure: ({ children }) => /* @__PURE__ */ React.createElement(React.Fragment, null, "I'm a failure ", children)
+    });
+    const myUseQueryHook = () => ({ error: {} });
+    render(
+      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null, /* @__PURE__ */ React.createElement("div", null, "Child")))
+    );
+    screen.getByText(/^I'm a failure$/);
+    screen.getByText(/^Child$/);
+  });
+  test("Throws an error when there is an error if no Failure component exists", () => {
+    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!"),
+      Loading: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Fetching answer...")
+    });
+    const myUseQueryHook = () => ({ 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))
+      );
+    } catch (e) {
+      error = e;
+    }
+    expect(error.message).toEqual("200 GraphQL");
+    console.error = err;
+  });
+  test("Allows overriding of default isDataEmpty", () => {
+    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!"),
+      Empty: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Got nothing"),
+      isEmpty: () => true
+    });
+    const myUseQueryHook = () => ({
+      data: {},
+      loading: false
+    });
+    render(
+      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
+    );
+    screen.getByText(/^Got nothing$/);
+  });
+  test("Allows mixing isDataEmpty with custom logic", () => {
+    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!"),
+      Empty: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Got nothing"),
+      isEmpty: (data, { isDataEmpty }) => isDataEmpty(data) || data.answer === "0"
+    });
+    const myUseQueryHook = () => ({
+      data: { answer: "0" },
+      loading: false
+    });
+    render(
+      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
+    );
+    screen.getByText(/^Got nothing$/);
+  });
+  test("Allows overriding variables in beforeQuery", () => {
+    const TestCell = createCell({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: `query Greet($name: String!) {
+        greet(name: $name) {
+          greeting
+        }
+      }`,
+      Success: ({ greeting }) => /* @__PURE__ */ React.createElement("p", null, greeting),
+      beforeQuery: () => ({
+        variables: {
+          name: "Bob"
+        }
+      })
+    });
+    const myUseQueryHook = (_query, options) => {
+      return { data: { greeting: `Hello ${options.variables.name}!` } };
+    };
+    render(
+      /* @__PURE__ */ React.createElement(GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ React.createElement(TestCell, null))
+    );
+    screen.getByText(/^Hello Bob!$/);
+  });
+});

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;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"}
+{"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"}

package/dist/components/cell/createSuspendingCell.js

@@ -1,9 +1,6 @@
 import React, { Suspense } from "react";
-import {
-  useApolloClient,
-  useBackgroundQuery,
-  useReadQuery
-} from "@apollo/client/react/hooks/hooks.cjs";
+import { useApolloClient } from "@apollo/client/react/hooks/hooks.cjs";
+import { useBackgroundQuery, useReadQuery } from "../GraphQLHooksProvider.js";
 import { CellErrorBoundary } from "./CellErrorBoundary.js";
 import { isDataEmpty } from "./isCellEmpty.js";
 function createSuspendingCell(createCellProps) {
@@ -29,12 +26,6 @@ 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);
@@ -66,7 +57,7 @@ function createSuspendingCell(createCellProps) {
   return (props) => {
     const { children: _, ...variables } = props;
     const options = beforeQuery(variables);
-    const query = typeof cellQuery === "function" ? cellQuery(options) : cellQuery;
+    const query = typeof QUERY === "function" ? QUERY(options) : QUERY;
     const [queryRef, other] = useBackgroundQuery(query, options);
     const client = useApolloClient();
     const suspenseQueryResult = {

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

@@ -0,0 +1,92 @@
+import React from "react";
+import { loadErrorMessages, loadDevMessages } from "@apollo/client/dev";
+import { render, screen } from "@testing-library/react";
+import { vi, describe, beforeAll, test } from "vitest";
+import { GraphQLHooksProvider } from "../GraphQLHooksProvider.js";
+import { createSuspendingCell } from "./createSuspendingCell.js";
+vi.mock("@apollo/client/react/hooks/hooks.cjs", () => {
+  return {
+    useApolloClient: vi.fn()
+  };
+});
+describe("createSuspendingCell", () => {
+  beforeAll(() => {
+    globalThis.RWJS_ENV = {
+      RWJS_EXP_STREAMING_SSR: true
+    };
+    loadDevMessages();
+    loadErrorMessages();
+  });
+  const mockedUseBgQuery = (() => {
+    return ["mocked-query-ref", { refetch: vi.fn(), fetchMore: vi.fn() }];
+  });
+  const mockedQueryHook = () => ({ data: {} });
+  test("Renders a static Success component", () => {
+    const TestCell = createSuspendingCell({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { answer }",
+      Success: () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Great success!")
+    });
+    render(
+      /* @__PURE__ */ React.createElement(
+        GraphQLHooksProvider,
+        {
+          useBackgroundQuery: mockedUseBgQuery,
+          useReadQuery: mockedQueryHook
+        },
+        /* @__PURE__ */ React.createElement(TestCell, null)
+      )
+    );
+    screen.getByText(/^Great success!$/);
+  });
+  test("Renders Success with data", () => {
+    const TestCell = createSuspendingCell({
+      // @ts-expect-error - Purposefully using a plain string here.
+      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 = (() => {
+      return { data: { answer: 42 } };
+    });
+    render(
+      /* @__PURE__ */ React.createElement(
+        GraphQLHooksProvider,
+        {
+          useReadQuery: myUseQueryHook,
+          useBackgroundQuery: mockedUseBgQuery
+        },
+        /* @__PURE__ */ React.createElement(TestCell, null)
+      )
+    );
+    screen.getByText(/^What's the meaning of life\?$/);
+    screen.getByText(/^42$/);
+  });
+  test("Renders Success if any of the fields have data (i.e. not just the first)", () => {
+    const TestCell = createSuspendingCell({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { users { name } posts { title } }",
+      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 myReadQueryHook = (() => {
+      return {
+        data: {
+          users: [],
+          posts: [{ title: "bazinga" }, { title: "kittens" }]
+        }
+      };
+    });
+    render(
+      /* @__PURE__ */ React.createElement(
+        GraphQLHooksProvider,
+        {
+          useReadQuery: myReadQueryHook,
+          useBackgroundQuery: mockedUseBgQuery
+        },
+        /* @__PURE__ */ React.createElement(TestCell, null)
+      )
+    );
+    screen.getByText(/bazinga/);
+    screen.getByText(/kittens/);
+  });
+});

package/dist/global.web-auto-imports.d.ts

@@ -10,5 +10,21 @@ declare global {
         RWJS_API_URL: string;
         __REDWOOD__APP_TITLE: string;
     }
+    type GraphQLOperationVariables = Record<string, any>;
+    interface QueryOperationResult<TData = any, TVariables = GraphQLOperationVariables> {
+        data: TData | undefined;
+        loading: boolean;
+    }
+    interface MutationOperationResult<TData, TVariables> {
+    }
+    interface GraphQLQueryHookOptions<TData, TVariables> {
+        variables?: TVariables;
+        [key: string]: any;
+    }
+    export interface GraphQLMutationHookOptions<TData, TVariables> {
+        variables?: TVariables;
+        onCompleted?: (data: TData) => void;
+        [key: string]: any;
+    }
 }
 //# sourceMappingURL=global.web-auto-imports.d.ts.map

package/dist/global.web-auto-imports.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"global.web-auto-imports.d.ts","sourceRoot":"","sources":["../src/global.web-auto-imports.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,OAAO,CAAA;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAK3C,OAAO,CAAC,MAAM,CAAC;IAMb,MAAM,GAAG,EAAE,CACT,MAAM,EAAE,MAAM,GAAG,oBAAoB,GAAG,SAAS,MAAM,EAAE,EACzD,GAAG,IAAI,EAAE,GAAG,EAAE,KACX,YAAY,CAAA;IAIjB,KAAK,KAAK,GAAG,OAAO,MAAM,CAAA;IAE1B,UAAU,MAAM;QACd,8DAA8D;QAC9D,oBAAoB,EAAE,MAAM,CAAA;QAC5B,mDAAmD;QACnD,YAAY,EAAE,MAAM,CAAA;QACpB,oBAAoB,EAAE,MAAM,CAAA;KAC7B;CACF"}
+{"version":3,"file":"global.web-auto-imports.d.ts","sourceRoot":"","sources":["../src/global.web-auto-imports.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,OAAO,CAAA;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAK3C,OAAO,CAAC,MAAM,CAAC;IAMb,MAAM,GAAG,EAAE,CACT,MAAM,EAAE,MAAM,GAAG,oBAAoB,GAAG,SAAS,MAAM,EAAE,EACzD,GAAG,IAAI,EAAE,GAAG,EAAE,KACX,YAAY,CAAA;IAIjB,KAAK,KAAK,GAAG,OAAO,MAAM,CAAA;IAE1B,UAAU,MAAM;QACd,8DAA8D;QAC9D,oBAAoB,EAAE,MAAM,CAAA;QAC5B,mDAAmD;QACnD,YAAY,EAAE,MAAM,CAAA;QACpB,oBAAoB,EAAE,MAAM,CAAA;KAC7B;IAED,KAAK,yBAAyB,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAIpD,UAAU,oBAAoB,CAC5B,KAAK,GAAG,GAAG,EACX,UAAU,GAAG,yBAAyB;QAEtC,IAAI,EAAE,KAAK,GAAG,SAAS,CAAA;QACvB,OAAO,EAAE,OAAO,CAAA;KAGjB;IAID,UAAU,uBAAuB,CAAC,KAAK,EAAE,UAAU;KAAI;IAGvD,UAAU,uBAAuB,CAAC,KAAK,EAAE,UAAU;QACjD,SAAS,CAAC,EAAE,UAAU,CAAA;QACtB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KACnB;IAED,MAAM,WAAW,0BAA0B,CAAC,KAAK,EAAE,UAAU;QAC3D,SAAS,CAAC,EAAE,UAAU,CAAA;QACtB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAA;QACnC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KACnB;CACF"}

package/dist/index.d.ts

@@ -2,15 +2,12 @@ import './global.web-auto-imports.js';
 import './config.js';
 export { FatalErrorBoundary } from './components/FatalErrorBoundary.js';
 export { FetchConfigProvider, useFetchConfig, } from './components/FetchConfigProvider.js';
-export { useQuery, useMutation, useSubscription, } from '@apollo/client/react/hooks/hooks.cjs';
-export { useFragment } from './apollo/fragmentRegistry.js';
-export type { FragmentHookOptions, FragmentHookResult, } from './apollo/fragmentRegistry.js';
+export { GraphQLHooksProvider, useQuery, useMutation, useSubscription, } 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/CedarProvider.js';
+export * from './components/RedwoodProvider.js';
 export * from './components/MetaTags.js';
 export * from './components/Metadata.js';
 import { Helmet } from '@dr.pogodin/react-helmet';
@@ -18,5 +15,5 @@ export { Helmet as Head, Helmet };
 export * from './components/htmlTags.js';
 export * from './routeHooks.types.js';
 export * from './components/ServerInject.js';
-export type { TypedDocumentNode } from '@apollo/client';
+export type { TypedDocumentNode } from './components/GraphQLHooksProvider.js';
 //# sourceMappingURL=index.d.ts.map

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,QAAQ,EACR,WAAW,EACX,eAAe,GAChB,MAAM,sCAAsC,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAC1D,YAAY,EACV,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,8BAA8B,CAAA;AAErC,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,+BAA+B,CAAA;AAE7C,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,gBAAgB,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,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"}

package/dist/index.js

@@ -6,16 +6,15 @@ import {
   useFetchConfig
 } from "./components/FetchConfigProvider.js";
 import {
+  GraphQLHooksProvider,
   useQuery,
   useMutation,
   useSubscription
-} from "@apollo/client/react/hooks/hooks.cjs";
-import { useFragment } from "./apollo/fragmentRegistry.js";
+} 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/CedarProvider.js";
+export * from "./components/RedwoodProvider.js";
 export * from "./components/MetaTags.js";
 export * from "./components/Metadata.js";
 import { Helmet } from "@dr.pogodin/react-helmet";
@@ -25,12 +24,11 @@ export * from "./components/ServerInject.js";
 export {
   FatalErrorBoundary,
   FetchConfigProvider,
+  GraphQLHooksProvider,
   Helmet as Head,
   Helmet,
   createCell,
-  createFragmentCell,
   useFetchConfig,
-  useFragment,
   useMutation,
   useQuery,
   useSubscription

package/dist/package.json

@@ -0,0 +1 @@
+{"type":"module"}