fix(connect-react): remove accidental useSuspenseQuery + setState during render (1.0.0-preview.4)

Author: tjk

packages/connect-react/CHANGELOG.md

@@ -1,6 +1,11 @@
 <!-- markdownlint-disable MD024 -->
 # Changelog
 
+# [1.0.0-preview.4] - 2024-11-27
+
+- Fix accidental use of useSuspenseQuery
+- Fix setState during render due to userId useEffect
+
 # [1.0.0-preview.3] - 2024-11-27
 
 - Previous version broken, lack of build before publish (not sure how preview.1 shipped)

packages/connect-react/examples/nextjs/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@pipedream/connect-react",
-  "version": "1.0.0-preview.3",
+  "version": "1.0.0-preview.4",
   "description": "Pipedream Connect library for React",
   "files": [
     "dist"

packages/connect-react/package.json

@@ -1,10 +1,8 @@
+import type { ConfigurableProp } from "@pipedream/sdk";
 import { FormFieldContext } from "../hooks/form-field-context";
 import { useFormContext } from "../hooks/form-context";
 import { Field } from "./Field";
 import { useApp } from "../hooks/use-app";
-import {
-  AppInfo, ConfigurableProp,
-} from "@pipedream/sdk";
 
 type FieldInternalProps<T extends ConfigurableProp> = {
   prop: T;

packages/connect-react/src/components/InternalField.tsx

@@ -141,7 +141,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     }
     configurableProps = _configurableProps as unknown as T; // XXX
   }
-  if (reloadPropIdx) {
+  if (reloadPropIdx != null) {
     configurableProps = configurableProps.slice(0, reloadPropIdx + 1) as unknown as T; // XXX
   }
 
@@ -241,8 +241,12 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   ]);
 
   // clear all props on user change
+  const [prevUserId, setPrevUserId] = useState(userId)
   useEffect(() => {
-    updateConfiguredProps({});
+    if (prevUserId !== userId) {
+      updateConfiguredProps({});
+      setPrevUserId(userId)
+    }
   }, [
     userId,
   ]);

packages/connect-react/src/hooks/form-context.tsx

@@ -1,15 +1,15 @@
 import {
-  useSuspenseQuery, type UseSuspenseQueryOptions,
+  useQuery, type UseQueryOptions,
 } from "@tanstack/react-query";
 import { useFrontendClient } from "./frontend-client-context";
 import type { AppRequestResponse } from "@pipedream/sdk";
 
 /**
  * Get details about an app
  */
-export const useApp = (slug: string, opts?:{ useQueryOpts?: Omit<UseSuspenseQueryOptions<AppRequestResponse>, "queryKey" | "queryFn">;}) => {
+export const useApp = (slug: string, opts?:{ useQueryOpts?: Omit<UseQueryOptions<AppRequestResponse>, "queryKey" | "queryFn">;}) => {
   const client = useFrontendClient();
-  const query = useSuspenseQuery({
+  const query = useQuery({
     queryKey: [
       "app",
       slug,