From 8a4661b2209d233712fc504cd58645288e97ed10 Mon Sep 17 00:00:00 2001 From: Biz Melesse Date: Thu, 2 Jan 2025 17:17:33 -0600 Subject: [PATCH 1/6] Fix issue with loading dynamic props, e.g. google sheets column headers --- packages/connect-react/src/hooks/form-context.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/connect-react/src/hooks/form-context.tsx b/packages/connect-react/src/hooks/form-context.tsx index bb68dfb4edf55..c07188f922998 100644 --- a/packages/connect-react/src/hooks/form-context.tsx +++ b/packages/connect-react/src/hooks/form-context.tsx @@ -129,12 +129,13 @@ export const FormContextProvider = ({ configuredProps, dynamicPropsId: dynamicProps?.id, }; + const queryKey = reloadPropIdx ? `dynamicProps:${reloadPropIdx}` : "dynamicProps" const { isFetching: dynamicPropsQueryIsFetching, // TODO error } = useQuery({ queryKey: [ - "dynamicProps", + queryKey ], queryFn: async () => { const { dynamicProps } = await client.componentReloadProps(componentReloadPropsInput); From d6a99e7ec56ed651a35b7b9d6607d7d2d2032cae Mon Sep 17 00:00:00 2001 From: Biz Melesse Date: Thu, 2 Jan 2025 17:32:40 -0600 Subject: [PATCH 2/6] Update version --- packages/connect-react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/connect-react/package.json b/packages/connect-react/package.json index 28c3b348a3b50..f3281c9d42cee 100644 --- a/packages/connect-react/package.json +++ b/packages/connect-react/package.json @@ -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" From c3219dee33f9d0eed97b6939498393ecd9656bcf Mon Sep 17 00:00:00 2001 From: Biz Melesse Date: Fri, 3 Jan 2025 12:17:45 -0600 Subject: [PATCH 3/6] Use query input as queryKey for useQuery --- packages/connect-react/src/hooks/form-context.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/connect-react/src/hooks/form-context.tsx b/packages/connect-react/src/hooks/form-context.tsx index c07188f922998..51c26597462fe 100644 --- a/packages/connect-react/src/hooks/form-context.tsx +++ b/packages/connect-react/src/hooks/form-context.tsx @@ -129,13 +129,17 @@ export const FormContextProvider = ({ configuredProps, dynamicPropsId: dynamicProps?.id, }; - const queryKey = reloadPropIdx ? `dynamicProps:${reloadPropIdx}` : "dynamicProps" + const queryKeyInput = { + ...componentReloadPropsInput, + } + const { isFetching: dynamicPropsQueryIsFetching, // TODO error } = useQuery({ queryKey: [ - queryKey + "dynamicProps", + queryKeyInput ], queryFn: async () => { const { dynamicProps } = await client.componentReloadProps(componentReloadPropsInput); From a23439f2be244e406a7a597f7c1e6e936ec4b107 Mon Sep 17 00:00:00 2001 From: Biz Melesse Date: Fri, 3 Jan 2025 18:51:08 -0600 Subject: [PATCH 4/6] Pass dynamicPropsId when calling client run --- packages/connect-react/examples/nextjs/src/app/page.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/connect-react/examples/nextjs/src/app/page.tsx b/packages/connect-react/examples/nextjs/src/app/page.tsx index 6de7fa73bebd0..92fc4f355e66f 100644 --- a/packages/connect-react/examples/nextjs/src/app/page.tsx +++ b/packages/connect-react/examples/nextjs/src/app/page.tsx @@ -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"; @@ -21,6 +22,11 @@ export default function Home() { text: "hello slack!", }); + const [ + dynamicProps, + setDynamicProps, + ] = useState>(); + return ( <>
My application
@@ -29,6 +35,7 @@ export default function Home() { userId={userId} componentKey="slack-send-message" configuredProps={configuredProps} + onUpdateDynamicProps={setDynamicProps} onUpdateConfiguredProps={setConfiguredProps} onSubmit={async () => { try { @@ -36,6 +43,7 @@ export default function Home() { userId, actionId: "slack-send-message", configuredProps, + dynamicPropsId: dynamicProps?.id }); } catch (error) { console.error("Action run failed:", error); From e7863c408e2f16a0c108a37ee0ad49ea11d96829 Mon Sep 17 00:00:00 2001 From: Biz Melesse Date: Mon, 6 Jan 2025 14:17:36 -0600 Subject: [PATCH 5/6] Fix linter errors --- packages/connect-react/examples/nextjs/src/app/page.tsx | 6 +++--- packages/connect-react/src/hooks/form-context.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/connect-react/examples/nextjs/src/app/page.tsx b/packages/connect-react/examples/nextjs/src/app/page.tsx index 92fc4f355e66f..fe1b8df3d3638 100644 --- a/packages/connect-react/examples/nextjs/src/app/page.tsx +++ b/packages/connect-react/examples/nextjs/src/app/page.tsx @@ -6,7 +6,7 @@ import { ComponentFormContainer, FrontendClientProvider, } from "@pipedream/connect-react"; import { fetchToken } from "./actions"; -import {DynamicProps} from "../../../../src"; +import { DynamicProps } from "../../../../src"; export default function Home() { const userId = "my-authed-user-id"; @@ -25,7 +25,7 @@ export default function Home() { const [ dynamicProps, setDynamicProps, - ] = useState>(); + ] = useState>(); return ( <> @@ -43,7 +43,7 @@ export default function Home() { userId, actionId: "slack-send-message", configuredProps, - dynamicPropsId: dynamicProps?.id + dynamicPropsId: dynamicProps?.id, }); } catch (error) { console.error("Action run failed:", error); diff --git a/packages/connect-react/src/hooks/form-context.tsx b/packages/connect-react/src/hooks/form-context.tsx index 51c26597462fe..afe4fc4db489f 100644 --- a/packages/connect-react/src/hooks/form-context.tsx +++ b/packages/connect-react/src/hooks/form-context.tsx @@ -139,7 +139,7 @@ export const FormContextProvider = ({ } = useQuery({ queryKey: [ "dynamicProps", - queryKeyInput + queryKeyInput, ], queryFn: async () => { const { dynamicProps } = await client.componentReloadProps(componentReloadPropsInput); From 15445523e154c8f5df0da72595df4e1410b1dcab Mon Sep 17 00:00:00 2001 From: Biz Melesse Date: Mon, 6 Jan 2025 15:16:50 -0600 Subject: [PATCH 6/6] Fix linter error --- .../examples/nextjs/src/app/page.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/connect-react/examples/nextjs/src/app/page.tsx b/packages/connect-react/examples/nextjs/src/app/page.tsx index fe1b8df3d3638..d3b1e1702bff8 100644 --- a/packages/connect-react/examples/nextjs/src/app/page.tsx +++ b/packages/connect-react/examples/nextjs/src/app/page.tsx @@ -6,7 +6,6 @@ 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"; @@ -23,9 +22,13 @@ export default function Home() { }); const [ - dynamicProps, - setDynamicProps, - ] = useState>(); + dynamicPropsId, + setDynamicPropsId, + ] = useState(); + + const handleDynamicProps = (dynamicProps: { id: string | undefined }) => { + setDynamicPropsId(dynamicProps.id) + } return ( <> @@ -35,7 +38,7 @@ export default function Home() { userId={userId} componentKey="slack-send-message" configuredProps={configuredProps} - onUpdateDynamicProps={setDynamicProps} + onUpdateDynamicProps={handleDynamicProps} onUpdateConfiguredProps={setConfiguredProps} onSubmit={async () => { try { @@ -43,7 +46,7 @@ export default function Home() { userId, actionId: "slack-send-message", configuredProps, - dynamicPropsId: dynamicProps?.id, + dynamicPropsId, }); } catch (error) { console.error("Action run failed:", error);