@cedarjs/web 0.0.4

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

@@ -0,0 +1,152 @@
+import type { ComponentProps, JSXElementConstructor } from 'react';
+import type { ApolloClient, NetworkStatus, OperationVariables, QueryRef, UseBackgroundQueryResult } from '@apollo/client';
+import type { DocumentNode } from 'graphql';
+import type { A, L, O, U } from 'ts-toolbelt';
+/**
+ *
+ * If the Cell has a `beforeQuery` function, then the variables are not required,
+ * but instead the arguments of the `beforeQuery` function are required.
+ *
+ * If the Cell does not have a `beforeQuery` function, then the variables are required.
+ *
+ * Note that a query that doesn't take any variables is defined as {[x: string]: never}
+ * The ternary at the end makes sure we don't include it, otherwise it won't allow merging any
+ * other custom props from the Success component.
+ *
+ */
+type CellPropsVariables<Cell, GQLVariables> = Cell extends {
+    beforeQuery: (...args: any[]) => any;
+} ? Parameters<Cell['beforeQuery']>[0] extends unknown ? Record<string, unknown> : Parameters<Cell['beforeQuery']>[0] : GQLVariables extends Record<string, never> ? unknown : GQLVariables;
+/**
+ * Cell component props which is the combination of query variables and Success props.
+ */
+export type CellProps<CellSuccess extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>, GQLResult, CellType, GQLVariables> = A.Compute<Omit<ComponentProps<CellSuccess>, keyof CellPropsVariables<CellType, GQLVariables> | keyof GQLResult | 'updating' | 'queryResult'> & CellPropsVariables<CellType, GQLVariables>>;
+type InputVarProps<T> = T extends {
+    [key: string]: never;
+} ? unknown : T;
+export type CellLoadingProps<TVariables extends OperationVariables = any> = {
+    queryResult?: NonSuspenseCellQueryResult<TVariables, any> | SuspenseCellQueryResult;
+} & InputVarProps<TVariables>;
+export type CellFailureProps<TVariables extends OperationVariables = any> = {
+    queryResult?: NonSuspenseCellQueryResult<TVariables, any> | SuspenseCellQueryResult;
+    error?: QueryOperationResult['error'] | Error;
+    /**
+     * @see {@link https://www.apollographql.com/docs/apollo-server/data/errors/#error-codes}
+     */
+    errorCode?: string;
+    updating?: boolean;
+} & InputVarProps<TVariables>;
+type Guaranteed<T> = {
+    [K in keyof T]-?: NonNullable<T[K]>;
+};
+type KeyCount<T extends object> = L.Length<U.ListOf<O.SelectKeys<T, any>>>;
+type ConditionallyGuaranteed<T extends object> = KeyCount<T> extends 1 ? Guaranteed<T> : T;
+/**
+ * @params TData = Type of data based on your graphql query. This can be imported from 'types/graphql'
+ * @example
+ * import type { FindPosts } from 'types/graphql'
+ *
+ * const { post }: CellSuccessData<FindPosts> = props
+ */
+export type CellSuccessData<TData = any> = ConditionallyGuaranteed<Omit<TData, '__typename'>>;
+/**
+ * @MARK not sure about this partial, but we need to do this for tests and storybook.
+ *
+ * `updating` is just `loading` renamed; since Cells default to stale-while-refetch,
+ * this prop lets users render something like a spinner to show that a request is in-flight.
+ */
+export type CellSuccessProps<TData = any, TVariables extends OperationVariables = any> = {
+    queryResult?: NonSuspenseCellQueryResult<TVariables, TData> | SuspenseCellQueryResult;
+    updating?: boolean;
+} & InputVarProps<TVariables> & A.Compute<CellSuccessData<TData>>;
+/**
+ * A coarse type for the `data` prop returned by `useQuery`.
+ *
+ * ```js
+ * {
+ *   data: {
+ *     post: { ... }
+ *   }
+ * }
+ * ```
+ */
+export type DataObject = {
+    [key: string]: unknown;
+};
+/**
+ * The main interface.
+ */
+export interface CreateCellProps<CellProps, CellVariables> {
+    /**
+     * The GraphQL syntax tree to execute or function to call that returns it.
+     * If `QUERY` is a function, it's called with the result of `beforeQuery`.
+     */
+    QUERY: DocumentNode | ((variables: Record<string, unknown>) => DocumentNode);
+    /**
+     * Parse `props` into query variables. Most of the time `props` are appropriate variables as is.
+     */
+    beforeQuery?: ((props: CellProps) => {
+        variables: CellVariables;
+    }) | (() => {
+        variables: CellVariables;
+    });
+    /**
+     * Sanitize the data returned from the query.
+     */
+    afterQuery?: (data: DataObject) => DataObject;
+    /**
+     * How to decide if the result of a query should render the `Empty` component.
+     * The default implementation checks that the first field isn't `null` or an empty array.
+     *
+     * @example
+     *
+     * In the example below, only `users` is checked:
+     *
+     * ```js
+     * export const QUERY = gql`
+     *   users {
+     *     name
+     *   }
+     *   posts {
+     *     title
+     *   }
+     * `
+     * ```
+     */
+    isEmpty?: (response: DataObject, options: {
+        isDataEmpty: (data: DataObject) => boolean;
+    }) => boolean;
+    /**
+     * If the query's in flight and there's no stale data, render this.
+     */
+    Loading?: React.FC<CellLoadingProps & Partial<CellProps>>;
+    /**
+     * If something went wrong, render this.
+     */
+    Failure?: React.FC<CellFailureProps & Partial<CellProps>>;
+    /**
+     * If no data was returned, render this.
+     */
+    Empty?: React.FC<CellSuccessProps & Partial<CellProps>>;
+    /**
+     * If data was returned, render this.
+     */
+    Success: React.FC<CellSuccessProps & Partial<CellProps>>;
+    /**
+     * What to call the Cell. Defaults to the filename.
+     */
+    displayName?: string;
+}
+export type SuspendingSuccessProps = React.PropsWithChildren<Record<string, unknown>> & {
+    queryRef: QueryRef<DataObject>;
+    suspenseQueryResult: SuspenseCellQueryResult<DataObject, any>;
+    userProps: Record<string, any>;
+};
+export type NonSuspenseCellQueryResult<TVariables extends OperationVariables = any, TData = any> = Partial<Omit<QueryOperationResult<TData, TVariables>, 'loading' | 'error' | 'data'>>;
+export interface SuspenseCellQueryResult<_TData = any, _TVariables extends OperationVariables = any> extends UseBackgroundQueryResult {
+    client: ApolloClient<any>;
+    networkStatus?: NetworkStatus;
+    called: boolean;
+}
+export {};
+//# sourceMappingURL=cellTypes.d.ts.map

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

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

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

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

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

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

package/dist/components/cell/createCell.js

@@ -0,0 +1,131 @@
+import React from "react";
+import { fragmentRegistry } from "../../apollo/fragmentRegistry.js";
+import { getOperationName } from "../../graphql.js";
+import { useQuery } from "../GraphQLHooksProvider.js";
+import { useCellCacheContext } from "./CellCacheContext.js";
+import { createSuspendingCell } from "./createSuspendingCell.js";
+import { isDataEmpty } from "./isCellEmpty.js";
+const createCell = RWJS_ENV.RWJS_EXP_STREAMING_SSR ? createSuspendingCell : createNonSuspendingCell;
+function createNonSuspendingCell({
+  QUERY,
+  beforeQuery = (props) => ({
+    // By default, we assume that the props are the gql-variables.
+    variables: props,
+    /**
+     * We're duplicating these props here due to a suspected bug in Apollo Client v3.5.4
+     * (it doesn't seem to be respecting `defaultOptions` in `RedwoodApolloProvider`.)
+     *
+     * @see {@link https://github.com/apollographql/apollo-client/issues/9105}
+     */
+    fetchPolicy: "cache-and-network",
+    notifyOnNetworkStatusChange: true
+  }),
+  afterQuery = (data) => data,
+  isEmpty = isDataEmpty,
+  Loading = () => /* @__PURE__ */ React.createElement(React.Fragment, null, "Loading..."),
+  Failure,
+  Empty,
+  Success,
+  displayName = "Cell"
+}) {
+  function NamedCell(props) {
+    const { children: _, ...variables } = props;
+    const options = beforeQuery(variables);
+    const query = typeof QUERY === "function" ? QUERY(options) : QUERY;
+    let {
+      // eslint-disable-next-line prefer-const
+      error,
+      loading,
+      data,
+      ...queryResult
+    } = useQuery(query, options);
+    if (globalThis.__REDWOOD__PRERENDERING) {
+      const { queryCache } = useCellCacheContext();
+      const operationName = getOperationName(query);
+      const transformedQuery = fragmentRegistry.transform(query);
+      let cacheKey;
+      if (operationName) {
+        cacheKey = operationName + "_" + JSON.stringify(variables);
+      } else {
+        const cellName = displayName === "Cell" ? "the cell" : displayName;
+        throw new Error(
+          `The gql query in ${cellName} is missing an operation name. Something like FindBlogPostQuery in \`query FindBlogPostQuery($id: Int!)\``
+        );
+      }
+      const queryInfo = queryCache[cacheKey];
+      if (queryInfo?.renderLoading) {
+        loading = true;
+      } else {
+        if (queryInfo?.hasProcessed) {
+          loading = false;
+          data = queryInfo.data;
+          queryResult = { variables };
+        } else {
+          queryCache[cacheKey] ||= {
+            query: transformedQuery,
+            variables: options.variables,
+            hasProcessed: false
+          };
+        }
+      }
+    }
+    if (error) {
+      if (Failure) {
+        return /* @__PURE__ */ React.createElement(
+          Failure,
+          {
+            error,
+            errorCode: (
+              // Use the ad-hoc QueryResultWithErrorCode type to access the errorCode
+              queryResult.errorCode ?? error.graphQLErrors?.[0]?.extensions?.["code"]
+            ),
+            ...props,
+            updating: loading,
+            queryResult
+          }
+        );
+      } else {
+        throw error;
+      }
+    } else if (data) {
+      const afterQueryData = afterQuery(data);
+      if (isEmpty(data, { isDataEmpty }) && Empty) {
+        return /* @__PURE__ */ React.createElement(
+          Empty,
+          {
+            ...props,
+            ...afterQueryData,
+            updating: loading,
+            queryResult
+          }
+        );
+      } else {
+        return /* @__PURE__ */ React.createElement(
+          Success,
+          {
+            ...props,
+            ...afterQueryData,
+            updating: loading,
+            queryResult
+          }
+        );
+      }
+    } else if (loading) {
+      return /* @__PURE__ */ React.createElement(Loading, { ...props, queryResult });
+    } else {
+      console.warn(
+        `If you're using Apollo Client, check for its debug logs here in the console, which may help explain the error.`
+      );
+      throw new Error(
+        "Cannot render Cell: reached an unexpected state where the query succeeded but `data` is `null`. If this happened in Storybook, your query could be missing fields; otherwise this is most likely a GraphQL caching bug. Note that adding an `id` field to all the fields on your query may fix the issue."
+      );
+    }
+  }
+  NamedCell.displayName = displayName;
+  return (props) => {
+    return /* @__PURE__ */ React.createElement(NamedCell, { ...props });
+  };
+}
+export {
+  createCell
+};

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/createServerCell.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { CreateCellProps } from './cellTypes.js';
+type CreateServerCellProps<CellProps, CellVariables> = Omit<CreateCellProps<CellProps, CellVariables>, 'QUERY' | 'Failure'> & {
+    data: (variables?: AnyObj) => any;
+    Failure?: React.ComponentType<{
+        error: unknown;
+        queryResult: {
+            refetch: (variables: CellProps) => AnyObj;
+        };
+    }>;
+};
+type AnyObj = Record<string, unknown>;
+export declare function createServerCell<CellProps extends AnyObj, CellVariables extends AnyObj>(createCellProps: CreateServerCellProps<CellProps, CellVariables>): React.FC<CellProps>;
+export {};
+//# sourceMappingURL=createServerCell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createServerCell.d.ts","sourceRoot":"","sources":["../../../src/components/cell/createServerCell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAMvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAIrD,KAAK,qBAAqB,CAAC,SAAS,EAAE,aAAa,IAAI,IAAI,CACzD,eAAe,CAAC,SAAS,EAAE,aAAa,CAAC,EACzC,OAAO,GAAG,SAAS,CACpB,GAAG;IACF,IAAI,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,GAAG,CAAA;IACjC,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC5B,KAAK,EAAE,OAAO,CAAA;QACd,WAAW,EAAE;YAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,MAAM,CAAA;SAAE,CAAA;KAC3D,CAAC,CAAA;CACH,CAAA;AAED,KAAK,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAErC,wBAAgB,gBAAgB,CAC9B,SAAS,SAAS,MAAM,EACxB,aAAa,SAAS,MAAM,EAE5B,eAAe,EAAE,qBAAqB,CAAC,SAAS,EAAE,aAAa,CAAC,GAC/D,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CA2ErB"}