Create Graphql Fetcher code component (#5555)

* feat(plasmic): create graphql-fetcher code component

* fix(eslint): hoist eslint packages to root for vscode plugin to work

Author: IcaroG

apps/frontend/components/dataprovider/graphql-fetcher.tsx

@@ -0,0 +1,194 @@
+import {
+  CommonDataProviderProps,
+  CommonDataProviderRegistration,
+  DataProviderView,
+} from "@/components/dataprovider/provider-view";
+import { CodeComponentMeta } from "@plasmicapp/loader-nextjs";
+import React from "react";
+import useSWR from "swr";
+
+const DEFAULT_PLASMIC_KEY = "osoData";
+
+type CustomError = Error & {
+  info: Record<string, any>;
+  status: number;
+};
+
+interface FetchProps {
+  url?: string;
+  method?: string;
+  body?: string | object;
+  headers?: Record<string, string>;
+}
+
+type GraphqlFetcherProps = CommonDataProviderProps &
+  FetchProps & {
+    query?: { query?: string; variables?: object };
+    queryKey?: string;
+    varOverrides?: object;
+  };
+
+/**
+ * Tries to return the JSON response, or else returns an object with a text key containing the response body text.
+ */
+async function performFetch({ url, method, body, headers }: FetchProps) {
+  if (!url) {
+    throw new Error("Please specify a URL to fetch");
+  }
+
+  // Add default headers unless specified
+  if (!headers) {
+    headers = {};
+  }
+  const headerNamesLowercase = new Set(
+    Object.keys(headers).map((headerName) => headerName.toLowerCase()),
+  );
+  if (!headerNamesLowercase.has("accept")) {
+    headers["Accept"] = "application/json";
+  }
+  if (body && !headerNamesLowercase.has("content-type")) {
+    headers["Content-Type"] = "application/json";
+  }
+
+  const response = await fetch(url, {
+    method,
+    headers,
+    body:
+      body === undefined
+        ? body
+        : typeof body === "string"
+          ? body
+          : JSON.stringify(body),
+  });
+
+  const text = await response.text();
+  let json: Record<string, any> = { text };
+
+  try {
+    json = JSON.parse(text);
+  } catch {
+    json = { text };
+  }
+
+  // @see https://swr.vercel.app/docs/error-handling
+  // If the status code is not in the range 200-299,
+  // we still try to parse and throw it.
+  if (!response.ok) {
+    const error = new Error(response.statusText) as CustomError;
+    // Attach extra info to the error object.
+    error.info = json;
+    error.status = response.status;
+    throw error;
+  }
+
+  return json;
+}
+
+function GraphqlFetcher(props: GraphqlFetcherProps) {
+  const {
+    query,
+    url,
+    method,
+    headers,
+    queryKey,
+    varOverrides,
+    variableName,
+    ...rest
+  } = props;
+
+  let fetchProps: FetchProps;
+  if (method === "GET") {
+    // https://graphql.org/learn/serving-over-http/#get-request-and-parameters
+    const urlWithQueryParams = new URL(url ?? "");
+    urlWithQueryParams.searchParams.set("query", query?.query ?? "{}");
+    urlWithQueryParams.searchParams.set(
+      "variables",
+      JSON.stringify({ ...query?.variables, ...varOverrides }),
+    );
+    fetchProps = {
+      url: urlWithQueryParams.toString(),
+      method,
+      headers,
+    };
+  } else {
+    fetchProps = {
+      body: { ...query, variables: { ...query?.variables, ...varOverrides } },
+      url,
+      method,
+      headers,
+    };
+  }
+
+  const { data, mutate, error, isLoading } = useSWR(
+    queryKey || JSON.stringify({ type: "GraphqlFetcher", ...fetchProps }),
+    () => {
+      if (!query || !url) {
+        return;
+      }
+      return performFetch(fetchProps);
+    },
+  );
+  return (
+    <DataProviderView
+      {...rest}
+      variableName={variableName ?? DEFAULT_PLASMIC_KEY}
+      formattedData={{ ...data, revalidate: mutate }}
+      loading={isLoading}
+      error={error}
+    />
+  );
+}
+
+const graphqlFetcherMeta: CodeComponentMeta<GraphqlFetcherProps> = {
+  name: "graphql-fetcher",
+  displayName: "GraphQL Fetcher",
+  providesData: true,
+  props: {
+    query: {
+      type: "code",
+      lang: "graphql",
+      headers: (props: GraphqlFetcherProps) => props.headers,
+      endpoint: (props: GraphqlFetcherProps) => props.url ?? "",
+    },
+    varOverrides: {
+      type: "object",
+      displayName: "Override variables",
+      description:
+        "Pass in dynamic values for your query variables, as an object of key-values",
+    },
+
+    url: {
+      type: "string",
+      defaultValue: "https://www.oso.xyz/api/v1/osograph",
+      description: "Where to fetch the data from",
+    },
+    method: {
+      type: "choice",
+      options: [
+        "GET",
+        "DELETE",
+        "CONNECT",
+        "HEAD",
+        "OPTIONS",
+        "POST",
+        "PUT",
+        "TRACE",
+      ],
+      defaultValue: "POST",
+      description: "Method to use when fetching",
+    },
+    headers: {
+      type: "object",
+      description: "Request headers (as JSON object) to send",
+    },
+    queryKey: {
+      type: "string",
+      description:
+        "A globally unique ID for this query, used for invalidating queries",
+      invariantable: true,
+    },
+    ...CommonDataProviderRegistration,
+  },
+};
+
+export { GraphqlFetcher, graphqlFetcherMeta };

apps/frontend/components/dataprovider/index.ts

@@ -23,6 +23,10 @@ import {
   OsoChatProvider,
   OsoChatProviderMeta,
 } from "@/components/dataprovider/oso-chat-provider";
+import {
+  GraphqlFetcher,
+  graphqlFetcherMeta,
+} from "@/components/dataprovider/graphql-fetcher";
 
 export function registerAllDataProvider(PLASMIC: NextJsPlasmicComponentLoader) {
   // Global Context
@@ -34,4 +38,5 @@ export function registerAllDataProvider(PLASMIC: NextJsPlasmicComponentLoader) {
   PLASMIC.registerComponent(OsoDataProvider, OsoDataProviderMeta);
   PLASMIC.registerComponent(AuthRouter, AuthRouterMeta);
   PLASMIC.registerComponent(OsoChatProvider, OsoChatProviderMeta);
+  PLASMIC.registerComponent(GraphqlFetcher, graphqlFetcherMeta);
 }

apps/frontend/components/dataprovider/oso-data-provider.tsx

@@ -76,7 +76,6 @@ function OsoDataProvider(props: OsoDataProviderProps) {
         }
         result[key] = await (client as any)[method](args);
       }
-      console.log("OsoDataProvider:", props, data);
       return result;
     },
     {

pnpm-lock.yaml

@@ -14,3 +14,6 @@ onlyBuiltDependencies:
   - '@apollo/rover'
   - '@tailwindcss/oxide'
   - supabase
+
+publicHoistPattern:
+  - '*eslint*'