Theo's Typesafe Cult•12mo ago

using zact with react-hook-form issues error

hello. when I try to call a server action wrapped in zact like so, I am getting this error: - error ReferenceError: Cannot access 'callMyServerAction' before initialization. This only seems to happen once I introduce react-hook-form and validate on the front end as well:

// actions.ts
export const addDynamoDBConnection =
  zact(
    z.object({
      workspaceId: z.string(),
      dataSourceCredentials: z.object({
        secretAccessKey: z.string().min(6),
        accessKeyId: z.string().min(6),
        region: z.string().min(3),
        datasourceName: z.string().min(6),
      }),
    })
  )(
  async ({
    workspaceId,
    dataSourceCredentials: {
      accessKeyId,
      secretAccessKey,
      region,
      datasourceName,
    },
  }: {
    workspaceId: string;
    dataSourceCredentials: DataSourceCredentials["dynamodb"];
  }) => {
...
  })

// actions.ts
export const addDynamoDBConnection =
  zact(
    z.object({
      workspaceId: z.string(),
      dataSourceCredentials: z.object({
        secretAccessKey: z.string().min(6),
        accessKeyId: z.string().min(6),
        region: z.string().min(3),
        datasourceName: z.string().min(6),
      }),
    })
  )(
  async ({
    workspaceId,
    dataSourceCredentials: {
      accessKeyId,
      secretAccessKey,
      region,
      datasourceName,
    },
  }: {
    workspaceId: string;
    dataSourceCredentials: DataSourceCredentials["dynamodb"];
  }) => {
...
  })

// modal.tsx
...
  const {
    mutate,
    data,
    isLoading: addingDatasource,
    // error,
 } = useZact(datasource.addConnection);
...
  const form = useForm<z.infer<typeof dynamodbSchema>>({
    resolver: zodResolver(datasource.schema),
  });
const onSubmit = () => {
        mutate({
        dataSourceCredentials:
          dataSourceCredentials as DataSourceCredentials["dynamodb"],
        workspaceId,
      });
}
      return <form onSubmit={(...args) => form.handleSubmit(onSubmit)(...args)}>
...
</form>

// modal.tsx
...
  const {
    mutate,
    data,
    isLoading: addingDatasource,
    // error,
 } = useZact(datasource.addConnection);
...
  const form = useForm<z.infer<typeof dynamodbSchema>>({
    resolver: zodResolver(datasource.schema),
  });
const onSubmit = () => {
        mutate({
        dataSourceCredentials:
          dataSourceCredentials as DataSourceCredentials["dynamodb"],
        workspaceId,
      });
}
      return <form onSubmit={(...args) => form.handleSubmit(onSubmit)(...args)}>
...
</form>

removing zact altogether fixes this and maybe including backend validation is overkill?

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

using zact with react-hook-form issues error