Merge pull request #845 from gadget-inc/inline-views

Add support for inline views and fix operation name on model namespaced views

Author: airhorns

package.json

@@ -27,7 +27,7 @@
     "@gadget-client/app-with-no-user-model": "^1.10.0",
     "@gadget-client/bulk-actions-test": "^1.113.0",
     "@gadget-client/full-auth": "^1.9.0",
-    "@gadget-client/js-clients-test": "1.512.0-development.2591",
+    "@gadget-client/js-clients-test": "1.512.0-development.2601",
     "@gadget-client/kitchen-sink": "1.9.0-development.206",
     "@gadget-client/related-products-example": "^1.865.0",
     "@gadget-client/zxcv-deeply-nested": "^1.212.0",

packages/api-client-core/src/GadgetFunctions.ts

@@ -87,7 +87,9 @@ export interface ViewFunctionWithoutVariables<ResultT> {
   (): Promise<ResultT>;
   type: "computedView";
   operationName: string;
+  gqlFieldName: string;
   namespace?: string | string[] | null;
+  referencedTypenames?: string[];
   resultType: ResultT;
   plan(): GQLBuilderResult;
 }
@@ -96,7 +98,9 @@ export interface ViewFunctionWithVariables<VariablesT, ResultT> {
   (variables: VariablesT): Promise<ResultT>;
   type: "computedView";
   operationName: string;
+  gqlFieldName: string;
   namespace?: string | string[] | null;
+  referencedTypenames?: string[];
   variables: VariablesOptions;
   variablesType: VariablesT;
   resultType: ResultT;

packages/react/.changeset/silent-starfishes-cough.md

@@ -0,0 +1,8 @@
+---
+"@gadgetinc/react": minor
+"@gadgetinc/api-client-core": patch
+---
+
+Add `useView` hook for executing computed views
+
+This adds a new React hook for invoking computed views defined using backend `.gelly` files.

packages/react/spec/auto/shadcn-defaults/__snapshots__/shadcnClassnameSafelist.spec.ts.snap

@@ -773,6 +773,10 @@ body {
   display: block;
 }
 
+.inline {
+  display: inline;
+}
+
 .flex {
   display: flex;
 }

packages/react/spec/auto/shadcn-defaults/shadcnClassnameSafelist.spec.ts

@@ -85,6 +85,7 @@ describe("Tailwind CSS Output Snapshot", () => {
         "h-9",
         "h-fit",
         "hidden",
+        "inline",
         "inline-flex",
         "inset-0",
         "items-center",

packages/react/spec/useView.spec.tsx

@@ -1,6 +1,7 @@
 import { renderHook } from "@testing-library/react";
 import type { IsExact } from "conditional-type-checks";
 import { assert } from "conditional-type-checks";
+import type { AnyVariables } from "urql";
 import { useView } from "../src/useView.js";
 import type { ErrorWrapper } from "../src/utils.js";
 import { testApi } from "./apis.js";
@@ -60,6 +61,46 @@ describe("useView", () => {
     }
   };
 
+  const _TestUseModelNamespacedView = () => {
+    const [{ data }] = useView(testApi.widget.stats, { inStockOnly: false });
+
+    assert<IsExact<typeof data, undefined | { count: number | null }>>(true);
+
+    if (data) {
+      data.count;
+    }
+  };
+
+  const _TestUseInlineViewNoVariables = () => {
+    const [{ data, fetching, error }, refresh] = useView("{ count(todos) }");
+
+    assert<IsExact<typeof fetching, boolean>>(true);
+    assert<IsExact<typeof data, undefined | unknown>>(true);
+    assert<IsExact<typeof error, ErrorWrapper | undefined>>(true);
+
+    refresh();
+  };
+
+  const _TestUseInlineViewWithVariables = () => {
+    const [{ data, fetching, error }, refresh] = useView("($first: Int){ count(todos) }", { first: 10 });
+
+    assert<IsExact<typeof fetching, boolean>>(true);
+    assert<IsExact<typeof data, undefined | unknown>>(true);
+    assert<IsExact<typeof error, ErrorWrapper | undefined>>(true);
+
+    refresh();
+  };
+
+  const _TestUseInlineViewWithVariablesAndOptions = () => {
+    const [{ data, fetching, error }, refresh] = useView("($first: Int){ count(todos) }", { first: 10 }, { pause: true });
+
+    assert<IsExact<typeof fetching, boolean>>(true);
+    assert<IsExact<typeof data, undefined | unknown>>(true);
+    assert<IsExact<typeof error, ErrorWrapper | undefined>>(true);
+
+    refresh();
+  };
+
   test("can fetch a view with no variables", async () => {
     let query: string | undefined;
     const client = createMockUrqlClient({
@@ -75,6 +116,7 @@ describe("useView", () => {
     expect(result.current[0].error).toBeFalsy();
 
     expect(client.executeQuery).toHaveBeenCalledTimes(1);
+    expect(client.executeQuery.mock.calls[0][1].additionalTypenames).toEqual(["Widget"]);
 
     expect(query).toMatchInlineSnapshot(`
       "query totalInStock {
@@ -173,6 +215,137 @@ describe("useView", () => {
     expect(result.current[0].error).toBeFalsy();
   });
 
+  test("can find namespaced view on a model", async () => {
+    let query: string | undefined;
+    const client = createMockUrqlClient({
+      queryAssertions: (request) => {
+        query = request.query.loc?.source.body;
+      },
+    });
+
+    const { result } = renderHook(() => useView(testApi.widget.stats, { inStockOnly: false }), {
+      wrapper: MockClientWrapper(testApi, client),
+    });
+
+    expect(result.current[0].data).toBeFalsy();
+    expect(result.current[0].fetching).toBe(true);
+    expect(result.current[0].error).toBeFalsy();
+
+    expect(client.executeQuery).toHaveBeenCalledTimes(1);
+
+    expect(query).toMatchInlineSnapshot(`
+      "query widgetStats($inStockOnly: undefined) {
+        widgetStats(inStockOnly: $inStockOnly)
+      }"
+    `);
+
+    client.executeQuery.pushResponse("widgetStats", {
+      data: {
+        widgetStats: {
+          count: 123,
+        },
+      },
+      stale: false,
+      hasNext: false,
+    });
+
+    expect(result.current[0].data!.count).toEqual(123);
+    expect(result.current[0].fetching).toBe(false);
+    expect(result.current[0].error).toBeFalsy();
+  });
+
+  test("can fetch an inline view with no variables", async () => {
+    let query: string | undefined;
+    let variables: AnyVariables | undefined;
+
+    const client = createMockUrqlClient({
+      queryAssertions: (request) => {
+        query = request.query.loc?.source.body;
+        variables = request.variables;
+      },
+    });
+
+    const { result } = renderHook(() => useView("{ count(todos) }"), { wrapper: MockClientWrapper(testApi, client) });
+
+    expect(result.current[0].data).toBeFalsy();
+    expect(result.current[0].fetching).toBe(true);
+    expect(result.current[0].error).toBeFalsy();
+
+    expect(client.executeQuery).toHaveBeenCalledTimes(1);
+
+    expect(query).toMatchInlineSnapshot(`
+      "query InlineView($query: String!, $variables: JSONObject) {
+        gellyView(query: $query, variables: $variables)
+      }"
+    `);
+
+    expect(variables).toEqual({
+      query: "{ count(todos) }",
+      variables: undefined,
+    });
+
+    client.executeQuery.pushResponse("InlineView", {
+      data: {
+        gellyView: {
+          count: 100,
+        },
+      },
+      stale: false,
+      hasNext: false,
+    });
+
+    expect(result.current[0].data).toEqual({ count: 100 });
+    expect(result.current[0].fetching).toBe(false);
+    expect(result.current[0].error).toBeFalsy();
+  });
+
+  test("can fetch an inline view with variables", async () => {
+    let query: string | undefined;
+    let variables: AnyVariables | undefined;
+
+    const client = createMockUrqlClient({
+      queryAssertions: (request) => {
+        query = request.query.loc?.source.body;
+        variables = request.variables;
+      },
+    });
+
+    const { result } = renderHook(() => useView("($first: Int){ count(todos) }", { first: 10 }), {
+      wrapper: MockClientWrapper(testApi, client),
+    });
+
+    expect(result.current[0].data).toBeFalsy();
+    expect(result.current[0].fetching).toBe(true);
+    expect(result.current[0].error).toBeFalsy();
+
+    expect(client.executeQuery).toHaveBeenCalledTimes(1);
+
+    expect(query).toMatchInlineSnapshot(`
+      "query InlineView($query: String!, $variables: JSONObject) {
+        gellyView(query: $query, variables: $variables)
+      }"
+    `);
+
+    expect(variables).toEqual({
+      query: "($first: Int){ count(todos) }",
+      variables: { first: 10 },
+    });
+
+    client.executeQuery.pushResponse("InlineView", {
+      data: {
+        gellyView: {
+          count: 100,
+        },
+      },
+      stale: false,
+      hasNext: false,
+    });
+
+    expect(result.current[0].data).toEqual({ count: 100 });
+    expect(result.current[0].fetching).toBe(false);
+    expect(result.current[0].error).toBeFalsy();
+  });
+
   test("returns the same data object on rerender if nothing changes about the result", async () => {
     const { result, rerender } = renderHook(() => useView(testApi.echo, { value: "test" }), { wrapper: MockClientWrapper(testApi) });
 
@@ -240,4 +413,16 @@ describe("useView", () => {
 
     expect(mockUrqlClient.executeQuery).toHaveBeenCalledTimes(0);
   });
+
+  test("doesn't issue a request if an inline view is paused", async () => {
+    const { result } = renderHook(() => useView("{ count(todos) }", {}, { pause: true }), {
+      wrapper: MockClientWrapper(testApi),
+    });
+
+    expect(result.current[0].data).toBeFalsy();
+    expect(result.current[0].fetching).toBe(false);
+    expect(result.current[0].error).toBeFalsy();
+
+    expect(mockUrqlClient.executeQuery).toHaveBeenCalledTimes(0);
+  });
 });

packages/react/src/auto/shadcn/GadgetShadcnTailwindSafelist.ts

@@ -74,6 +74,7 @@ export const GadgetShadcnTailwindSafelistFromTailwind = [
   "h-9",
   "h-fit",
   "hidden",
+  "inline",
   "inline-flex",
   "inset-0",
   "items-center",

packages/react/src/index.ts

@@ -25,3 +25,4 @@ export * from "./useList.js";
 export * from "./useMaybeFindFirst.js";
 export * from "./useMaybeFindOne.js";
 export * from "./useTable.js";
+export * from "./useView.js";

packages/react/src/useView.ts

@@ -1,4 +1,10 @@
-import type { ViewFunction, ViewFunctionWithoutVariables, ViewFunctionWithVariables, ViewResult } from "@gadgetinc/api-client-core";
+import type {
+  GQLBuilderResult,
+  ViewFunction,
+  ViewFunctionWithoutVariables,
+  ViewFunctionWithVariables,
+  ViewResult,
+} from "@gadgetinc/api-client-core";
 import { get, namespaceDataPath } from "@gadgetinc/api-client-core";
 import { useMemo } from "react";
 import { useGadgetQuery } from "./useGadgetQuery.js";
@@ -9,7 +15,7 @@ import { ErrorWrapper, useQueryArgs } from "./utils.js";
 /**
  * React hook to fetch the result of a computed view from the backend. Returns a standard hook result set with a tuple of the result object with `data`, `fetching`, and `error` keys, and a `refetch` function. `data` will be the shape of the computed view's result.
  *
- * @param manager Gadget view function to run
+ * @param view Gadget view function to run, like `api.leaderboard` or `api.todos.summary`
  * @param options options for controlling client side execution
  *
  * @example
@@ -58,34 +64,84 @@ export function useView<F extends ViewFunctionWithVariables<any, any>>(
   variables: F["variablesType"],
   options?: Omit<ReadOperationOptions, "live">
 ): ReadHookResult<ViewResult<F>>;
+/**
+ * React hook to fetch the result of an inline computed view with variables from the backend. Returns a standard hook result set with a tuple of the result object with `data`, `fetching`, and `error` keys, and a `refetch` function. `data` will be the shape of the computed view's result.
+ *
+ * Does not know the type of the result from the input string -- for type safety, use a named view defined in a .gelly file in the backend.
+ *
+ * @param view Gelly query string to run, like `{ count(todos) }`
+ * @param variables variables to pass to the backend view
+ * @param options options for controlling client side execution
+ *
+ * @example
+ *
+ * ```
+ * export function Leaderboard() {
+ *   const [result, refresh] = useView("{ count(todos) }", {
+ *     first: 10,
+ *   });
+ *
+ *   if (result.error) return <>Error: {result.error.toString()}</>;
+ *   if (result.fetching && !result.data) return <>Fetching...</>;
+ *   if (!result.data) return <>No data found</>;
+ *
+ *   return <>{result.data.map((leaderboard) => <div>{leaderboard.name}: {leaderboard.score}</div>)}</>;
+ * }
+ * ```
+ */
+export function useView(
+  gellyQuery: string,
+  variables?: Record<string, unknown>,
+  options?: Omit<ReadOperationOptions, "live">
+): ReadHookResult<ViewResult<ViewFunction<unknown, unknown>>>;
 export function useView<VariablesT, F extends ViewFunction<VariablesT, any>>(
-  view: F,
+  view: F | string,
   variablesOrOptions?: VariablesT | Omit<ReadOperationOptions, "live">,
   maybeOptions?: Omit<ReadOperationOptions, "live">
 ): ReadHookResult<ViewResult<F>> {
   let variables: VariablesT | undefined;
   let options: Omit<ReadOperationOptions, "live"> | undefined;
 
-  if ("variables" in view) {
+  if (typeof view == "string" || "variables" in view) {
     variables = variablesOrOptions as VariablesT;
     options = maybeOptions;
   } else if (variablesOrOptions) {
     options = variablesOrOptions as Omit<ReadOperationOptions, "live">;
   }
 
   const memoizedVariables = useStructuralMemo(variables);
-  const memoizedOptions = useStructuralMemo(options);
-  const plan = useMemo(() => view.plan((memoizedVariables ?? {}) as unknown as VariablesT), [view, memoizedVariables]);
+  const memoizedOptions = useStructuralMemo({
+    ...options,
+    context: {
+      ...options?.context,
+      // if the view exports the typenames it references, add them to the context so urql will refresh the view when mutations are made against these typenames
+      additionalTypenames: [
+        ...(options?.context?.additionalTypenames ?? []),
+        ...(typeof view == "string" ? [] : view.referencedTypenames ?? []),
+      ],
+    },
+  });
+
+  const [plan, dataPath] = useMemo((): [plan: GQLBuilderResult, dataPath: string[]] => {
+    if (typeof view == "string") {
+      return [{ query: inlineViewQuery, variables: { query: view, variables: memoizedVariables } }, ["gellyView"]];
+    } else {
+      return [view.plan((memoizedVariables ?? {}) as unknown as VariablesT), namespaceDataPath([view.gqlFieldName], view.namespace)];
+    }
+  }, [view, memoizedVariables]);
 
   const [rawResult, refresh] = useGadgetQuery(useQueryArgs(plan, memoizedOptions));
 
   const result = useMemo(() => {
-    const dataPath = namespaceDataPath([view.operationName], view.namespace);
     const data = get(rawResult.data, dataPath);
     const error = ErrorWrapper.errorIfDataAbsent(rawResult, dataPath, options?.pause);
 
     return { ...rawResult, data, error };
-  }, [view, options?.pause, rawResult]);
+  }, [dataPath, options?.pause, rawResult]);
 
   return [result, refresh];
 }
+
+const inlineViewQuery = `query InlineView($query: String!, $variables: JSONObject) { 
+  gellyView(query: $query, variables: $variables) 
+}`;