You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I recently started working with conform and one thing I kept hitting is not being able to send JSON to my actions due to the limitation of only working with formData or URLSearchParams. My current use case is saving the value of a rich text editor as JSON.
To do that, I am directly submitting the form with fetcher.submit, and using conform to reset the editor when the request succeeds.
I tried to adopt parseWithZod to JSON following this guide https://www.jacobparis.com/content/conform-json-formdata, but I soon hit the limit as those functions imported are internal to conform. So, I am making a formal request to consider allowing this use-case of submitting JSON to actions.
Thank you!
This is the code I used (I had to dig into conform as I need to be able to reset the form, which the guide does not include):
import{formatPaths,typeSubmission}from'@conform-to/dom';import{createSubmission,getSubmissionContext,}from'@conform-to/dom/submission';import{parseWithZod}from'@conform-to/zod';importtype{ZodError,ZodTypeAny,input,output,z}from'zod';typeSubmissionFromSchema<SchemaextendsZodTypeAny>=Submission<input<Schema>,string[],output<Schema>>;exportasyncfunctionparseRequest<SchemaextendsZodTypeAny>(request: Request,{ schema }: {schema: Schema}): Promise<SubmissionFromSchema<Schema>>{consttype=request.headers.get('content-type');if(type==='application/json'){constpayload=(awaitrequest.json())asRecord<string,unknown>;constresult=awaitschema.safeParseAsync(payload);returnparseJSONWithZod(payload,result);}constformData=awaitrequest.formData();returnparseWithZod(formData,{ schema });}/** * * @description Mimic parseWithZod by taking a few shortcuts: * - no use of submissionContext, we assume you don't submit via conform */functionparseJSONWithZod(payload: Record<string,unknown>,result: z.SafeParseReturnType<unknown,unknown>){// Create a default Submissionconstctx=getSubmissionContext(newFormData());if(result.success){returncreateSubmission({ ...ctx,payload: payload,value: result.data});}returncreateSubmission({
...ctx,payload: payload,error: getError(result.error),});}/** * @description getError. Same function that conform uses, only modified to exclude: * - custom formatError as we only want one * - zodMessage as we don't use coersion */functiongetError(zodError: ZodError): Record<string,string[]|null>{constresult: Record<string,z.ZodIssue[]|null>={};for(constissueofzodError.errors){constname=formatPaths(issue.path);// We don't need to handle conform error messages as there is no coersionconst_issues=result[name];if(_issues!==null){if(_issues){result[name]=_issues.concat(issue);}else{result[name]=[issue];}}}// Format the error to a format zod expectsreturnObject.entries(result).reduce<Record<string,string[]|null>>((item,_ref)=>{const[name,issues]=_ref;item[name]=issues ? formatError(issues) : null;returnitem;},{});}functionformatError(issues: z.ZodIssue[]): string[]{returnissues.map((each)=>each.message);}
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hello,
I recently started working with conform and one thing I kept hitting is not being able to send JSON to my actions due to the limitation of only working with formData or URLSearchParams. My current use case is saving the value of a rich text editor as JSON.
To do that, I am directly submitting the form with fetcher.submit, and using conform to reset the editor when the request succeeds.
I tried to adopt parseWithZod to JSON following this guide https://www.jacobparis.com/content/conform-json-formdata, but I soon hit the limit as those functions imported are internal to conform. So, I am making a formal request to consider allowing this use-case of submitting JSON to actions.
Thank you!
This is the code I used (I had to dig into conform as I need to be able to reset the form, which the guide does not include):
Beta Was this translation helpful? Give feedback.
All reactions