Biz/dj 2788 google sheets submission doesnt work (#15179)

* Fix issue with loading dynamic props, e.g. google sheets column headers

* Update version

* Use query input as queryKey for useQuery

* Pass dynamicPropsId when calling client run

* Fix linter errors

* Fix linter error

Author: bzwrk

packages/connect-react/examples/nextjs/src/app/page.tsx

@@ -21,6 +21,15 @@ export default function Home() {
     text: "hello slack!",
   });
 
+  const [
+    dynamicPropsId,
+    setDynamicPropsId,
+  ] = useState<string | undefined>();
+
+  const handleDynamicProps = (dynamicProps: { id: string | undefined }) => {
+    setDynamicPropsId(dynamicProps.id)
+  }
+
   return (
     <>
       <div>My application</div>
@@ -29,13 +38,15 @@ export default function Home() {
           userId={userId}
           componentKey="slack-send-message"
           configuredProps={configuredProps}
+          onUpdateDynamicProps={handleDynamicProps}
           onUpdateConfiguredProps={setConfiguredProps}
           onSubmit={async () => {
             try {
               await client.actionRun({
                 userId,
                 actionId: "slack-send-message",
                 configuredProps,
+                dynamicPropsId,
               });
             } catch (error) {
               console.error("Action run failed:", error);

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"

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

@@ -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);