Skip to content
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions packages/connect-react/examples/nextjs/src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
ComponentFormContainer, FrontendClientProvider,
} from "@pipedream/connect-react";
import { fetchToken } from "./actions";
import { DynamicProps } from "../../../../src";

export default function Home() {
const userId = "my-authed-user-id";
Expand All @@ -21,6 +22,11 @@ export default function Home() {
text: "hello slack!",
});

const [
dynamicProps,
setDynamicProps,
] = useState<DynamicProps<{}>>();

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Improve type safety for dynamic props.

The empty object type {} is not type-safe and allows any non-nullish value. This could lead to runtime errors if the dynamic props have a specific expected shape.

Consider one of these approaches:

-  ] = useState<DynamicProps<{}>>();
+  // If you expect any object:
+  ] = useState<DynamicProps<object>>();
+  // If you know the shape:
+  ] = useState<DynamicProps<{
+    // Define expected properties here
+    propertyName: PropertyType;
+  }>>();

Committable suggestion skipped: line range outside the PR's diff.

🧰 Tools
🪛 Biome (1.9.4)

[error] 28-28: Don't use '{}' as a type.

Prefer explicitly define the object shape. '{}' means "any non-nullable value".

(lint/complexity/noBannedTypes)

🪛 eslint

[error] 28-28: The {} ("empty object") type allows any non-nullish value, including literals like 0 and "".

  • If that's what you want, disable this lint rule with an inline comment or configure the 'allowObjectTypes' rule option.
  • If you want a type meaning "any object", you probably want object instead.
  • If you want a type meaning "any value", you probably want unknown instead.

(@typescript-eslint/no-empty-object-type)

🪛 GitHub Actions: Pull Request Checks

[error] 28-28: The {} ("empty object") type is not allowed. Consider using object for "any object" or unknown for "any value" instead.

return (
<>
<div>My application</div>
Expand All @@ -29,13 +35,15 @@ export default function Home() {
userId={userId}
componentKey="slack-send-message"
configuredProps={configuredProps}
onUpdateDynamicProps={setDynamicProps}
onUpdateConfiguredProps={setConfiguredProps}
onSubmit={async () => {
try {
await client.actionRun({
userId,
actionId: "slack-send-message",
configuredProps,
dynamicPropsId: dynamicProps?.id,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Enhance error handling for missing dynamic props.

While optional chaining prevents runtime errors, we should handle the case where dynamic props are required but missing.

Consider adding validation:

 await client.actionRun({
   userId,
   actionId: "slack-send-message",
   configuredProps,
-  dynamicPropsId: dynamicProps?.id,
+  dynamicPropsId: dynamicProps?.id ?? (() => {
+    throw new Error('Dynamic props are required for this action');
+  })(),
 });

Committable suggestion skipped: line range outside the PR's diff.

});
} catch (error) {
console.error("Action run failed:", error);
Expand Down
2 changes: 1 addition & 1 deletion packages/connect-react/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@pipedream/connect-react",
"version": "1.0.0-preview.15",
"version": "1.0.0-preview.16",
"description": "Pipedream Connect library for React",
"files": [
"dist"
Expand Down
5 changes: 5 additions & 0 deletions packages/connect-react/src/hooks/form-context.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -129,12 +129,17 @@ export const FormContextProvider = <T extends ConfigurableProps>({
configuredProps,
dynamicPropsId: dynamicProps?.id,
};
const queryKeyInput = {
...componentReloadPropsInput,
}

const {
isFetching: dynamicPropsQueryIsFetching,
// TODO error
} = useQuery({
queryKey: [
"dynamicProps",
queryKeyInput,
],
queryFn: async () => {
const { dynamicProps } = await client.componentReloadProps(componentReloadPropsInput);
Expand Down
Loading