Small changes to data-sources package (#521)

* fix(server-queries): wrap client serverQuery in loadingFetcher

* feat(server-queries): export makeQueryCacheKey to be used in studio

GitOrigin-RevId: 25cdf41ed4606d9bc253cb5b46628175b8ba677b

packages/data-sources/api/index.api.md

@@ -81,6 +81,9 @@ export function makeCacheKey(dataOp: DataOp, opts?: {
     userAuthToken?: string | null;
 }): string;
 
+// @public (undocumented)
+export function makeQueryCacheKey(id: string, params: any[]): string;
+
 // @public (undocumented)
 export interface ManyRowsResult<T = any> {
     // (undocumented)
@@ -202,7 +205,7 @@ export function usePlasmicDataOp<T extends SingleRowResult | ManyRowsResult, E =
 export function usePlasmicInvalidate(): (invalidatedKeys: string[] | null | undefined) => Promise<any[] | undefined>;
 
 // @public (undocumented)
-export function usePlasmicServerQuery<F extends (...args: any[]) => any>(serverQuery: ServerQuery<F>, fallbackData?: ReturnType<F>, opts?: {
+export function usePlasmicServerQuery<F extends (...args: any[]) => Promise<any>>(serverQuery: ServerQuery<F>, fallbackData?: ReturnType<F>, opts?: {
     noUndefinedDataProxy?: boolean;
 }): Partial<ServerQueryResult<ReturnType<F>>>;
 

packages/data-sources/src/components/Fetcher.tsx

@@ -1,7 +1,7 @@
-import { ComponentMeta } from '@plasmicapp/host';
-import React from 'react';
-import { DataOp } from '../executor';
-import { usePlasmicDataOp } from '../hooks/usePlasmicDataOp';
+import { ComponentMeta } from "@plasmicapp/host";
+import React from "react";
+import { usePlasmicDataOp } from "../hooks/usePlasmicDataOp";
+import { DataOp } from "../types";
 
 export interface DataOpConfig {
   name?: string;
@@ -25,44 +25,44 @@ export function Fetcher(props: FetcherProps): React.ReactElement | null {
   });
 
   const $queries = React.useMemo(
-    () => ({ ...props.queries, [name ?? 'data']: data }),
+    () => ({ ...props.queries, [name ?? "data"]: data }),
     [props.queries, name, data]
   );
 
   return children?.($queries) ?? null;
 }
 
 export const FetcherMeta: ComponentMeta<FetcherProps> = {
-  name: 'plasmic-data-source-fetcher',
-  displayName: 'Data Fetcher',
+  name: "plasmic-data-source-fetcher",
+  displayName: "Data Fetcher",
   props: {
     dataOp: {
-      type: 'dataSourceOp' as any,
-      displayName: 'Data',
+      type: "dataSourceOp" as any,
+      displayName: "Data",
     },
     name: {
-      type: 'string',
-      displayName: 'Variable name',
+      type: "string",
+      displayName: "Variable name",
     },
     children: {
-      type: 'slot',
-      renderPropParams: ['$queries'],
+      type: "slot",
+      renderPropParams: ["$queries"],
     },
     pageSize: {
-      type: 'number',
+      type: "number",
       advanced: true,
-      displayName: 'Page size',
-      description: 'Only fetch in batches of this size; for pagination',
+      displayName: "Page size",
+      description: "Only fetch in batches of this size; for pagination",
     },
     pageIndex: {
-      type: 'number',
+      type: "number",
       advanced: true,
-      displayName: 'Page index',
-      description: '0-based index of the paginated page to fetch',
+      displayName: "Page index",
+      description: "0-based index of the paginated page to fetch",
     },
   },
-  importPath: '@plasmicapp/react-web/lib/data-sources',
-  importName: 'Fetcher',
+  importPath: "@plasmicapp/react-web/lib/data-sources",
+  importName: "Fetcher",
   alwaysAutoName: true,
   styleSections: false,
 };

packages/data-sources/src/executor.tsx

@@ -3,19 +3,10 @@ import fetch from "@plasmicapp/isomorphic-unfetch";
 import { wrapLoadingFetcher } from "@plasmicapp/query";
 import stringify from "fast-stringify";
 import { addPlaceholdersToUserArgs } from "./placeholders";
-import { ManyRowsResult, Pagination, SingleRowResult } from "./types";
+import { DataOp, ManyRowsResult, Pagination, SingleRowResult } from "./types";
 
 const DEFAULT_HOST = "https://data.plasmic.app";
 
-export interface DataOp {
-  sourceId: string;
-  opId: string;
-  userArgs?: Record<string, any>;
-  cacheKey?: string;
-  invalidatedKeys?: string[] | null;
-  roleId?: string | null;
-}
-
 interface ExecuteOpts {
   userAuthToken?: string;
   user?: PlasmicDataSourceContextValue["user"];

packages/data-sources/src/hooks/useDependencyAwareQuery.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { DataOpConfig } from '../components/Fetcher';
-import { DataOp } from '../executor';
-import { swallow } from '../utils';
-import { usePlasmicDataOp } from './usePlasmicDataOp';
+import React from "react";
+import { DataOpConfig } from "../components/Fetcher";
+import { DataOp } from "../types";
+import { swallow } from "../utils";
+import { usePlasmicDataOp } from "./usePlasmicDataOp";
 
 function usePrevious<T>(value: T | undefined): T | undefined {
   const prevValue = React.useRef<T | undefined>(undefined);
@@ -41,7 +41,7 @@ export function useDependencyAwareQuery({
         paginate: { pageIndex, pageSize },
       }),
   });
-  const finalName = name ?? 'data';
+  const finalName = name ?? "data";
   const prevName = usePrevious(finalName);
   React.useEffect(() => {
     if (!(finalName in $queries) || $queries[finalName] !== data) {

packages/data-sources/src/hooks/usePlasmicDataOp.tsx

@@ -5,9 +5,10 @@ import {
 } from "@plasmicapp/query";
 import * as React from "react";
 import { isPlasmicUndefinedDataErrorPromise, usePlasmicFetch } from "../common";
-import { DataOp, executePlasmicDataOp } from "../executor";
+import { executePlasmicDataOp } from "../executor";
 import {
   ClientQueryResult,
+  DataOp,
   ManyRowsResult,
   Pagination,
   SingleRowResult,

packages/data-sources/src/index.tsx

@@ -2,7 +2,6 @@ export { usePlasmicDataConfig } from "@plasmicapp/query";
 export { Fetcher, FetcherMeta } from "./components/Fetcher";
 export type { FetcherProps } from "./components/Fetcher";
 export { executePlasmicDataOp } from "./executor";
-export type { DataOp } from "./executor";
 export {
   deriveFieldConfigs,
   normalizeData,
@@ -16,13 +15,17 @@ export {
   usePlasmicDataOp,
   usePlasmicInvalidate,
 } from "./hooks/usePlasmicDataOp";
-export { usePlasmicServerQuery } from "./serverQueries/client";
+export {
+  makeQueryCacheKey,
+  usePlasmicServerQuery,
+} from "./serverQueries/client";
 export {
   executeServerQuery,
   mkPlasmicUndefinedServerProxy,
 } from "./serverQueries/server";
 export type {
   ClientQueryResult,
+  DataOp,
   DataSourceSchema,
   ManyRowsResult,
   Pagination,

packages/data-sources/src/serverQueries/client.ts

@@ -1,10 +1,19 @@
-import { useMutablePlasmicQueryData } from "@plasmicapp/query";
+import {
+  useMutablePlasmicQueryData,
+  wrapLoadingFetcher,
+} from "@plasmicapp/query";
 import { isPlasmicUndefinedDataErrorPromise, usePlasmicFetch } from "../common";
 import { ClientQueryResult, ServerQuery, ServerQueryResult } from "../types";
 import { pick } from "../utils";
 import { resolveParams } from "./common";
 
-export function usePlasmicServerQuery<F extends (...args: any[]) => any>(
+export function makeQueryCacheKey(id: string, params: any[]) {
+  return `${id}:${JSON.stringify(params)}`;
+}
+
+export function usePlasmicServerQuery<
+  F extends (...args: any[]) => Promise<any>
+>(
   serverQuery: ServerQuery<F>,
   fallbackData?: ReturnType<F>,
   opts?: { noUndefinedDataProxy?: boolean }
@@ -18,10 +27,10 @@ export function usePlasmicServerQuery<F extends (...args: any[]) => any>(
   const key =
     !resolvedParams || isPlasmicUndefinedDataErrorPromise(resolvedParams)
       ? null
-      : `${serverQuery.id}:${JSON.stringify(resolvedParams)}`;
+      : makeQueryCacheKey(serverQuery.id, resolvedParams);
 
   const fetcher = (params: Parameters<F>) => {
-    return serverQuery.fn(...params);
+    return wrapLoadingFetcher(serverQuery.fn)(...params);
   };
 
   const resultMapper = (

packages/data-sources/src/types.ts

@@ -45,6 +45,15 @@ export interface ManyRowsResult<T = any> {
   paginate?: Pagination;
 }
 
+export interface DataOp {
+  sourceId: string;
+  opId: string;
+  userArgs?: Record<string, any>;
+  cacheKey?: string;
+  invalidatedKeys?: string[] | null;
+  roleId?: string | null;
+}
+
 export interface ServerQuery<F extends (...args: any[]) => Promise<any>> {
   fn: F;
   execParams: () => Parameters<F>;

packages/data-sources/src/utils.ts

@@ -78,7 +78,9 @@ export function maybe<T, U>(
   x: T | undefined | null,
   f: (y: T) => U
 ): U | undefined {
-  if (x === undefined || x === null) return undefined;
+  if (x === undefined || x === null) {
+    return undefined;
+  }
   return f(x);
 }