@drieam/final-form-react-query
v4.1.2
Published
Convenient component and helpers for using [React Final Form](https://final-form.org/react) in combination with [React Query](https://react-query.tanstack.com/overview).
Downloads
854
Keywords
Readme
@drieam/final-form-react-query
Convenient component and helpers for using React Final Form in combination with React Query.
Installation
Install @drieam/final-form-react-query
and its peer dependencies:
$ pnpm add @drieam/final-form-react-query @drieam/react-query react-query react-final-form final-form
Usage
To use a React Query mutation with Final Form, use the Form
component:
import { useUpdate } from "@drieam/react-query";
import { Form } from "@drieam/final-form-react-query";
import { Field } from "react-final-form";
interface Label {
id: number;
name: string;
}
interface UpdateLabel {
name: string;
}
interface Props {
label: Label;
}
const LabelUpdateForm = (label: Label) => {
const { mutate } = useUpdate<Label, {}, UpdateLabel>(`/api/v1/labels/${label.id}`);
return (
<Form mutate={mutate} initialValues={label}>
{({ handleSubmit }) => (
<form onSubmit={handleSubmit}>
<div>
<label>Name</label>
<Field name="name" component="input" placeholder="Name" />
</div>
<button type="submit">Save</button>
</form>
)}
</Form>
);
};
Components and utilities
- Components
Form
- Utilities
convertRequestErrorToSubmissionErrors