How do I integrate tanstack query with formOptions?

[shin616122]

I am trying to find a way to use formOptions with tanstack query when formOptions is in a file of its own and tanstack query is in a component file

I can see if I create some wrapper functions/hooks then it might work but I am not sure if that is the correct way or if there are something that is already implemented in tanstack form that can be used out of the box
The reason I have formOptions in a different file is that it is reused in other forms (I didnt write it in the example)

schema.ts

export const MySchema = z.object({
  name: z.string(),
});

export const myFormOpts = formOptions({
  defaultValues: {
    name: '', // I want default to have tanstack query data..
  },
});

component.tsx

const MyComponent = () => {
  const { data } = useQuery(...);

  const form = useAppForm({
    ...myFormOpts,
    validators: {
      onChange: MySchema,
    },
    onSubmit: async ({ value }) => {
      // Do something with form data
    },
  });

  form.setFormValue('name', data.name); // Currently setting value after fetching...
  
  return (
    <form
        onSubmit={(e) => {
          e.preventDefault();
          e.stopPropagation();
          form.handleSubmit();
        }}
      >
         <form.Field name="name" >
                {({ state, handleChange, handleBlur }) => {
                  return (
                    <Input
                      defaultValue={state.value}
                      onChange={(e) => handleChange(e.target.value)}
                      onBlur={handleBlur}
                      placeholder="Enter Name"
                    />
                  );
                }}
              </form.Field>
      </form>
  )
}

[JavierBrooktec]

Check the TsQuery example

You could do

import { z } from "zod";
import { formOptions } from "@tanstack/react-form";

export const DataSchema = z.object({
  name: z.string(),
});

type Data = z.infer<typeof DataSchema>;

export const getMyFormOpts = (defaultValues?: Data) =>
  formOptions({
    defaultValues: {
      name: defaultValues?.name || "",
    },
  });

const MyComponent = () => {
  const { data } = useQuery();

  const formOpts = useMemo(
    () => ({
      ...getMyFormOpts(data),
      validators: {
        onChange: DataSchema,
      },
      onSubmit: async ({ value }) => {
        // Do something with form data
      },
    }),
    [data]
  );

  const form = useAppForm(formOpts);

  form.setFormValue("name", data.name); // Currently setting value after fetching...

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        e.stopPropagation();
        form.handleSubmit();
      }}
    >
      <form.Field name="name">
        {({ state, handleChange, handleBlur }) => {
          return (
            <Input
              defaultValue={state.value}
              onChange={(e) => handleChange(e.target.value)}
              onBlur={handleBlur}
              placeholder="Enter Name"
            />
          );
        }}
      </form.Field>
    </form>
  );
};

[shin616122]

Thank you for the suggestion. You are right about simple usage, a wrapper function should work fine.
Sorry for not being clearer in my oversimplified example but I also have composition form using withForm and I am having hard time passing the data to withForm...

Currently

export const MyChildComponent = withForm({
  ... myFormOpts,
  render: ({ form }) => return ( ... )

With a wrapper function for formOpts

export const MyChildComponent = withForm({
  ...getMyFormOpts(data), // Cant get data from parent..
  render: ({ form }) => return ( ... )

[JavierBrooktec]

const mockOptions = getMyFormOpts();

export const MyChildComponent = withForm({
  ...mockOptions, // this is just for typescript check https://tanstack.com/form/latest/docs/framework/react/guides/form-composition#breaking-big-forms-into-smaller-pieces
render: function Render({ form }) {
    const dataName = useStore(form.store, state => state.values.name); // you can subscribe to the data