@drieam/final-form-react-query NPM

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